I promised Hong Yi’s mum that I would write a social bookmarking widget for her blog on Google’s Blogger so I’ve spent part of my valentine’s day writing this widget for her.
The purpose of utilising social bookmarking widgets is to allow you to expand your reach of readership to literally hundred and thousands to millions of readers on these social bookmarking websites. Therefore, you are not limited to your normal direct traffic, existing referrals traffic and organic traffic but if I may use a SEO term, using ‘link baiting’ to bait readers in an ocean of readers to your website in the hopes of driving traffic, increasing visibility and branding, and ultimately getting links to your website.
One of the most important SEO aspects is link building or in other words, to increase the amount of links to your website. It creates authority, trust and relevancy to your website, thus improving your organic rankings on the search engine results page (SERP). You can also read my post on how to optimise your page.
Of course it is important to remember that before you submit your own articles, make sure that you write well, have a very attractive and optimised title, and a great first paragraph. In addition, write about what people would love to read about, things that are useful, relevant and informative to them. Never submit articles that are too “salesy” in nature and obviously useless information to the general public (i.e. how you’re emo-ing about the rainy weather).
Include pictures, videos and space out your paragraphs. Nothing is more frustrating than seeing a screen full of words bunched up together.
Social Bookmarking Widget
I’ve only created this widget to include some of my favourite social bookmarking websites. Feel free to modify the code and stylesheet to your preference.
Here’s a screenshot of what the widget should look like once implemented (highlighted in yellow). You can visit my old blog to see how it looks like (make sure you turn off javascript or else you’ll be redirected back here).
Before you do anything to the Blogger template, please make sure you that save a backup before making any changes!
Here’s the stylesheet you will need (you will need to modify the image URLs to point to where you’ve uploaded the images – I’d recommend the 16×16 size to upload). Simple paste this code between your <head> tags in your Blogger template.
/**
* Written by Danny Ng (http://www.dannytalk.com/2009/02/14/blogger-social-bookmarking-link-baiting)
* Free to use and distribute but must keep this comment in place.
*
* Social Bookmark Stylesheet
*/
ul.social {
margin-left:10px;
padding:0;
list-style: none;
list-style-type: none;
}
ul.social li a {
padding-left: 10px;
}
ul.social li.delicious {
display: inline;
background:transparent url(REPLACE THIS WITH YOUR DELICIOUS IMAGE LOCATION) no-repeat scroll 0pt;
}
ul.social li.digg {
display: inline;
background:transparent url(REPLACE THIS WITH YOUR DIGG IMAGE LOCATION) no-repeat scroll 0pt;
}
ul.social li.facebook {
display: inline;
background:transparent url(REPLACE THIS WITH YOUR FACEBOOK IMAGE LOCATION) no-repeat scroll 0pt;
}
ul.social li.reddit {
display: inline;
background:transparent url(REPLACE THIS WITH YOUR REDDIT IMAGE LOCATION) no-repeat scroll 0pt;
}
ul.social li.stumbleupon {
display: inline;
background:transparent url(REPLACE THIS WITH YOUR STUMBLEUPON IMAGE LOCATION) no-repeat scroll 0pt;
}
Here’s the code you will need to copy & paste into your Blogger template.
<!--
Written by Danny Ng (http://www.dannytalk.com/2009/02/14/blogger-social-bookmarking-link-baiting)
Free to use and distribute but must keep this comment in place.
Social Bookmark HTML
-->
<ul class="social">
<li class='delicious'><a alt='Add to del.icio.us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add to del.icio.us'>Del.icio.us</a></li>
<li class='digg'><a alt='DiggIt!' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='DiggIt!'>Digg</a></li>
<li class='facebook'><a alt='Post this story to Facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank' title='Post this story to Facebook'>Facebook</a></li>
<li class='reddit'><a alt='Post this story to reddit' expr:href='"http://www.reddit.com/submit?url=" + data:post.url' title='Post this story to reddit'>reddit</a></li>
<li class='stumbleupon'><a alt='Stumble this story' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url' title='Stumble this story'>Stumbleupon</a></li>
</ul>
Go to your Blogger’s template section, then click on ‘Edit HTML’. Make sure you check ‘Expand Widget Templates’ and in your edit area, search for ‘post-footer-line post-footer-line-3′.
You will see that I’ve pasted the code between the paragraph tags (highlighted in yellow). Click ‘Save Template’. Viola and you’re done!
Note: You may have to tweak around with the stylesheet depending on whether your existing stylesheet conflicts with the one I’ve provided.
Also please let me know if you find any bugs and hopefully I’ll get time to fix them.
If this has helped you in any way, please feel free to link back to this post and spread the word around :)
