Adding Social boomark ( album 1 ) Posted by vuluganck | at Monday, May 25, 2009

Hi every body , today I will gather whole the ways about making "social bookmark for your blog.So there will many choices for you to put them on your lovely blog.
Because there are a lot of stuffs about this tip, so I will divide into 2 parts, this is the 1st part including basic, simple ways to add the "social bookmark".

1.Add bookmark button with Add This:

Look at this sample, that's how it looks,you just have to click on the orange button "Get Your Button" on right side,get the code and add to blog.Click here to go to Add This.

2.Add "Add This"bookmark button by adding code:

If you don't want the bookmark button to appear at 1 place, you can add the bookmark button below each post by this way:

Log in your blogger account , go to Layout-->Edit HTML--->Choose "Expand Widget Templates"and find this code:

<div class='post-footer'>

or

<p class='post-footer-line post-footer-line-1'>

If you can not find any line like that, try to find the similar line then add this code beneath the line I told you:

<p class='post-footer-line post-footer-line-3'><br/><div align='left'><a expr:href='"http://www.addthis.com/bookmark.php?pub=4QVQQ2TM5XDPAYVN&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Bookmark using any bookmark manager!'><img alt='AddThis Social Bookmark Button' height='16' src='http://s5.addthis.com/button1-bm.gif' style='border: 0px; padding: 0px' width='125'/></a></div><!-- AddThis Bookmark Post Button END --></p>

After you added it , you will see the bookmark button of Add This appear at the end of each post.

3.Add bookmark button with AddToAny:

This is the sample, similar to Add This, just click here to go to Addtoany and click "Get the Share Button" to get the code and add to your blog.


4.Other style of bookmark button below every post:



All you have to do is access your source code ( in Edit HTML, check Expand Widget Templates) then find this code :

<data:post.body/>

If you cannot find it , please find another one similar to it.
Then add this code beneath it:

<b:if cond='data:blog.pageType == "item"'>

<script
type='text/javascript'>digg_url=&quot;<data:post.url/>&quot;;</script><script
src='http://digg.com/tools/diggthis.js' type='text/javascript'/>

<a
expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; +
data:post.url + &quot;&amp;title=&quot; + data:post.title'
rel='external nofollow' target='_blank'><img alt='Stumble' src='Icon URL here '/></a>

<a expr:href='&quot;http://del.icio.us/post?url=&quot; +
data:post.url + &quot;&amp;title=&quot; + data:post.title'
rel='external nofollow' target='_blank'><img alt='Delicious' src='Icon URL here '/></a>

<a expr:href='&quot;http://technorati.com/faves?add=&quot; +
data:post.url' rel='external nofollow' target='_blank'><img
alt='Technorati' src='Icon URL here '/></a>

<a expr:href='&quot;http://twitthis.com/twit?url=&quot; +
data:post.url' rel='external nofollow' target='_blank'><img
alt='Twitter' src='Icon URL here '/></a>

<a
expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; +
data:post.url + &quot;&amp;t=&quot; + data:post.title'
rel='external nofollow' target='_blank'><img alt='Facebook' src='Icon URL here '/></a></b:if>


Notice the red code, that's the icon of every social web, if you want to find some cool icons about those, click here to download the icons.

I will update more simple ways about social bookmark later