RSS to HTML Wallpaper

RSS এর কন্টেন্ট দেখান আপনার যে কোন সাইটে (rss to html)

গতরাতে চিন্তা করলাম, আমার দুটা ব্লগ  (টেক ব্লগ এবং ইত্তিহাদুল) এর সর্বশেষ আপডেট আমার পোর্টফোলিও ওয়েবসাইট টিতে দেয়া দরকার। তাহলে কয়েকটা ব্যাকলিঙ্ক বাড়বে পাশাপাশি ভিজিটর রা সেখান থেকে ক্লিক করলে কিছু হিট ও বাড়বে। যাই হোক, খোজা শুরু করলাম সম্ভাব্য কী ওয়ার্ড দিয়ে। বেশিরভাগ স্ক্রিপ্ট ই error দেখায় বা পেইড। কিছু কিছু ফ্রি স্ক্রিপ্ট কাজ করলেও, ওনেক বেশি লিমিটেশন, মন মত হচ্ছিল না। যাইহোক, সল্যুশন একটা পেয়ে গেলাম মনের মতই, কিন্তু তারা গুগোলের যে API ব্যাবহার করেছে, সেটা বহু আগেই এক্সপায়ার্ড হয়ে হেছে। খুজোখুজি করে গুগোলের নতুন API লোড করার সিস্টেম বের করলাম। অবশেষে সফল। সেটাই শেয়ার করচ্ছি।

প্রথমত আমি যেমন চাচ্ছিলামঃ

এই ফীড গুলোকে ইচ্ছা মত রাঙিয়ে আমার অন্য সাইটে দেখাতে।  সরাসরি লিঙ্ক বা আইফ্রেম করলে নিচের মত দেখায়, আমি চাচ্ছিলাম এটা এবং এই ফীড দুটোকে অন্যান্য লিঙ্ক/টেক্সট এর মতই দেখাক।

rss to html

এই ফীড গুলোনে ইচ্ছা মত রাঙিয়ে আমার অন্য সাইটে দেখাতে

যাতে বোঝা না যায় যে, RSS থেকে মেরে দেয়া। এবং পরবর্তিতে নিচের ছবির মত দেখায়

rss to html solved

পরবর্তিতে এই ছবির মত দেখায়

 

যাই হোক, বেশি কথা বলে লাভ নাই। কোড গুলো অতিরিক্ত এক্সপ্লেইন করতে যাচ্ছিনা, শুধু যেটুকু না বললেই না, সেটুকু ম্যানশন করচ্ছি। দরকারী কোড গুলো সহ।

যা করতে হবেঃ

স্টেপ ১ নিচের এই কোড গুলো হেড সেকশনে বসাতে হবে <head> এটা গুগোল এজাক্স ফীড এপিআই লোড করবে।

[syntax type=”html”]

<!– Script for RSS Fetch Start labib !–>
<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“feeds”, “1”) //Load Google Ajax Feed API (version 1)
</script>
<script type=”text/javascript” src=”http://labib.me/resources/js/rssdisplayer.js”></script>
<!– Script for RSS Fetch End labib !–>

[/syntax]

স্টেপ ২  rssdisplayer.js নামে যে জাভাস্ক্রিপ্ট ফাইল দেখতে পাচ্ছেন, এটা নিচের কোড গুলো দিয়ে তৈরী করে নিন। অথবা সোর্স এর লিঙ্ক থেকে ডাউনলোড করে নিন। (সোর্স এর লিঙ্ক কতদিন একটিভ থাকবে ঠিক নাই)

[syntax type=”js”]

google.load(“feeds”, “1”) //Load Google Ajax Feed API (version 1)

function rssdisplayer(divid, url, feedlimit, showoptions){
this.showoptions=showoptions || “” //get string of options to show (“date” and/or “description”)
var feedpointer=new google.feeds.Feed(url) //create new instance of Google Ajax Feed API
feedpointer.setNumEntries(feedlimit) //set number of items to display
document.write(‘<div id=”‘+divid+'”></div>’)
this.feedcontainer=document.getElementById(divid)
var displayer=this
feedpointer.load(function(r){displayer.formatoutput(r)}) //call Feed.load() to retrieve and output RSS feed
}

rssdisplayer.prototype.formatdate=function(datestr){
var itemdate=new Date(datestr)
return “<span style=’font-size: 80%’>”+itemdate.toLocaleString()+”</span>”
}

rssdisplayer.prototype.formatoutput=function(result){
if (!result.error){ //if RSS feed successfully fetched
var thefeeds=result.feed.entries //get all feed entries as a JSON array
var rssoutput=””
for (var i=0; i<thefeeds.length; i++){ //loop through entries
var itemtitle=”&raquo; <a href=\”” + thefeeds[i].link + “\”>” + thefeeds[i].title + “</a>”
var itemdate=/date/i.test(this.showoptions)? this.formatdate(thefeeds[i].publishedDate) : “”
var itemdescription=/description/i.test(this.showoptions)? “<br />”+thefeeds[i].content : /snippet/i.test(this.showoptions)? “<br />”+thefeeds[i].contentSnippet  : “”
rssoutput+=”” + itemtitle + ” ” + itemdate + itemdescription + “<br />”
}
rssoutput+=””
this.feedcontainer.innerHTML=rssoutput
}
else //else, output error
alert(“Error fetching feeds: “+result.error.message)
}

//USAGE SYNTAX: new rssdisplayer(“divid”, “rssurl”, numberofitems, “displayoptions”)
//new rssdisplayer(“adiv”, “http://www.cssdrive.com/index.php/news/rss_2.0/”, 5, “date, description”)
[/syntax]

স্টেপ ৩  স্টেপ আসলে শ্যাষ! এবার নিচের কোড টা যেখানে বসাবেন, সেখানেই ফিড দেখানো শুরু করবে। এখানে ID ই মেইন। আইডি যেখানে যুক্ত করবেন, সেখানেই ফীড গুলো HTML হিসাবে দেখাবে। এখানে “ittihadul” হচ্ছে div id, যদিও আমি আমার সাইটে সুবিধার জন্য <p> প্যারাগ্রাফ id হিসাবে ব্যাবহার করেছি।

[syntax type=”html”]

<div id=”ittihadul”></div>
<script type=”text/javascript”>
//USAGE SYNTAX: new rssdisplayer(“divid”, “rssurl”, numberofitems, “displayoptions”)
new rssdisplayer(“ittihadul”, “http://www.ittihadul.com/feed/”, 5, “date, description”)
</script>

[/syntax]

এক্সট্রাঃ এবার নিজের মত করে কাস্টমাইজ করে নিন। বুঝতে সুবিধার জন্য, আমি আমার ব্যাবহার করা কোড গুলো হুবহু তুলে দিলাম। আমি তারিখ এবং পোষ্ট ডেসক্রিপশন চাই না বলে সেটা রুমুভ করে দিয়েছি। আর জাভাস্ক্রিপ্ট এর ভেতরে ফীড এর লাইনগুলো ul li হিসাবে ছিল, আমি ওভাবে চাই না বলে, ul li বাদ দিয়ে, প্রতি লাইনের শেষে br ব্যাবহার করেছি। আপনিও নিজের মত করে নিতে পারেন। সেক্ষেত্রে লাইনব্রেক কোড br তুলে দিয়ে ul li ব্যাবহার করতে হবে।

[syntax type=”html”]

<!– RSS Import for Labib.me Start !–>
<h2>Latest Article on <a href=”http://blog.labib.me” target=”_blank” style=”color:#DA053A”>Tech<span style=”color:#00F”>Note</span></a></h2>
<hr />
<p id=”technote”>
<script type=”text/javascript”>
new rssdisplayer(“technote”, “http://blog.labib.me/feed/”, 5)
</script>
</p>
<br />

<h2>Latest Bangla Blog on <a href=”http://www.ittihadul.com” target=”_blank” style=”color:#DA053A”>Ittihadul.com</a></h2>
<hr />
<p class=”bn” id=”ittihadul”>
<script type=”text/javascript”>
//USAGE SYNTAX: new rssdisplayer(“divid”, “rssurl”, numberofitems, “displayoptions”)
new rssdisplayer(“ittihadul”, “http://www.ittihadul.com/feed/”, 5)
</script>
</p>
<br />

<!– RSS Import for Labib.me End !–>

[/syntax]

নোটঃ RSS to HTML – আমার এই গবেষণামূলক কাজটার পূর্ণরুপ এখানে পাবেন। এখানে নিজের মত চেঞ্জ করে কোড ট্রাই ও করা যাবে। আর যারা ওয়ার্ডপ্রেস বা এধরনের CMS ব্যাবহার করেন, তাদের মূলত এটার দরকার নাই, কারণ অনেক প্লাগইন পাওয়া যায় সেখানে এটা করার জন্য। যারা প্লাগইন ছাড়া এই কাজটা করতে চান, এটা তাদের জন্য।

হ্যাপি ফিডীং! 😉

২৬৯১ টি সর্বমোট হিট ২ টি আজকের হিট

Leave a Reply

Your email address will not be published. Required fields are marked *