Tag Archives: buttons

Creating Social Badge Widgets for a Hosted WordPress.com Blog

I was recently asked about my small collection of social badges on the top of my blog in the sidebar. These are created by the excellent WordPress plugin SocialGrid:

socialgrid

The question related to how to get a similar grid for blogs which are hosted on WordPress.com like the ‘Training Blog’ you are reading. Although essentially the same software, as I host my own WordPress blog, I can add plugins like SocialGrid but on a WordPress.com hosted blog you can not install plugins. You only have the options of the widgets available. You can add your own code to a widget via the basic but very flexible ‘Text Widget’ although it will not allow javascript which many of the social sites use to create collections of badges. However it does allow you to write your own HTML code (the language of web pages) so I thought I would have a go at recreating my SocialGrid style badges in a HTML table for WordPress.com even using the same great social media icons which are freely available (feel free to leave them a donation).

I have a few WordPress.com sites but used this one I set up for some WordPress.com training courses put on by OutserveWeb the web training company I work for. The end result looked like this and I have put the code below if it helps anyone.

wpsocialbadgers

Change the links and the image urls of course and copy the code into the text widget and drag to your sidebar, images can be uploaded directly through the Media options in your WordPress.com blog. It should be relatively easy to change the grid from 2 x 4 or use other or different size icons.

HTML code:

<table> 
<tbody> 
<tr> 
<td><a href="http://twitter.com/outserveweb"> 
<img class="aligncenter size-full" title="twitter" src="https://outtraining.files.wordpress.com/2011/01/twitter_32.png" alt="twitter" width="32" height="32" /></a></td> 
<td><a href="http://facebook.com/outserveweb">
<img class="aligncenter size-full" title="facebook" src="https://outtraining.files.wordpress.com/2011/01/facebook_32.png" alt="" width="32" height="32" /></a></td> 
<td><a href="http://www.linkedin.com/company/outserve-limited">
<img class="aligncenter size-full" title="linkedin" src="https://outtraining.files.wordpress.com/2011/01/linkedin_32.png" alt="linkedin icon" width="32" height="32" /></a></td> 
<td><a href="http://www.youtube.com/user/outserveweb">
<img class="aligncenter size-full" title="Youtube icon" src="https://outtraining.files.wordpress.com/2011/01/youtube_32.png" alt="Youtube" width="32" height="32" /></a></td> 
</tr> 
<tr> 
<td><a href="http://www.delicious.com/philoakley">
<img class="alignnone size-full" title="delicious" src="https://outtraining.files.wordpress.com/2011/01/delicious_32.png" alt="delicious" width="32" height="32" /></a></td> 
<td><a href="http://www.flickr.com/photos/oakleyfamily">
<img class="alignnone size-full" title="flickr" src="https://outtraining.files.wordpress.com/2011/01/flickr_32.png" alt="flickr" width="32" height="32" /></a></td> 
<td><a href="http://www.google.com/profiles/philip.oakley">
<img src="https://outtraining.files.wordpress.com/2011/01/google_32.png" alt="google icon" title="google icon" width="32" height="32" class="size-full" /></a></td> 
<td><a href="https://outtraining.wordpress.com">
<img class="alignnone size-full" title="friend" src="https://outtraining.files.wordpress.com/2011/01/rss_32.png" alt="rss icon" width="32" height="32" /></a></td> 
</tr> 
</tbody> 
</table>

BTW if you want to show code in your blog post as above on WordPress.com you will need to use the sourcecode tags otherwise it with be see as HTML and translated by the Web Browser