Social Networking Links using “AddThis” In Community Server Based Blogs
With the popularity of “Social Networking” it is becoming a popular feature to make it easy for user to Bookmark/Share blogs, articles, etc that they read online. Since this feature is not built into Community Server, you have to implement this yourself and it really is not hard to do. Since www.asp.net is uses a very customized version of Community Server the implementation described below can be used on your blog hosted on www.asp.net .
There is another way to implement this without using the AddThis service (but that is another blog topic). The benefits of using the AddThis service is that it allows you to track what social networking site are used by the readers of your blog to bookmark/share what they have read on you blog. This blog covers setting up a basic “AddThis” button, there are numerous customizations you can do that are explained on http://www.addthis.com. The one customization I did to was to limit what social network links show in the main list (addthis_options).
1) Create an account on www.addthis.com.
2) Generate the script for you button. Below is an example of the code that is generated.
<div> |
* You could just cut/paste this code into a snippet but due to the 500 character limit for snippet text this is not suggested. There is no validation on the field so if the text is > 500 character it just truncates the text. This can cause invalid HTML (which can mess up the rendering of the snippet maintenance page (edit/delete buttons not shown, not snippets after bad snippet show, etc). Therefore follow the remaining steps to get around the 500 character limit.
3) Create the follow snippets for you blog (Controls Panel –> Manage Content –> Manage Snippets).
a) Create a new snippet called xAddThisInLineScript and put the following code from above into the text field.
<script type="text/javascript">
var addthis_pub="{Your AddThis UserID";
var addthis_options="email, print, digg, slashdot, delicious, twitter, live,
myspace, facebook, google, stumbleupon, newsvine";
</script>b) Create a new snippet called xAddThis and put the following code from above into the text field.
<a href="http://www.addthis.com/bookmark.php?v=20"
onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')
onmouseout="addthis_close()"
onclick="return addthis_sendto()">
<img src="http://s7.addthis.com/static/btn/lg-share-en.gif"
width="125" height="16" alt="Share This Post" style="border:0"/>
</a>c) Create a new snippet called AddThisButton and put the following code in the text field.
<div>
[xAddThisInlineScript]
[xAddThisLink]
</div>
4) Now the final external line of the generated script can only exists once per page. Therefore go to Controls Panel –> Global Settings –> Title, Description and News. Enter the following code into the “Raw Header” field.
<script type="text/javascript"
src="http://s7.addthis.com/js/200/addthis_widget.js">
</script>
That is all that needs to be done to setup your blog to be able to easily add the “AddThis” link to the bottom of every post. Now all you need to do is put “[AddThisButton]” at the end of each blog you write. Although these instruction are for blogs created in Community Server, there should be enough information here to implement this in other blogging engines.
You can see how this works by seeing the link I have created at the bottom of this blog.
[AddThis]