Thursday, 23 July 2009

Related Posts with Thumbnails using LinkWithin

Displaying links to "related posts" beneath individual entries on our blogs is a tried and trusted method of providing useful and interesting reading material for our readers.



I've written about several different methods which Blogger users can choose to display related posts - all of which perform their function well enough. But after seeing several of my favourite sites displaying links to related items with thumbnails using LinkWithin's free service, I was intrigued to discover how well this may be adapted for use with Blogger.



About LinkWithin

LinkWithin is a free service offered by a small team based in New York. This free service enables us to display related posts with thumbnails below our blog posts (the thumbnail is taken from an image within the post it links to).

We retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them.
The posts chosen to appear as related posts are based on several factors including:

  • Relevance

  • Popularity

  • Recency

At present, LinkWithin is not ad-supported and is completely free to use.  As explained on the FAQ page:

We plan to introduce revenue-sharing features in the future, but they will be optional.
At present, there is little documentation for us to be certain of these factors, though after testing LinkWithin in a few different sites, I'm pretty impressed by the choices generated for each post!



Here is an example of how LinkWithin functions for WeLoveBlogger.com:





Why LinkWithin may be a more ideal solution than other related posts solutions for Blogger

The "related posts" solutions for Blogger which I've used until now have all relied on label feeds. That is, the recent posts generated by such scripts collect recent posts from the same label (category). This often means that posts deeper within our archives are generally ignored, even when they may be far more relevant than the more recent posts displayed.



LinkWithin parses all posts from our blogs, and chooses the posts to be displayed using more complex and relevant factors. This ensures far greater relevancy which is better for our readers and also ensures that older posts are included in the display.

How to add LinkWithin Related Posts to Your Blogger Blog

If you're using a standard, uncustomized Blogger template, the method for installing LinkWithin is fairly straightforward. Simply visit the LinkWithin website, fill in the form on the right-hand side (choosing Blogger as your platform) and follow the instructions provided.



This will install the related posts in your template as a gadget beneath the main posts section, though you'll find the "You may like these related stories" section will be displayed beneath each of your blog posts (before the post-footer section). It will also display on each and every page of your blog, including the main, archive and search pages.

Custom Installation of LinkWithin for Blogger templates

If you prefer to display your related posts only on item pages or have a customized, non-standard Blogger template, here is how you can install LinkWithin:

  1. Visit the LinkWithin website and fill in the form on the right-hand side. For the "platform" be sure to choose "Other":








  2. On the next page, you will find a script like this is generated. From this code, you need to write down your unique "site ID" for later use (or copy this to your favourite text editor):








  3. Once you have a note of your Site ID, go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "Expand widget templates" box.

  4. Using your browser's search function, locate this tag (or similar) in your Blogger template code: <div class='post-footer'>



    Depending on the template you are using, this tag may vary slightly though you should usually be able to locate 'post-footer' in your template code.

  5. Immediately before this line, paste the following section of code, replacing "YOUR_SITE_ID" with the ID number you have noted down for your site:



    <b:if cond='data:blog.pageType == "item"'>

    <script>

    var linkwithin_site_id = YOUR_SITE_ID;

    (function () {

    var elem = document.createElement('script');

    elem.type = 'text/javascript';

    elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();

    document.getElementsByTagName('head')[0].appendChild(elem);

    })();

    </script>

    <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Blog Widget by LinkWithin" style="border: 0" /></a>

    </b:if>

  6. Preview the changes you have made before saving your template. The LinkWithin gadget should not display in the preview; furthermore, if there are any errors in the installation you will be able to see before attempting to save.

  7. If all is well, save your template and visit an item page in your blog: you should be able to see related posts showing up beneath your blog posts.

Support for LinkWithin's related posts

While I can help with installation for LinkWithin in Blogger templates, I'm not able to help with specific problems with the script.



Luckily, the LinkWithin team offer a good support service via email:

If your blog uses a non-standard custom template/theme, we will need to add support for your blog manually, and we can do this only if the widget remains installed on your blog. Please email us at support AT linkwithin DOT com, and we will fix the problem, usually within 1-2 days. Thank you for your patience!
At the moment, it appears we can only display three related posts. Hopefully LinkWithin will offer the option to display more (or less) items in a future version of the script.



Why I'm not using LinkWithin yet...

LinkWithin is a very useful solution for Blogger users wishing to display links to related posts in their blog. I recommend this service and will be using this in a future release of Blogger Buster.



My current template is highly complex and has served me well for many months. However, there are several new (and upcoming) customizations and new features for Blogger which may not work so well in this design. I'll explain more about this in a future post when the site changes are closer to completion.





Are you using LinkWithin? What do you think about this service?

If you're already using LinkWithin (or plan to use this soon), please let us know your opinions of this free service, and how well you think this adapts to displaying posts in your blog by leaving your comments below.



Tuesday, 21 July 2009

Recent Comments and Recent Posts Gadgets for Blogger

Since Blogger updated the API for gadgets, I've been hard at work creating new and useful gadgets for Blogger users.



My first two successful gadgets made use of the google.blog function in order to retrieve and parse post and comment feeds for the blog in which they are installed. These gadgets are now available for installation through the Blogger gadget directory and have even been featured on Blogger's official Featured Gadgets blog!







These Recent Posts and Recent Comments are very easy to install: simply follow the links for the gadget you would like to add, and choose how many posts/comments you would like to display:





When you press "Update" you will be presented with an example of how the gadget will appear in your blog, and can then proceed to save your gadget.





Recent posts with thumbnails

Aneesh from Blogger Plugins has created a wonderful "Recent posts with thumbnails" widget which displays the media:thumbnail for each post.



This is a wonderful and very user-friendly gadget which even includes details of comments! Install the Recent Posts with Thumbnails gadget by following this link.





Known Bugs

As the API is still rather new, there are a few minor bugs with my gadgets. These are the issues I'm currently aware of, which will be updated with new information once it's available:



Need to press "Update" to ensure preferences are configured

This is an issue with all gadgets which should be resolved quite soon.



Some gadgets don't display in Chrome


Several people have emailed me about this, and to be honest I don't know why this is happening. I'm pretty certain the Blogger team are aware of this issue and hope for a fix soon.



Gadgets may "spill over" in customized templates

The width of gadgets is determined by the width of the sidebar, and sometimes ignores any padding/margins applied to the "widget content" section. I've tried many ways to fix this, but so far my only solution would be to apply margins within the gadget, making it narrower (and unsightly) for those who use regular templates.





Any bugs/other issues?

Please let me know if you have any other problems with my gadgets by leaving your comments below.

Recent Posts with Thumbnails Widget by Engadgeteer

Tony from Engadgeteer has sent news of a great new widget developed for Blogger users: a recent posts widget which includes thumbnails from your posts.



Here is a preview of how the gadget would appear in your blog (based on recent posts from Blogger Buster):











The gadget is very easy to install in your blog: simply visit the widget generator page and edit the settings as required. You can preview your feed and then add it to your blog sidebar using the "Add to Blogger" button on the top right of the page.



Thanks Tony for letting me know about this widget!

Saturday, 18 July 2009

New Gadgets for Blogger

Over the past few weeks, I've been working with Bloggers improved API for Gadgets and have now completed work on several useful gadgets which can be installed with just a few clicks.



I've found that the Gadget API offers a much better interface to the end-user than HTML/Javascript widgets (although it takes me far longer to create Gadgets than widgets!). While they are a little more difficult to create, I think the end-product is worth the effort:

  • Gadgets can be added from within the Blogger dashboard (so we don't need to use search engines, or visit the owner's site to install).

  • Gadgets are easily customized, and can be easily reconfigured after installation

  • The new API includes the ability to include Blogger post and comment feeds for the blog in which they are installed.

  • Developers can ensure gadgets blend with the theme in which they are installed using "Skins" parameters.



How to install Gadgets in your Blogger blog

Gadgets are as easy to install as Blogger's default widgets. Simply go to Layout>Page Elements in your Blogger dashboard and click the "Add a Gadget" link in the area where you want to install your gadget.



A pop-up screen like this will appear:



From here, you can browse gadgets in the directory, search for gadgets of interest, or add a gadget using the URL where it is hosted.



Once you have chosen a gadget to add, you should be presented with a configuration screen like this:



There will be different options here, depending on the gadget you have chosen to install. This example shows the configuration options for my Twitter Updates gadget.



At the very least, you should be able to alter the title of the gadget, however most gadgets have other configuration options available. A preview of how the gadget will look in your blog will appear below these options (do bear in mind that the width of the gadget may be wider when displayed in your blog if the area in which it is added has larger dimensions than the preview screen).



Once you've changed any settings, be sure to click the "Update" link in order to see the changes appear before you save. The gadget will then appear in your blog, and it's position can be changed in the Page Elements section of your dashboard.





Blogger's Featured Gadgets

The Blogger team have created The Featured Gadgets blog which details gadgets of particular interest. Some of these gadgets are also included in the Featured Gadgets section of the Gadget directory (available when you choose to add a new gadget through your dashboard).



I'm thrilled to find four of my own gadgets are "featured": Recent Posts, Recent Comments, Picasa Photostream and Twitter Updates, and look forward to seeing the efforts of other Blogger developers in the future.





Developing Blogger Gadgets

The Blogger team have created extensive documentation for those hoping to develop gadgets for use with Blogger in addition to the extensive resources for creating Google gadgets.



I've also begun a three-part series for creating Blogger gadgets over at Blogging Tips to explain the basics including how to utilize Blogger feeds in our gadgets, use skinning parameters and user preferences for customizable gadget utilities.



Once you've created a Blogger gadget, you can add it to the Blogger Gadget directory using this link. Your gadget should appear in the public directory within about 30 minutes of successful submission and the best gadgets will be featured in the Featured Gadgets blog.





Gadgets I'm working on now

In addition to the four gadgets mentioned above, I have a further three gadgets which are almost ready for public release: a Flickr Photostream Gadget (install with your Flickr username, not the URL of your feed); a TwitPic gadget (to display your recent TwitPic updates) and a Juitter gadget, for real-time updates which mention your username or other search terms.



Over the next few days, I'll update with posts for all my gadgets with full details of functions and installation so you can add and enjoy these gadgets in your Blogger powered blogs.





Your thoughts?

I hope you will enjoy using Blogger gadgets which use this improved API and look forward to seeing gadgets which other developers create.



If you've created a gadget for Blogger or if there's a particular gadget you'd like me to create, please let me know by leaving your comments below.

Thursday, 2 July 2009

Housekeeping - Updates, Issues and Forthcoming Features

I realize my posts have been rather scarce lately, mostly because I've been so busy with work and other commitments which have left me so little time to write posts for this blog.



So let me explain what's happening with Blogger Buster at the moment, along with a few hints about what you can expect in the forthcoming weeks.







Problems with my file hosts

Many of you have reported problems downloading templates and other files which are hosted on http://bloggerbuster.com.



This is because my hosting service has been completely overpowered by the sheer number of requests for files and has been temporarily suspended. I need to transfer all of my files over to a new (enhanced) hosting account which can cope with this level of bandwidth, but I'm afraid it's taking a little longer than expected due to some issues I'm having with FTP.



I may well need to move all these files to a completely different location, and if so, I will of course update with the new URLs you'll need to download these files. My main concern is to find a reliable file host for all our file-hosting needs, and which won't impact too much on the running of this site. Please bear with me while I make new arrangements for these files.





What I'm working on now

There have been several developments for Blogger (and perhaps more planned for coming months), so as you may imagine I've been working on these developments to create useful resources and tutorials for you all.



In particular, I've been learning a lot about the Gadget API for Blogger. This enables us to create interesting, useful and interactive gadgets for Blogger using a system which (I feel) is a great improvement to using widget installers.



I've created a few Gadgets for Blogger now which I'll post about over the coming days (though you may already be able to find some if you search for "Blogger Buster" when adding a gadget to your layout).



Update #1

I've just managed to get a new laptop, and have spent the past few days transferring over my files and settings. Finally, all is fixed so I'll have a new post (or two) up this weekend :)

Blogger is still looking for web designers and artists!

A couple of weeks ago, the Blogger team tweeted a request for web designers and artists who are interested in designing templates for Blogger.com.



If you're a web/blog designer or artist, this is something you may well want to check out. You can find out more and register your interest in participating on this page.





Requests for tutorials and gadgets

If you have any particular requests for tutorials or Blogger gadgets, please let me know about these by leaving your suggestions in the comments.



While I can't promise to fulfil every request, I'll try to do the most popular ones over the coming weeks.



There's so much happening at the moment and many more updates in progress which I really look forward to showing you in the future.





Thank you all for visiting, subscribing and sticking around!