Social Bookmarking icons do play some vital role on the popularity of our blog but too much of them can really make the impression bad. You should have noticed that here @ greenTechspot we have configured the social bookmark icons like Twitter, [Twit-this], Digg, Technorati, StumbleUpon, Del.icio.us, Reddit, Furl, Yahoo etc to appear only on individual post pages [Also know as Item pages] and not on the Main or Index page. The profit of this hack is if your main page contains more than one post [Like we have set 4 posts on the main page] then loading of Social Bookmark icons for each of them can drastically slow down the page load time of your blog. So its better to show them up only on inner pages containing individual posts. Read below to learn the hack. This method will add all Social Bookmark icons and also Digg and Tweet this [from tweetmeme] to your Blogspot blog at once…
Main Coding Part:
- Goto Blogger Dashboard ► Layout ► Edit HTML ► and tick the Expand Widget Templates.
- Now search for <data:post.body/> . Depending on your Template it can also be <p><data:post.body/></p>. Figure it out and at the end of this add the following piece of codes.
<p><data:post.body/></p>
<!– Start of social bookmarks. Check http://greentechspot.blogspot.com for updates –>
<b:if cond=’data:blog.pageType == "item"’>
<p style=’text-align: center;’><a class=’linkopacity’ href=’http://feeds2.feedburner.com/greentechspot‘ target=’_blank’><img alt=’Enjoyed Reading! Subscribe to our feeds to get more’ src=’[FEED] IMAGE URL‘/></a></p>
<table border=’0′ cellpadding=’0′ cellspacing=’0′ style=’width: 100%;’>
<tbody>
<tr>
<td style=’text-align: left; vertical-align: bottom;’>
<script type=’text/javascript’>
digg_url="<data:post.url/>";
</script>
<script src=’http://digg.com/tools/diggthis.js’ type=’text/javascript’/>
</td>
<td style=’text-align: center; vertical-align: bottom;’>
<a expr:href=’"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’><img alt=’Digg’ src=’[DIGG] IMAGE URL‘/></a>
<a expr:href=’"http://technorati.com/faves?add=" + data:post.url’ target=’_blank’><img alt=’Technorati’ src=’[TECHNORATI] IMAGE URL‘/></a>
<a expr:href=’"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’><img alt=’del.icio.us’ src=’[DELICIO] IMG URL‘/></a>
<a expr:href=’"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’><img alt=’Stumbleupon’ src=’[STUMBLE] IMAGE URL‘/></a>
<a expr:href=’"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’><img alt=’Reddit’ src=’[REDDIT] IMG URL‘/></a>
<a expr:href=’"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&u=" + data:post.url’ target=’_blank’><img alt=’Furl’ src=’[FURL] IMG URL‘/></a>
<a expr:href=’"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.title + "&u=" + data:post.url’ target=’_blank’><img alt=’Yahoo’ src=’[YAHOO] IMG URL‘/></a>
</td>
<td style=’text-align: right; vertical-align: bottom;’>
<script type=’text/javascript’>
var tweetmeme_url = '<data:post.url/>';
</script>
<script src=’http://tweetmeme.com/i/scripts/button.js’ type=’text/javascript’/> <script type=’text/javascript’>
digg_url="<data:post.url/>";
</script>
</td>
</tr>
</tbody>
</table>
</b:if>
<!– End of social bookmarks –>
And you are done now! This will add the series of Social Bookmarking icons as shown in the above image.
NOTE that you dont actually need to add the <p><data:post.body/></p> line again. Its already there in the template after which you are going to add the social Bookmarkings. Its shown just for illustration.
Some Modification:
Now lets take a quick look at the bold parts of the codes.
- http://feeds2.feedburner.com/greentechspot: This is the feed URL of our Blog. Replace it by yours
- [Social-Bookmark-name] IMAGE URL: Replace the relevant IMAGE URL by the direct link of your image. Check this post at greenTechspot to get some good looking and FREE Social Bookmarking icons. Upload them to some free image hosting sites like www.tinypic.com or photobucket.com and Replace the IMAGE URL with the direct link.
Understanding the code:
Want to know how the code works. Well the <b:if cond=’data:blog.pageType == "item"’> part actually tells the blogger to show the bookmark only when the pageType is item, that is individual post pages. The best part of this code is that the bookmarks will not even load in background in front page and thereby will not make your front page load time slow.
I hope you will find this simple hack effective enough! Please do comment on this and if you are facing any problem then please let us know.
I cannot get this to work on my site. I tried on my "practice blog" (just a blog setup where I practice differnt things in blogger before making changes to my real blog) and got it to work perfectly, but in my real blog it doesn't show up. I had someone design my blog template; could there be a piece of code that is blocking this?
Sincerely, Camilla (the novice blogger)
This will be shown only in the inner pages not on the index page of your blog. Are you sure that you have not copied the code
<data:post.body/>
Also! It was there just for illustration. You need to copy everything after <data:post.body/> which is existing on your template. I just visited your blog and couldn find any code which can potentially block this =/
this is amazing
great work
keep coming
Thanks, it’s very useful for me because I’m a good fan of BlogSpot.
javascript codings can prevent people from seeing the code, but when the browser is about to execute it, it has to have a copy. People can simply disable Javascript or they may look in the browser cache files to see the source codes.
really helped me….thanxxx