Monday 15 April 2013

How to embed your Blogger blogs into your webpage

I was asked in a forum that I participate in, how I embedded my blogs into my webpage.  I tried to reply in the forum but its autoformatting kept corrupting my code snippets so I thought I'd just write a blog page on how to do it and link to that instead.

These instructions are taken from this webpage and the credit for this technique goes to that page's author.  I'm just simplifying it into simple steps.  To see an example in action you can go to my main webpage to see the links and just view my source code if you need more help.

1.  First you need to work out what the URL is for your blog's RSS feed.  This is easy to do.  Go to one of your blog posts, scroll right to the bottom of the page and you will see a link that says

Subscribe to: Posts (Atom)

Hover over this link and the main part of your URL will pop up - make a note of it.

In this blogs case it pops up with .

To get the RSS URL just add ?alt=rss end of the link so you have:

Obviously you should end up with your own blogs link and not mine.

2.   Go here and download yql_js_widget.js

3.   Upload this javascript file to the same directory that your web page html file is in.

4.   Insert this code in to the head section of you html code:

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

5.  Insert this code wherever you want the blog links to appear (I suggest you copy and paste it), but remember to change my link URL for your link URL:
     <ul id="widgetContainer">
     <li><script type="text/javascript"> 
     var config = {};
      var format = '\<li\>\<a href=\"{link}\"\>{title}\<\/a\>\<\/li\>';
      var yqlQuery = "select * from feed where url='  /default?alt=rss' limit 3";
      yqlWidget.push(yqlQuery, config, format, "widgetContainer");

6.  And that's it.  You may have to fiddle with CSS etc to get it to look as you want but you should now have the links to your 3 latest blogs on your web page.  If you want more or less, then alter the limit number in the code above.

Remember look at the source code here if you are struggling.