Wednesday, 20 October 2010

Applying Social Bookmark Links to your website

I wanted to create more links to my website for SEO purposes. To make it easy for people to add links to my website from social networks. I wanted to do this with the minimum amount of coding and updating. I therefore used http://www.addthis.com/
All I had to do was create an account (which was free).
Click on the "Get Your Button", button.
Copy the code.
Paste it into an appropriate location in my web page.

The code looks something like this :

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=yourusername" 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#username=yourusername"></script>
<!-- AddThis Button END -->

I did 2 things beyond this. I created a div wrapper around it thus:
<div id="socialWrapper">

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=yourusername" 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#username=yourusername"></script>
<!-- AddThis Button END -->
</div>

I then, applied some style to my wrapper in the stylesheet thus:
#socialWrapper
{
position:fixed;
top:0px;
right:1%;
background:#FFFFFF;
}


This way, the social bookmarks would always appear at the top right of my browser window and would not clash with the page content.

See demo.

No comments:

Post a Comment