عنوان:

آموزش 02: gAjax RSS Feeds Displayer – جاوااسکریپت و A jax (پیشرفته) ?!؟

نمونه و صفحه ی اصلی آموزش به زبان انگلیسی:

http://www.dynamicdrive.com/dynamicindex18/gajaxrssdisplayer.htmمرورگرهایی که با نمایش این اسکریپت مشکلی ندارند:

FF1+ IE5+ Opr8+

توضیحات:

اسکریپتی مناسب برایه: وبمسترها، طراح ها، وبلاگ نویسان و …

این اسکریپت حتما یکی از بهترین و پر طرفدار ترین اسکریپت های این آموزشها میتونه باشه
نمایش rss و اخباره دیگر سایت ها در سایت یا وبلاگ خودتون بدونه اینکه حتی یک فایل رو روی سرورتون نصب کنید یا اینکه احتیاج به ساپورته زیان های سرور ساید باشه

این اسکریپت از کده قویه Google's Ajax Feed API استفاده میکنه که یکی از قویترین و معروفترین اسکریپت ها در این زمینه هست

http://code.google.com/apis/ajaxfeeds/documentation/شما به راحتی با قرار دادنه این کدها میتونید از امکاناتی از قبیله:

نمایشه همزمانه چندین feed از چند سایت مختلف
نمایشه اطلاعاته آخرین آپدیت ها و … در انجمن های خودتون!
مرتب کردنه آنها به روشهای مختلف و درهم!
تنظیماته دقیق که کدام rss ها در کدام زمینه نشان داده بشوند یا نشوند
و ….

دیگه احتیاجی نیست که کلی مصیبت!!! برایه نشان دادنه rss ها در سایتتون بکشید

کدها و مراحله کار:

1.

در ایتدا این کدها و استایل ها رو در قسمته HEAD صفحه ی خود بزارید در صروته نیاز میتونید آنها رو به مقدارهای دلخواهتون تغییر دهید

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY">
</script>

<script type="text/javascript" src="gfeedfetcher.js">

</script>

<style type="text/css">

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#example1 li{ /*CSS specific to demo 1*/
margin-bottom: 4px;
}

#example2 div{ /*CSS specific to demo 2*/
margin-bottom: 5px;
}

#example2 div a{ /*CSS specific to demo 2*/
text-decoration: none;
}

#example3 a{ /*CSS specific to demo 3*/
color: #D80101;
text-decoration: none;
font-weight: bold;
}

#example3 p{ /*CSS specific to demo 3*/
margin-bottom: 2px;
}

code{ /*CSS for insructions*/
color: red;
}

</style>توجه!: شما باید قسمته YOUR-API-KEY در بالای بالای کد رو را با کدهای خودتون که مختصه سایتتون هست عوض کنید!

برای گرفتنه کده مربوط به ساییتتون به این آدرس برید

http://code.google.com/apis/ajaxfeeds/signup.htmlو آدرسه دامین سایت خودتون رو وارد کنید و کدی که بهتون میده (کده دراز و عجیب غریبیه!) رو جایه عبارته YOUR-API-KEY در این اسکریپت وارد کنید

2.

این دو فایل را دانلود کنید و در هاستتون آپلود کنید:

http://www.dynamicdrive.com/dynamicindex18/gfeedfetcher.jsو

3.

حالا برایه اینکه rss ها رو در صفحتون نمایش بدید این کد رو در قسمتی از body که میخواید نمایش داده بشن کپی/پیست کنید

<h3>Example 1: (Single RSS feed, 10 entries, "<code>date</code>" field enabled, sort by <code>title</code>)</h3>

<script type="text/javascript">

var cssfeed=new gfeedfetcher("example1", "example1class", "")
cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("li") //Display each entry as a list (li element)
cssfeed.filterfeed(10, "title") //Show 10 entries, sort by date
cssfeed.init() //Always call this last

</script>

<br /><br />

<h3>Example 2: (Two RSS feeds, 6 entries, "<code>label"</code>, "<code>datetime</code>", and "<code>snippet</code>" fields enabled, sort by <code>label</code>)</h3>

<script type="text/javascript">

var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
socialfeed.setentrycontainer("div") //Display each entry as a DIV
socialfeed.filterfeed(6, "label") //Show 6 entries, sort by label
socialfeed.init() //Always call this last

</script>

<br /><br />

<h3>Example 3: (Three RSS feeds, 8 entries, "<code>datetime</code>" and "<code>snippet</code>" fields enabled, sort by <code>date</code>)</h3>

<script type="text/javascript">

var newsfeed=new gfeedfetcher("example3", "example3class", "_new")
newsfeed.addFeed("BBC", "http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml") //Specify "label" plus URL to RSS feed
newsfeed.addFeed("MSNBC", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml") //Specify "label" plus URL to RSS feed
newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/topstories") //Specify "label" plus URL to RSS feed
newsfeed.displayoptions("datetime snippet") //show the specified additional fields
newsfeed.setentrycontainer("p") //Display each entry as a paragraph
newsfeed.filterfeed(8, "date") //Show 8 entries, sort by date
newsfeed.init() //Always call this last

</script>شما 3 نوعه مختلف rss رو مشاهده میکنید که از 3 سایته مختلف هستن
این ها فقط برای نمونه گزاشته شده اند و شما میتوانید اضافه ها رو حذف کنید و آنهایی رو که دوست دارید مطابقه سلیقه ی خود تغییر دهید

راهنما:

var socialfeed=new      gfeedfetcher("someid", "someclass", "_new")
    socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot")      //Specify "label" plus URL to RSS feed
    socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify      "label" plus URL to RSS feed
    socialfeed.displayoptions("label datetime snippet") //show the specified      additional fields
    socialfeed.setentrycontainer("div") //Display each entry as a DIV
    socialfeed.filterfeed(6, "label") //Show 6 entries, sort by label
    socialfeed.init() //Always call this lastنیازی به توضیحاته اضافه نمیبینم
خیلی راحت میتونید قسمت هایی که لازمه رو تغییر بدید

احیانا برایه اطلاعاته بیشتر درباره ی هر قسمت و پارامترهای هر کدام به این قسمت در پایینه صفحه ی نمونه سر بزنید

gfeedfetcher object and methods

اگر بازم به توضیحات احتیاج داشتید همینجا دقیق بگید…

موفق و موید باشید
داریـــــــــــوش

********************

gAjax RSS Pausing Scroller

gAjax RSS Ticker