Bogger Hot Links Widget That displays Summaries of Your Articles

Everyone wants to decorate their blogs with cool stuff. But rather than select widgets produced by blogger that are on a zillion other pages too, how about something new? Something new AND useful that will tempt users to stay on your blog by clicking more links. Described below is the Hot Links widget and how to integrate it with your blog. Have a look at the widget below. In this example it is configured to work with blog justtufun.blogspot.com . You can refresh the page a couple of time to see the widget change. Leave any questions or problems as comments and I will endeavour to answer them.


The widget will show an image if it's available. If not it will show 150 letters of text from the article.

What you need
AccountDescription
Blogger accountTo create and insert the widget
Free hosting accountSomething like googlepages etc, to host your html file


Installing the Widget
  • Log in to blogger and at the dashboard click on new posts, settings, layout etc of your blog. Go to the address box in your browser and get your blogid. It should look something like this
    http://www.blogger.com/posts.g?blogID=4928424574574982882
    What you are after is the big number after 'blogID=', i.e. your blog-id.

  • Save the file javascript file below as wid_hotlinks.js 
     1. google.load("gdata", "1.s")
 2. 
 3. var HotLinks_postCount;
 4. var HotLinks_bloggerService;
 5. var HotLinks_noOfLinks;
 6. var HotLinks_containerId;
 7. var HotLinks_blogId;
 8. var HotLinks_noOfPosts;
 9. 
10. function HotLinksW_setupWidget(blogid, nooflinks, divx){
11.     HotLinksW_setupWidget(blogid, nooflinks, divx, 20);
12. }
13. function HotLinksW_setupWidget(blogid, nooflinks, divx, posts){
14.     HotLinksW_containerId = divx;
15.     HotLinksW_blogId = blogid;
16.     HotLinksW_noOfLinks = nooflinks;
17.     HotLinks_noOfPosts = posts;
18.     
19.     HotLinksW_InitContainers();
20.     google.setOnLoadCallback(HotLinksW_getMyBlogFeed);
21. }
22. 
23. function HotLinksW_InitContainers(){
24.     var s="<table class=\"hotlinks_table\" cellpadding=\"5\" border='0' width='100%'><tr>";
25.     for (i=0;i<HotLinksW_noOfLinks;i++)
26.         s+="<td width=\""+Math.round(100.0/HotLinksW_noOfLinks)+"%\" bgcolor=\"#"+(i%2==0?"e0e0e0":"f7f7f7")+"\"><div id=\"HotLinksW_t"+i+"\"><font class='hotloading'>loading...</font></div></td>";
27.     s+="</tr></table>";
28.     document.getElementById(HotLinksW_containerId).innerHTML=s;
29. }
30. function HotLinksW_handleDraw(link, title, text){
31.     document.getElementById("HotLinksW_t"+HotLinksW_postCount++).innerHTML="<center><a target=\"_top\" class=\"hotlinks_href\" href=\""+link+"\">"+title+"</a></center><br/><span class=\"hotlinks_summary\">"+text+"</span>";
32. }
33. function HotLinksW_getMyBlogFeed(){
34.     HotLinksW_postCount=0;
35.     bloggerService = new google.gdata.blogger.BloggerService('GoogleInc-jsguide-1.0');
36.     var query = new google.gdata.blogger.BlogPostQuery("http://www.blogger.com/feeds/"+HotLinksW_blogId+"/posts/summary");
37.     query.setMaxResults(HotLinksW_noOfLinks);
38.     query.setStartIndex( 1+Math.round((HotLinks_noOfPosts-1-HotLinksW_noOfLinks)*Math.random()) );
39.     bloggerService.getBlogFeed(query, HotLinksW_handleBlogPostFeed, HotLinksW_handleError);
40. }
41. 
42. function HotLinksW_handleError (error) {
43.   //alert(error);
44. }
45. 
46. function HotLinksW_handleBlogPostFeed(postsFeedRoot) {
47.   var blogTitle = postsFeedRoot.feed.getTitle().getText();
48.     for(i=0 ; i<HotLinksW_noOfLinks ; i++){
49.     var postEntry = postsFeedRoot.feed.getEntries()[i];
50.     var entryUri = postEntry.getSelfLink().getHref();
51.         bloggerService.getBlogPostEntry(entryUri, HotLinksW_handlBlogPost, HotLinksW_handleError);
52.   }
53. }
54. function HotLinksW_handlBlogPost(postRoot) {
55.   var postTitle = postRoot.entry.getTitle().getText(); 
56.     var text=postRoot.entry.getContent().getText();
57.     if((s = text.indexOf("src=\"http://")) != -1 && s < 500 &&
58.      (e = text.substr(s).toLowerCase().indexOf(".jpg\"")) !=-1)
59.     s = "<center><img style=\"height:100px\" src=\""+text.substring(s+5,s+e+4)+"\"/></center>";
60.     else
61.     s=text.substring(0,200); 
62.     HotLinksW_handleDraw(postRoot.entry.getHtmlLink().getHref(), postTitle, s);    
63. }
    Hide line numbers


  • Now call the widget from your html page like below 
     1. <html>
 2. <head>
 3. <body>
 4. <div class="hotlinks_summary" id="container"></div>
 5. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 6. <script type="text/javascript" src="wid_hotlinks.js"></script>
 7. <script>
 8. HotLinksW_setupWidget("4928424574574982882",5,"container", 86);
 9. </script>
10. </body>
11. </html>
    Hide line numbers

    On line 8 substitute your blog id, the '5' is the number of posts to show and the '86' is the total number of posts.
Back to the tutorial trail | Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)