Saturday, April 2, 2011

How to create a blogger widget from an rss feed



look for green for where to change things for you

1. First you need to create an rss reading feed on your website (turning your rss into html) You can use this template for yours:
<script src="http://www.google.com/jsapi/?key=ABQIAAAAipyd5uzN4L8Ll3brmslpHxTWFx-CZ4AxZW7rx1DUx0aOrJgFkRS3qP-l2zSyJkgRxvoesjcyE3ez7g"
      type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1") //Load Google Ajax Feed API (version 1)
</script>

<div id="feeddiv">Loading...</div>
<script type="text/javascript">

var feedcontainer=document.getElementById("feeddiv")
var feedurl="http://www.yourdomain.com/rss.php"
var feedlimit=1
var rssoutput=""

function rssfeedsetup(){
var feedpointer=new google.feeds.Feed(feedurl) //Google Feed API method
feedpointer.setNumEntries(feedlimit) //Google Feed API method
feedpointer.load(displayfeed) //Google Feed API method
}

function displayfeed(result){
if (!result.error){
var thefeeds=result.feed.entries
for (var i=0; i<thefeeds.length; i++)
rssoutput+="<p>" + thefeeds[i].content + "<br> -<a href='http://" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a></p>"
rssoutput+="<a href='http://www.yoururl.com'>brought to you by yourname</a>"
feedcontainer.innerHTML=rssoutput
}
else
alert("Error fetching feeds!")
}

window.onload=function(){
rssfeedsetup()
}

</script>

2. Next you will need to turn that script into escaped code - copy it into this page http://javascript.about.com/library/blscr01.htm and click to turn html to txt

3. Then you will need to create a form on your webpage with a button to allow someone to click to add the widget to their blog - plug your info into a form like this and stick it on your index.php or wherever you want the button to add the widget:
<form method="POST" action="http://www.blogger.com/add-widget">    
  <input type="hidden" name="widget.title" 
        value="Title for your widget"/>
    
 <textarea name="widget.content" style="display:none;">
insert the output from step 2 here - this will be the code that makes the widget - it should be converted from the html into txt by escaping the characters
</textarea>
  <input type="hidden" name="infoUrl" 

        value="http://www.yoururl.com"/>

  <input type="image" src="http://www.blogger.com/img/add/add2blogger_sm_w.gif" alt="Submit button">

</form>

4. Thats really all there is to it - test it to make sure it works.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...
Web Design & Marketing - Click and get an instant quote on your project