9 Resolved! Issues with the Twitter Updates Gadget (and others) Wednesday, September 23, 2009 /

This issue should now be resolved. I have checked the Twitter Updates gadget (plus others) on various sites, and am now assured everything should be back to normal.

I've been made aware of the issues many Blogger users are experiencing with the Twitter Updates gadget. At present, this is showing "tweets" from the user @undefined and ignores user preferences for the number of tweets to be displayed.

Continue reading »

25 A Popular Posts Gadget from Google Friend Connect Saturday, August 29, 2009 /

While browsing around looking for more Blogger gadgets to add to the directory, I discovered an awesome feature offered by Google Friend Connect: the Recommended (Popular) Posts Gadget.



This is a feature which I'm sure we've all been waiting for! While we have seen various implementations of popular posts gadgets in the past, I've found these are not as useful or easy to configure as I'd prefer.



In contrast, the Friend Connect Recommended Gadget stable, reliable and quickly updates. Being developed and hosted by Google ensures this is unlikely to suffer issues, and once installed it's very easy for your blog readers to recommend their favourite posts.





Want to see how it works? Take a look in the sidebar to see a list of posts recommended by Blogger Buster readers, and scroll down to the bottom of this post for the button you can use to vote (this appears on every page of Blogger Buster, so feel free to recommend any other posts you may like!).



Those of you reading this in a feed reader may like to pop over to the site to see this gadget in action.

How to install your Friend Connect Popular Posts Gadget

Unfortunately, this Friend Connect gadget is not (yet) installable in one click. There are two elements required for complete installation, and these are relatively easy.



Firstly, log into Friend Connect. You will need to use the same credentials (username and password) as you do when logging in to Blogger.



Once you've logged in, you'll see a page which appears similar to this one:

Any blogs which you have created with your Google account will appear in the list on the left-hand side of the page.



Click on the blog you would like to work with (if this is not already selected). This will open a sub-menu beneath the title of your blog.



Click the "Social Gadgets" link in this sub-menu:

On the following page, scroll down to the "Recommendation" widget - this is the gadget we will be using to display our blog's most popular posts, as voted by blog members:

Click through to create and style the Recommendation gadget for your blog.

Style the Recommendation List

In the first area of this page, you can choose how your recommendation list will be styled when added to your Blogger layout.

If you'd prefer any of the color elements (such as the background and border) to be transparent, simply delete the hex value.



You'll be able to preview the changes made to the style and settings of your recommendation list in the top right corner of the page.

Configure the Voting Buttons

The second area of this page enables you to configure the appearance of the voting button. This is what will appear on the post pages of your blog, and is what your readers will click to recommend posts they enjoy.



There are two distinct types of voting buttons you could choose from:

A "compact" button appears like this
A "modular" button appears like this:

For either style of button, you can choose between the heart or tick icons. When choosing the "modular" button, the colours of the text, border and background may also be altered:

Generate and add the JavaScript for your Gadget

Once you've configured the appearance you prefer for the recommendation list and voting button, you can generate the codes required to add these to your template by clicking the button in the third section of the page:

This will generate two different sets of code - one for the recommendation list, and another for the voting button.

Add the code for the Recommendation List

The easiest way to include the Recommendation List (the list of your most popular posts) in your blog is to paste the code into an HTML/JavaScript widget in your Blogger sidebar.



Simply highlight all of the code in the "aggregation gadget" section, and copy to your clipboard. Then go to Layout>Page Elements in your Blogger dashboard, create a new HTML/JavaScript widget in the area of your choice and paste the code from your clipboard into the content section of your gadget.

Add the code for your voting button on post pages

Ideally, we should add the voting button to appear only on item pages. This ensures there is no conflict when posting multiple buttons on the same page (for example, the blog home page which displays more than one post); it also makes for simpler installation.



To add the voting button to our item pages, we need to edit our Blogger template code.



Go to Layout>Edit HTML in your Blogger dashboard, and ensure you have checked the "Expand widget templates" box.



Then using your browser's search function, locate the line which contains <data:post.body/&gt;



This section of code may be wrapped in <div> or <p> tags depending on the template you are using.



Immediately after this line, paste the following section of code:

<b:if cond = 'data:blog.pageType == &quot;item&quot;'>

<!-- Here is where to paste the JavaScript for the button -->

</b:if>

Next, copy the second section of code generated for your Friend Connect Recommendation widget:

And paste this between the &ltb:if cond...> and </b:if> tags which we previously added in the template code.



Here is how the completed installation should appear:

<b:if cond = 'data:blog.pageType == &quot;item&quot;'>

<!-- Include the Google Friend Connect javascript library. -->

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<!-- Define the div tag where the gadget will be inserted. -->

<div id="div-1020104213976883876" style="width:100%;"></div>

<!-- Render the gadget into a div. -->

<script type="text/javascript">

var skin = {};

skin['HEIGHT'] = '21';

skin['BUTTON_STYLE'] = 'compact';

skin['BUTTON_TEXT'] = 'Recommend it!';

skin['BUTTON_ICON'] = 'heart';

google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);

google.friendconnect.container.renderOpenSocialGadget(

 { id: 'div-1020104213976883876',

   url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',

   height: 21,

   site: '06135972569882299778',

   'view-params':{"pageUrl":location.href,"pageTitle":(document.title ? document.title : location.href),"docId":"recommendedPages"}

 },

  skin);

</script>



</b:if>

Once you've pasted the script, preview the changes you have made to ensure the button does not appear on your blog's home page. If all looks well and no errors are reported, continue to save your template and complete the installation.

Using your Recommendation Gadget

At first, your recommendation list will not display any posts. This is because no posts have yet been voted for using the voting button.



You could vote for a few posts yourself by clicking on the voting button on post pages, or you could simply wait for readers to vote by themselves.



When using the voting link, a pop-up page will appear prompting the user to log into Friend Connect (if they are not already logged in) and afterwards will be able to recommend the post. Votes are counted almost immediately, and are listed beneath each item in the Recommendation List:

What do you think?

I sincerely prefer the Friend Connect Recommendation Gadget to other "popular posts" widgets I have tried as the results are based on reder engagement and genuine recommendations which offer a greater sense of community than "page views" alone.



My only reservation is that this gadget cannot be added in a few simple clicks. Having to edit our Blogger templates to add the voting buttons id a dissuading factor for many when considering whether or not to install it.



That said, I have a good feeling that this gadget may soon be integrated into the Blogger system, as so many Friend Connect gadgets and features already have!



What do you think of the Friend Connect Recommendation gadget? Is installation too complex, or are you happy to use this gadget for readers to recommend their favourite posts?



Please let us know your opinions by leaving your comments below.



Image credit: RichKidsUnite, via Flickr Creative Commons

15 Introducing GadgetsForBlogger.com - A Searchable Directory of Gadgets for Blogger Friday, August 28, 2009 /

Since Blogger launched the Gadget directory, I've been keeping track of new submissions and developing several gadgets of my own. While Blogger's directory is searchable, I realised that many bloggers would find descriptive reviews, screenshots, developer details and installation instructions a useful addition to the brief descriptions offered in the directory listings.



So I decided to create Gadgets for Blogger - a searchable directory of gadgets which have been developed specifically for the Blogger platform.







Each gadget listed in this directory features:

• The gadget title


• A full description of the gadget


• Screenshot of the gadget in action


• Details of ads included in the gadget (where applicable)


• Contact/website details of the gadget developer (where possible) 


• Quick install link, to add the gadget to your blog without having to navigate to your Blogger dashboard and through various menus to locate the installation link.

All gadgets listed on Gadgets for Blogger have been tested first, to ensure they display properly when installed in a Blogger blog and also to provide instructions where installation techniques may not be immediately obvious.

Featured Gadgets

The very best gadgets are assigned to the "Featured" category. These gadgets are all of exceptional quality in terms of coding, appearance and usefulness. The most recent additions to this category are highlighted above the main listings in the Featured posts showcase:

You can also find all Featured Gadgets by viewing the Featured gallery.

Submit Your Own Gadgets

If you have developed any gadgets of your own, feel free to fill in this form to submit your gadget for inclusion in the directory once they meet the following requirements:

• Your gadget must have been developed for use with Blogger powered blogs


• The gadget should be tested and working


• Spam and malware gadgets will not be included. If your gadget contains ads, this will be described in the listing page.


• Include the URL where your gadget is hosted. This enables us to create a link for readers to add the gadget directly from this site.
  
  

Here are some useful resources for Blogger gadget developers:

• Blogger Gadget Developer's Guide 


• Google Gadget Developer's Guide 


• Best UI Practises for Blogger Gadgets


• Google Code (for hosting your gadgets and associated scripts)


• Submit your gadgets to Blogger for inclusion in the official directory
  
  

Regular Updates

I'll be updating Gadgets for Blogger on a weekly basis (at least) to include any new submissions to the official Gadget directory in addition to any direct submissions on the site.



Feel free to suggest any gadgets I may have missed and I'll try to get these included as soon as possinle.

See also...

If you're searching for Blogger gadgets and plugins, you should also check out Aneesh's sites:

• Blogger Widgets, which offers tutorials and articles to help install widgets, gadgets and other add-ons in Blogger templates


• Blogger Gadgets - a similar, searchable directory of Gadgets for the Blogger platform.

Your Thoughts?

Do you think Gadgets for Blogger will be a useful resource for the Blogger community? Do you have any suggestions for how it may be improved?



Please feel free to let me know your thoughts about this new project by leaving your comments below.

13 Tagnetic Poetry for Blogger? Tuesday, August 18, 2009 /

Here's something interesting I've been working on lately: a "Tagnetic Poetry" widget/add-on for Blogger.



Based on Roy Tanck's Tagnetic Poetry plugin for Wordpress, this widget can be used to add interesting stylized links for label pages or other interesting posts. It uses Flash to create and display the links and their titles, and chooses a different layout each time the page is reloaded. Try refreshing this page and you'll see how this works.





Here's an example of how this Tagnetic Poetry widget displays linked label tags from this blog:

Tagnetic Poetry by Roy Tanck and Merel Zwart requires Flash Player 9 or better.

Ideally, this widget needs lots of space and short labels/titles to display properly. The script will not display lengthy tags unless there is enough room for them to be rendered properly, so where many tags are displayed, one or two tags may be missing.



So... it's not ideal, and certainly not a useful function for bloggers who require a great many links to be displayed, but you've got to admit it looks pretty good ;)



I understand that many of you would like to install a tag board like this in your template, so I am working on an installable widget/gadget which will enable you to add this to your layout or within a post page.



However, installation is rather difficult. We cannot simply use labels to auto-generate the links because the script requires the tags and links in "escaped" HTML, and I'm unable to replicate. We would also experience the problem of lengthy (or many) tags interfering with the display and unescaped spaces in URLS (which would break the script altogether)... I'm sure this is a lack of experience with JavaScript on my part, and would welcome any ideas to improve this widget!



So in the meantime, I'll work on a tutorial to explain how I add this to Blogger templates and pages. This will be complex, but will enable you to install with a bit of work. And if there are any JavaScript developers who would like to help me work on an installable version - please do get in touch!



Thanks to Roy Tanck, upon whose hard work this Tagnetic Poetry widget is based. Don't forget to check out Blogumus - the Blogger version of his excellent WP-Cumulus plugin, and feel free to leave any comments below.

30 16 Useful Twitter Tools for Blogger Wednesday, August 5, 2009 /

Since it's launch back in 2006, Twitter has become a leading pioneer in the world of social media. Bloggers in particular find this service an invaluable tool for syndication, news stories and community conversation.



For this post, I have rounded up 16 of the most useful tools, tips and free resources to help you get the most out of Twitter through your Blogger powered blog.

Display your Latest Tweets

Visitors to your blog may also enjoy reading your Tweets, particularly if they are of relevance to your blog's niche subject.



Here is a selection of the best tools for displaying Twitter updates in your Blogger layout:

The Official Twitter Badges

Twitter provides an animated "Profile" badge which you can use to display your latest updates as a widget in your blog layout:

You can configure the size, colours and number of updates for your badge in the settings, then grab the code which can be pasted in an HTML/JavaScript widget in your Blogger layout page.



Another alternative is the Twitter "MySpace" gadget, which uses Flash to create a different appearance to the gadget:

We can copy the code generated for this widget and paste into an HTML/JavaScript widget in our blog - it's not limited only to MySpace profiles!

Blogger Widgets and Gadgets

Another way to display your Twitter updates is to install a Blogger widget or gadget in your layout. These can be configured to display as few or many Tweets as you choose, and require only your Twitter username to install:



Simple Twitter Updates Widget

This was the first Twitter application I created for use with Blogger blogs and still remains one of the most popular tools on the site! To install, simply fill out the form and click "Add Widget" to install automatically in your layout.



Twitter Gadget for Blogger (EN)

This gadget works in much the same way as the Twitter Updates widget but is simpler to install and can be reconfigured after installation.



Twitter Updates Gadget (ES)

Daniel Ikeda has made a Spanish translation of my Twitter Gadget for easy installation.

TwitSig - Your Tweets in Pictures

TwitSig is an interesting free service which allows you to display your latest Twitter update as an image. You can add this in your layout as either an HTML/JavaScript widget (using the code generated on the TwitSig homepage) or as an Image gadget using one of the alternative backgrounds.



Here's an example of the default Twitsig badge:





This one uses magnets:





Here's another using a fortune cookie:





Visit TwitSig to generate your own updating Twitter updates image.

Add a "Follow Me" Badge

To encourage your blog readers to follow you on Twitter, try adding a "Follow Me" badge which links to your Twitter profile page.

Here are some useful tools and badges which you can use to add a linked "Follow Me" badge to your Blogger layout:

Twitter Follow Badge by Go2Web"0.com

Here's a new and interesting way to add a non-intrusive "follow me" badge to your site, like this:

The badge can be configured for different colour schemes, height from the top of the page and left/right alignment.

To add the badge to your Blogger blog, visit the TwitterFollowBadge page and fill in the form to your requirements. This will generate some JavaScript code which you should add just before the closing </body> tag in your Blogger template. However, in it's native form this code will not display in Blogger!

Instead, we have two options:

1. Paste the JavaScript into an HTML/JavaScript widget instead


2. Replace <-- and --> in the generated code with &lt;-- and --&gt; (this enables the script to function correctly and display the badge in your page)
   
   

TwitterButtons.com

TwitterButtons offers several pages of free "follow" buttons to help your blog readers follow you on Twitter:

Simply add your Twitter ID in the space provided and TwitterButtons will generate the code to add the button of your choice as a linked badge in your layout. Paste the code into an HTML/JavaScript gadget in your layout (or directly in your template if preferred!) and you're all set.

Twitter Buttons by Vincentabry.com

This site offers 31 different styles of Twitter buttons which you can add to your blog. Although the site is not in English, the Twitter buttons are.



To add these to Blogger easily, use your favourite image in a Picture gadget in the layout, then link this to your Twitter profile:

Add "Tweet This" Links to your Blog Posts

Twitter is an excellent service for syndicating blog posts and useful or interesting articles. Help your blog readers share their favourite posts on Twitter by providing a "Tweet This" link for each of your blog posts.



Here are three different ways you could do this:

Add a simple "Tweet This" link

The simplest of all Twitter syndication links is a text link which uses the URL and title of your blog post:

There are of course many ways in which this link could be styled, and where it could be positioned. For now I'll explain the most basic method of installation.



Go to Layout>Edit HTML in your Blogger dashboard and check the "Expand Widget Templates" box.



Then using your browser search function, locate the following line of code (or similar):

<div class='post-footer'>

Immediately after this line, paste the following section of code:

<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " @YOUR-TWITTER-USERNAME " + data:post.url' title='Tweet it on Twitter'>Tweet This</a>

Be sure to replace "YOUR-TWITTER-USERNAME" with your own username!



Then save your template. This will add a "Tweet This" link in the post-footer section beneath each blog post. Readers can click this link to post a pre-filled template "Tweet" like this:

Image based "Tweet This" Link

If you'd prefer to use a stylish button or larger image link, you can simply replace the text from the previous example with an image tag, like this:

<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " @YOUR-TWITTER-USERNAME " + data:post.url' title='Tweet it on Twitter'><img src="http://image-host.com/your-image-link.jpg" alt="Tweet This" /></a>

Here's a great example of this effect on PSDrecipes:

Using Short URLs in "Tweet This" Links

Many of us use lengthy domain names which take up much of Twitter's 140 character limit for the tweeting of posts. 



A while ago I posted a tutorial explaining how to enable short URLs for "Tweet This" links using Bit.ly. This explains how to add a similar text/button/combination link for each of your Blogger posts which adds a shortnened URL to the Twitter post template instead of the regular, lengthier one.

Enable "Tweetbacks" in your template

Our Blogger templates already support "Backlinks" (known as "Links to this post" in Blogger). However, these backlinks don't display links generated on Twitter which usually include shortened URLs.



Dan Zarella's original "Tweetbacks" script is JavaScript based and can be used in Blogger templates to display tweets about your post. It is very easy to install and requires no customization (unless you wish to style how the tweetbacks are displayed).



To add "Tweetbacks" to your Blogger blog, simply copy the code below and paste this in your template where you would like the Tweetbacks to appear:

<script src="http://danzarrella.com/tb.js"></script>

The simplest installation is to paste this code into an HTML/JavaScript widget in your Blogger layout. This will display Tweetbacks on every page of your blog, and will show the Tweetbacks attributed to each individual page.



Another possibility is to add Tweetbacks beneath the "Links to this post" section of your template, effectively grouping these tweets with backlinks to each individual post.



To achieve this, go to Layout>Edit HTML and check the "Expand widget templates" box. Then search for the following line in your template:

<b:includable id='backlinks' var='post'>

Immediately after this line, paste the following section of code:

<h4>Tweetbacks<h4>

<script src="http://danzarrella.com/tb.js"></script>

This will add Tweetbacks with the appropriate title just above the "Links to this post" section of your layout.

 

Note: you must configure "Backlinks" to "Show" in the Settings>Comments section of your dashboard to enable this method to work.

Add TwitPic Updates to your Sidebar

TwitPic enables us to share images to Twitter, which can be posted by phone, using the TwitPic API or directly from the TwitPic site.



I've developed a gadget which you can use to display your recent TwitPic updates in your Blogger layout which is easy to install and can be configured to your needs:

Use this link to add TwitPic Updates to your Blogger blog.

Add "Real Time" Twitter Updates

Being a fast, virtually instantaneous stream of updates on any given subject, many of us like to keep up with references, news and re-tweets in real-time, rather than having to update or revisit Twitter search at periodic intervals.



Here are two highly useful gadgets for blogger which can be used to display real-time updates in your actual blog layout:

Twitter Search

Developed by 32Hours.com, this gadget offers a stream of updates for a given search term, hash tag or username.



Simply add the gadget to your blog and change the terms for search after installation (your readers can use this too!):

Visit this page on 32Hours.com to learn more about this gadget and install in your Blogger layout.

Juitter Gadget - real time updates with configurable search terms

Based on the excellent Juitter JQuery plugin by Rodrigo Fante, this gadget enables real-time Twitter updates based on the search terms you specify on installation. You can choose to display tweetbacks referencing your Twitter username, a particular search term and even combinations of terms:

This gadget does not contain ads or added links, and can be configured to display exactly as you want.



Click here to add this Juitter gadget to your blog.

Have I missed anything out?

I hope I've provided a good round-up of Twitter tools which you can use to "Twitterize" your Blogger powered blog. If you feel I've missed out any Blogger-enabled tools, please feel free to let me know about these in the comments below.

48 Recent Comments and Recent Posts Gadgets for Blogger Tuesday, July 21, 2009 /

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.

15 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!

33 New Gadgets for Blogger Saturday, July 18, 2009 /

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.

30 A Simple Flickr Photostream Widget for Blogger Tuesday, March 17, 2009 /

After posting about Roy Tanck's animated Flickr widget, I realized that I'd never actually written up a tutorial for the simple Flickr Photostream widget which I use in many of my premium templates.



This version of the Flickr Photostream is a static widget designed to display thumbnails of your most recent Flickr uploads, and can be added quickly to your Blogger layout using a one-click installer. It's an ideal solution of you prefer a simpler method to display your Flickr photos which does not slow down page-loading time. You can see an example of how this widget could appear below:

www.flickr.com

To add this widget to your Blogger blog, you will need to have your Flickr user or group ID which may look something like this: 8191003@N02



The simplest way you get your Flickr ID is to use idGettr (opens in a new window), where you paste the URL of your Flickr Photostream in the box so idGettr can discover your ID for you.



Once you have your Flickr ID you can use the form below to add your own simple Flickr Photostream widget to your Blogger blog:







I hope you enjoy using this widget for your Blogger blogs! Please feel free to leave your comments below.





Image credit: Flickr badge by Poolie via Flickr Creative Commons.

16 Blogumus for your Flickr Photos! Thursday, March 12, 2009 /

Get this widget at roytanck.com

If you enjoyed using Blogumus - the animated flash-based widget to display your blog labels - then I'm sure you'll love Roy Tanck's latest widget creation: an animated, cloud style Flickr widget! You can see an example of this in action on the left which uses my Flickr Photostream.



Roy's widget is very easy to customize and add to your blog. Simply visit the Flickr Widget page and use the form to add your Flickr photostream feed URL, then choose the dimensions and background color for your widget.



Once you're done, press the "Generate code snippet" button to be presented with a preview of your widget and the code. You can then paste this code into an HTML/JavaScript widget in your sidebar, or even directly into a blog post (as I have done here).



Roy Tanck created the original WP-Cumulus widget upon which my Blogumus widget is based. He has done a fantastic job in creating this widget. It uses a much smaller file size than the Blogumus/WP-Cumulus widget and doesn't hog nearly as much of your computer memory!



I hope you enjoy using this widget to enhance your own Blogger powered blogs! Let us know what you think about Roy's Flickr widget by leaving your comments below.

7 A Simple Snow Effect Widget for Blogger Blogs! Wednesday, December 3, 2008 /

Here is a simple snow effect widget which you can add to your Blogger powered blog in just one click! This widget does not use images to generate the snow effect: instead it uses plain white text (full stops and apostrophes) to act as snowflakes which trickle down the page. You can see this widget in effect here on Blogger Buster over the holiday period.



Click the button below to add this widget to your Blogger powered blog:

This widget was created using the Snow Effect Without Images script by Kurt Grigg which is distributed by Dynamic Drive.



This widget has been tested in both IE and Firefox and also in complex Blogger templates which use many other JavaScripts. Unlike other snow effect scripts, this simple non-image based widget works just fine!



I hope you enjoy using this festive decorative widget in your Blogger blogs! Please let me know your opinions or if you experience any trouble installing this widget by leaving your comments below.

4 How to create an "Admin Control Panel" in your layout Monday, September 22, 2008 /

For those of us who hide the Blogger nav-bar, it can be awkward to access our Blogger dashboards to create a new post, change settings or customize the layout of our blogs.



So after a bit of brainstorming, I realized how we could add an "Admin control panel" to our Blogger template, which is only visible to the administrators of a blog (and not to regular readers).



You can read my method and instructions in full over at BloggingTips.com, where I write regular posts about Blogger and blog design. I hope this article will be useful for many of you! Please let me know your opinions about this post by leaving a comment here or at Blogging Tips where you can read through the archives of Blogger tutorials and enjoy loads of other tips about blogging.

41 Alternative installation for Blogumus (fixes the blank widget problem) Wednesday, September 17, 2008 /

Blogumus is an animated tag cloud widget for Blogger powered blogs, which has proven to be the most popular widget ever published on this site.



Most bloggers have been able to install this flash-based widget successfully using the default installation instructions. However, for those using long label names or who have many JavaScript/Flash based widgets present in their blog layout, there seems to be a "blank widget" issue where Blogumus is present but will not display the animated tags.



Thanks to some helpful insights from Roy Tanck (the original author of Cumulus on which this widget is based), I've been able to construct an alternative method for installation which embeds Blogumus as a flash object rather than relying on JavaScript.



If you have experienced problems in displaying Blogumus in your Blogger template, this alternative method for installation should enable Blogumus to display correctly for you.

How to install Blogumus using this alternative method

This method of installation is very similar to the original one.



Firstly, go to Layout>Edit HTML in your Blogger dashboard. Do not check the "Expand widget templates" box as this would complicate the process!



Using your browser's search function, find this line in your template code:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Immediately after this line, paste the following section of code:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

  <b:if cond='data:title'>

    <h2><data:title/></h2>

  </b:if>

  <div class='widget-content'>



    &lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;

        &lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;

        &lt;param name="bgcolor" value="#ffffff" /&gt;

        &lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

      <b:loop values='data:labels' var='label'>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>

</b:loop>

&lt;/tags&gt;" /&gt;

        &lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;

    &lt;/object&gt;





  </div>



  <b:include name='quickedit'/>

</b:includable>

</b:widget>

Now preview your template. If the installation is successful, you should see the Blogumus widget appear in your sidebar. You can then proceed to save your template.



This version of Blogumus should display all of your labels without issue, and can be moved to other sections of your layout through the Layout>Page Elements screen.

Customizing this alternative Blogumus installation

As with the original widget, it is possible to customize some aspects of Blogumus to better match the style of your blog.



By default, this installation uses the following values:

• The width is 250px


• The height is 200px


• Background color is white


• Text color is black


• Font size is 12

All of these options can be changed by editing the code used to display this widget. Here is how you could customize these options:

Change height and width

Both of these options can be configured in the following line:

&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;

Change these dimensions (in pixels) to a more appropriate size for your sidebar or widget section. Note: it is better for the tag cloud to be wider than it is tall (landscape proportions) which enables proper display of the tags.

Change background color

To change the background color, alter the hex value found in this line:

&lt;param name="bgcolor" value="#ffffff" /&gt;

By default, this is set to white, but you can alter this to any value you prefer.

Change the color of text

The tag-links are black by default, though you can change this within the following line using the tcolor value:

&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

This six character tag is actually a hex value without the preceeding # symbol. You can alter this to be any hex color code you prefer.

To alter the size of tags/links

In the following line of code, the size of the tag links is "12" (proportionate to the size of the widget). You can change this value to a smaller or larger number depending on whether you prefer the links to appear smaller or larger in your widget.

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'>

For example, if you prefer smaller links, change this value to "10" (or even smaller). You can always preview the changes before saving to ensure the links appear in the style and size you prefer.

I hope this alternative method works for you!

After much testing and modifications, I feel assured that these new installation instructions for Blogumus should work for any Blogger "layouts" template, regardless of the length of label names, other scripts present in the widget, and so on.



As far as I can tell, no labels should be "missing" from the cloud (an issue reported by many in the previous thread, for which we cannot discover the problem!).



If you do experience issues with this alternative method, please do let me know.



Special thanks to Roy Tanck for his help with the "object embed" solution on which these instructions are based :)

2 Using Blogger's New Followers Feature Tuesday, September 9, 2008 /

As many of you may have read on Blogger Buzz, Blogger has introduced a great new feature: "Followers".

This new feature allows you to:

• Show that you are a fan of your favorite Blogger blogs


• Follow a blog publicly or anonymously
  
  


• See fans of your own blog (and the number of followers you have) from your blog dashboard


• Display a list of your followers in a new "followers" widget


• Read your favorite blogs (even those not hosted on Blogger) from the reading list in your dashboard.


• Import your reading list from Google Reader


• Read posts from the blogs you are following in a special "Blogs I'm Following" folder in Google Reader
  
  

At present, this feature is not available to all Blogger users, though it is being rolled out for everyone to use over the next few weeks.







For those of you who are (like me) impatient to try out this new feature, you can enable this automatically by following a blog (use this link to follow Blogger Buster, for example). Once you have followed even one blog, your dashboard will be updated to show the number of followers, your personal reading list, and the ability to add a "followers" widget to your layout. Thanks to Ionut of Google Operating System for the tip to enable this new feature :)

Add new subscriptions to your reading list

Once your blog dashboard has been updated for the new "followers/reading list" feature, you can easily add new subscriptions to read in your Blogger dashboard.

Adding a new subscription is easy. Simply click on the "Add" button near the bottom of your reading list, where you will be presented with a screen like this:

You can add a new blog by simply typing the URL (eg: http://www.blogsite.com). This does not need to be a Blogger powered blog, nor do you need to know the URL of the blog's feed.



On the next screen, you can choose to follow this blog publicly or anonymously. Choosing to follow publicly means that your friendship with this blog is made public. Those using Blogger can see a list of their public followers, and readers of these blogs can also access follower details if a Followers widget has been added to the blog. In the future, non-Blogger sites will have access to similar widgets to display their public followers.



Choosing to follow anonymously is similar to subscribing to a blog feed in the normal manner: you would be counted among the list of followers, though your details and affiliation would be hidden.



Alternatively, you can choose to import your subscriptions from Google Reader by checking the "Import from Google Reader" option. On the next page, you can see a list of all the subscriptions in your Google Reader account, then check the ones you would like to import. It can take a few minutes to import all of your subscriptions of you have many listed in your reader, so you may need to be patient!

Managing your subscriptions

If you decide not to follow a blog you can easily edit or remove blogs in your reading list by clicking the "Manage" button.



This will generate a page listing all of your subscriptions with options on the right to delete this from your reading list and to toggle between "Public" and "Anonymous" following. You can also add new subscriptions near the bottom of this page.

Building a social network with Blogger...

In time, the "Followers" feature will also be integrated with FriendConnect which is built on Google's Social Graph API.Rather than being a social network in its own right, FriendConnect will link with other social networks and allow you to integrate your blog completely with your online social activities.



I must admit that my research on this subject is sparse, though you can read more about the possibilities for FriendConnect on Google Operating System, the FriendConnect homepage and the OpenSocial pages.

Learn more about the "Followers" feature

The Blogger Help Section has been updated with information to help you make the most of the new Followers feature. Here are links to the most useful pages which should help you get up and running:

• What is Following? 


• How do I add the Followers gadget to my blog 


• How do I use the Blogger reading list?


• Follow a blog publicly or anonymously
  
  

What do you think of the "Followers" feature so far?

I'd love to know your thoughts about the new Followers feature, so please feel free to leave your comments and opinions below.

266 Blogumus: a flash animated label cloud for Blogger! Thursday, August 28, 2008 /

"Blogumus" is an Flash based tag cloud widget which uses scripts converted from Roy Tanck's WP Cumulus plugin for Wordpress. I fell in love with Roy's original Cumulus plugin when I saw it, and simply had to learn how to convert this for use in Blogger powered blogs. The result is the widget you can see in action at the top of this post. Hover your mouse over the Flash object to see the animation begin.

In this post, I'll explain how you can add Blogumus to your own Blogger layout with ease!

Update: Improved Widget Code

I have updated the code required to run this widget to activate links in the tag cloud Flash movie. If you have already installed Blogumus, please replace your widget code with the new updated code, or reference the additional lines to modify your existing installation.

How it works

This widget uses a combination of JavaScript and Flash animation to parse and display your blog labels. Once installed in your template, it should work "out of the box" without any additional tweaking required, though of course you may prefer to change the variables for color, background and size if appropriate :)

You should also be able to move the Label Cloud widget through the Page Elements page of your dashboard if you prefer display in a different layout location.

To see Blogumus in action, both Flash and Javascript must be installed and enabled for your internet browser. However, it does degrade relatively gracefully, and label links will still be clickable (though not animated) for those who do not use JavaScript of Flash (including search engine spiders).

How to install Blogumus in your Blogger layout

Installing Blogumus in your Blogger layout is surprisingly simple! You should only need to copy and paste a section of code to your Blogger template, though any tweaks for the style of display will require some manual editing.

Here are the steps required to install Blogumus in your Blogger layout:

Go to Layout>Edit HTML in your Blogger dashboard, and search for the following line (or similar):

<b:section class='sidebar' id='sidebar' preferred='yes'>

Immediatly after this line, paste the following section of code:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>

<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>

<script type='text/javascript'>

var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);

// uncomment next line to enable transparency

//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);

so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);

so.addVariable(&quot;mode&quot;, &quot;tags&quot;);

so.addVariable(&quot;distr&quot;, &quot;true&quot;);

so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);

so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);

so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);

so.write(&quot;flashcontent&quot;);

</script>


<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Then preview your template. If installed correctly, you should see the tag cloud appear in your sidebar. Then you are free to save your template, edit the colors and dimensions as required, or move it to a different location.

That's all!

Customizing Blogumus

In this default installation, Blogumus includes the following preset variables:

• Width is set to 240px


• Height is set to 300px;


• Background color is white


• Test color is grey


• Font size is "12"

If you would prefer to make your widget wider, shorter, change the color scheme, etc, you will need to do this by editing various parts of the code. I'll go through these options in the order they appear in the widget code.

Editing width and height

The variables for width and height are found in this line of the script:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

The width (currently 240) is highlighted in red, while the height (300px default) is highlighted in blue. These numerical values specify the width and height in pixels, so you can alter these of you prefer.


Editing background color

You can change the background color from white to any other color by altering the hex value in the same line:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

For example, if you prefer a bright red background, you may replace #ffffff with #ff0000. Take a look at this page for a list of commonly used hex color codes.

Alter the color of text

By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line:

so.addVariable("tcolor", "0x333333");

Be aware that "tcolor" is a Flash variable and doesn't include the usual hash symbol of hex color codes. Be sure to only replace the numbers!

Adjust the font size

The maximum font size of tags is specified in this line:

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

You can alter this to ensure tags are displayed in a bigger or smaller font if you prefer by changing "12" to a larger or smaller number.

While making any of these changes, you should be able to preview your widget and be certain that your new choice of color, dimensions and background are suitable for your needs.

Credits, support and requirements

Blogumus is based on the original WP Cumulus plugin by Roy Tanck, and was converted for use with Blogger layouts by myself.

Please leave the credit links in the widget code intact. These will not be seen by the majority of your blog readers (as they will only display if JavaScript and Flash is not activated) but leaving these links intact is a great way of passing some link love on to Roy for all his hard work, and to inform other Blogger users that they can find the widget codes on this site.

Support/Issues

If you have any problems installing or using this widget, please leave your comments below or direct these to the Blogger Buster forums as Roy will be unable to provide support for installation in Blogger blogs!

Requirements

For Blogumus to display properly in your template, you will need to have Flash Player 7 or higher. You can download the latest Flash Player plugin for your browser from Adobe.

I'm not sure that this installation will support special characters as tags (only Latin characters supported at present). If you do experiecce issues with labels displaying incorrectly, please let me know. I'll try to add more support, but have very little experience using Flash!

Your thoughts?

I hope that you enjoy using Blogumus in your own Blogger blogs! Please feel free to share or syndicate this page with your favorite bookmarking service if you think it is worth a mention, or subscribe to the newsfeed to learn of more great Blogger tutorials as they are posted.