آموزش 02: gAjax RSS Feeds Displayer - جاوااسکریپت و A jax (پیشرفته)
عنوان:
آموزش 02: gAjax RSS Feeds Displayer - جاوااسکریپت و A jax (پیشرفته) ?!؟
نمونه و صفحه ی اصلی آموزش به زبان انگلیسی:
کد:
http://www.dynamicdrive.com/dynamicindex18/gajaxrssdisplayer.htm
مرورگرهایی که با نمایش این اسکریپت مشکلی ندارند:
توضیحات:
اسکریپتی مناسب برایه: وبمسترها، طراح ها، وبلاگ نویسان و ...
این اسکریپت حتما یکی از بهترین و پر طرفدار ترین اسکریپت های این آموزشها میتونه باشه
نمایش rss و اخباره دیگر سایت ها در سایت یا وبلاگ خودتون بدونه اینکه حتی یک فایل رو روی سرورتون نصب کنید یا اینکه احتیاج به ساپورته زیان های سرور ساید باشه
این اسکریپت از کده قویه Google's Ajax Feed API استفاده میکنه که یکی از قویترین و معروفترین اسکریپت ها در این زمینه هست
کد:
http://code.google.com/apis/ajaxfeeds/documentation/
شما به راحتی با قرار دادنه این کدها میتونید از امکاناتی از قبیله:
نمایشه همزمانه چندین feed از چند سایت مختلف
نمایشه اطلاعاته آخرین آپدیت ها و ... در انجمن های خودتون!
مرتب کردنه آنها به روشهای مختلف و درهم!
تنظیماته دقیق که کدام rss ها در کدام زمینه نشان داده بشوند یا نشوند
و ....
دیگه احتیاجی نیست که کلی مصیبت!!! برایه نشان دادنه rss ها در سایتتون بکشید
کد:
- Uses Google Ajax Feed API to host/cache the desired RSS feeds, so you don't have to install or host anything on your own server.
- Specify multiple RSS feeds to display, with the results intermixed.
- Sort the results either by "date", "title", or a custom "label" assigned to each feed (ie: "Digg" then "Slashdot").
- Set the number of total RSS entries to show. If multiple feeds are specified, that number is spread out evenly amongst the feeds.
- Specify which additional components of each RSS entry to show, such as its "label", "date", "description", "snippet" and more.
- Ability to refresh the contents of the feeds on the fly without reloading the page.
- Supports multiple gAjax RSS displayer instances on the same page.
کدها و مراحله کار:
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
اگر بازم به توضیحات احتیاج داشتید همینجا دقیق بگید...
موفق و موید باشید
داریـــــــــــوش:10:
********************
به زودی:
gAjax RSS Pausing Scroller
و
gAjax RSS Ticker
