My memory

... is pretty bad. That's why you see this.

Add social-bookmarking to BlogEngine.Net - AddThis

March 18
by hunghq 18. March 2011 12:20
Share |

The social-bookmarking facility I suggest in this post is AddThis. You may have seen it somewhere:

You can integrate those buttons into BlogEngine.Net blogs with a little tweak. So, the first thing you want to do is to go to http://www.addthis.com/, register a free account, login and start customize the buttons to your needs. When you hit the "Get the code" button, you will see a block of HTML code which looks similar to this one where pubid=XXX is what identifies your account.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a href="http://www.addthis.com/bookmark.php?v=250&pubid=XXX" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=XXX"></script>
<!-- AddThis Button END -->

The second step is to locate the place where you want to insert the code. It should be in the file PostView.ascx in your current theme folder. In my case, I put it on the same line of the Aurthor name and the post date, like this:

So I need to add a little CSS to make it stay inline:

<div style="float:right;" class="addthis_toolbox addthis_default_style">

and after the </div> I need to add a clear bar so that the following struture is not affected:

<div class="clearer"></div>

Of course, you need to define the "clearer" class in style.css file of your theme:

.clearer {
	clear:both;
	line-height:1px;
	font-size:1px;
	height:1px;
}

That should work for the Post View which shows individual entries of your blog. When someone hits a share button, the blog post (the URL) will be sent to the corresponding service. However, in a blog page displaying two or ten posts, that mechanism won't do you good. We want those buttons point to the URL of each post. Here is the tweak:

<div style="float:right;" class="addthis_toolbox addthis_default_style"
addthis:url="<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>" 
addthis:title="<%=Post.Title %>" >

So, you add an additional attribute to the <div> block to specify the share URL

addthis:url="<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>"

and one more to provide the title of the post

addthis:title="<%=Post.Title %>"

and you are done!

Notes:

  • In case you don't notice, AddThis website provides you with interesting analyses of visitors who have clicked social-bookmark buttons on your blog. 
  • An alternative to this method is to use AddThis.Net control, you can find it here. However, I don't think it offers the analytic function as the official AddThis provider.
  • This is tested on BlogEngine.Net 2.0. 

Happy blogging!

Tags: , , ,

Blogging

blog comments powered by Disqus

About the author

Hunghq Cool

Profession: software developer, translator, blogger

Location: Hanoi

I'd love to hear from you. Please leave a comment or contact me at hunghq @ hunghq.com

[more]

Painkillers

Recent Comments

Comment RSS