‫نمایش خروجی RSS سایت‌های دیگر به کمک jQuery

‫نمایش خروجی RSS سایت‌های دیگر به کمک jQuery <br/> شاید خیلی از دوستان (مثل گذشته نه چندان دور خودم ) خیلی بیش از اندازه به برنامه نویسی‌های سمت سرور اهمیت می دهند که این کار باعث از دست دادن ، سرعت و سادگی برنامه نویسی سمت کلاینت می‌شود.

شاید خیلی از دوستان (مثل گذشته نه چندان دور خودم ) خیلی بیش از اندازه به برنامه نویسی‌های سمت سرور اهمیت  می دهند که این کار باعث از دست دادن ، سرعت و سادگی برنامه نویسی  سمت کلاینت می‌شود.
معمولا ما برای کار با خروجی‌های XML از کد‌های سمت سرور استفاده می‌کنیم ، بدون اینکه از قدرت جی کوئری در این زمینه  اطلاعی داشته باشیم. البته در این مقاله خیلی به پردازش XML  توسط جی کوئری نمی‌پردازیم و کار اصلی را گوگل برای ما انجام می‌دهد.
برای انجام این کار ما ابتدا توسط یکی از کتابخانه‌های گوگل ، خروجی RSS یک وب سایت رامی خوانیم و بعد به کمک jQuery  آن‌ها را نمایش می‌دهیم.
    <script src="jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

        google.load("feeds", "1");

        function initializeda() {
            var feed = new google.feeds.Feed("http://www.drupaleasy.ir/rss.xml");
            feed.setNumEntries(5);
            feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
            feed.load(function (result) {
                if (!result.error) {
                    for (var i = 0; i < result.feed.entries.length; i++) {
                        var entry = result.feed.entries[i];
                        $('#drupaleasy ul').append('<li><a href="' + entry.link + '">' + entry.title + '</a></li>');
                    }
                }
            });
        }

google.setOnLoadCallback(initializeda);
    </script>
توضیحات کد :
ابتدا نیاز داریم کتابخانه گوگل را به صفحه اضافه کنیم. شما می‌توانید مستندات کامل این کتابخانه در این لینک  بخوانید.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
در ابتدا معرفی می‌کنیم که به کدام امکان این کتابخانه نیاز داریم ، در این جا ما از ورژن "1" تابع feed  استفاده می‌کنیم.بد نیست برای آشنایی بیشتر سری هم به این لینک  بزنید.
google.load("feeds", "1");
ابتدا لینک مورد نظر که باید خروجی از آن گرفته شود را معرفی می‌کنیم و آن را در متغییری قرار می‌دهیم.
var feed = new google.feeds.Feed("http://www.drupaleasy.ir/rss.xml");
تنظیمات دلخواه خودمان را نظیر تعداد پست واکشی شده و نوع خروجی مشخص می‌کنیم. تجربه (شخصی )نشان داده که بهترین نوع خروجی JSON   است.
feed.setNumEntries(5);
feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
و بعد هم به کمک jQuery  ساختار مورد نظر خودمان را تنظیم می‌کنیم. شما می‌توانید به کمک مستندات ، و سلیقه شخصی خودتان این کار را انجام بدهید ، و در آخر هم تنظیم می‌کنید ، اجرای تابع شما در چه زمانی اتفاق بیافتید.
            feed.load(function (result) {
                if (!result.error) {
                    for (var i = 0; i < result.feed.entries.length; i++) {
                        var entry = result.feed.entries[i];
                        $('#drupaleasy ul').append('<li><a href="' + entry.link + '">' + entry.title + '</a></li>');
                    }
                }
            });
در این جا من خروجی فید را به صورت یک لیست (ul)  تنظیم کردم ، به این صورت که به ازای هر سطر یک li  همراه با تگ a  تولید کرده ام و به ul  مورد نظر append  کردم. 
فایل HTML :
            <div id="drupaleasy" class="feeds">
            <span>DrupalEasy.ir</span>
                <ul>
                </ul>
                <a href="http://drupaleasy.ir">more</a>
            </div>
همچنین خیلی راحت می‌توانید به کمک CSS  استایل‌های دلخواه خودتون رو اعمال کنید.
        .feeds
        {
            float: right;
            background-color: rgba(234, 242, 243, 0.73);
            margin: 5px;
            border-radius: 20px;
            padding: 8px;
            width: 293px;
            height: 217px;
            border: 1px solid #293883;
        }

        #drupaleasy ul
        {
            list-style-image: url("img/drupal.png");
        }
این هم شد خروجی کار  من