21 February 2008

How To Add Popular Social Bookmarking Service's Links in Blogger - All In One Code Provided!

In this article, we shall provide the code for you to place into the template to have a line of icon/ button links or text links to popular social bookmarking sites like Digg, Technorati, del.icio.us, Reddit, Blinklist, Furl, Yahoo, Simpy, etc. Readers can click them to add your site or your post to their bookmarks and in sharing these links with others, your Blog becomes more visible. This code when inserted into your template will automatically place these social bookmark links at the bottom of every post. There are many social bookmarking sites and new sites pop up almost every week. What we can do here is to provide you with a code that will place several of these popular sites, and update this list over time.

Social bookmarking is a popular way for users to share their personal bookmarks of useful sites with other users. Since most of the bookmarks are classified by topics, tags or categories, people around the world with interests similar to the user can easily locate these sites by viewing their online bookmarks. Just over the last couple of years, this concept has caught on with so many users that social bookmarking sites are now very popular and highly ranked by search engines. We shall discuss and list these sites in a separate article. For now, we want to provide you a code so that you can have something to work with.

Social Bookmarking Button Provider:

Add This:
You would have noticed that we have used the free services of AddThis. They provide a simple widget code which you can place into your template. When users click it, they will be brought to a page of the most popular social bookmarking or feed reader services. Through that interface, they can submit your site or blog post to their online bookmarks or feed readers. What we like about this is the simplicity in design with only one button at the end of each post. It provides as well statistics of the popular posts that are bookmarked.

Social Bookmarking links in Blogger

Register for a free account with them. When you are logged in, click on “My Account” and “Get the code for your widget.” You can either have a bookmarking widget or feed widget, choose a size of the button, and indicate Blogger as your blogging platform. Once you click on the “Get your free button link”, you will be shown a few codes that you can use. If you want the button to be in your sidebar, copy the code under the heading “Blog Button (New or Older Blogger).” Login to your Blogger account, go to Template -> Page Elements -> Add a Page Element in your sidebar and select “HTML/JavaScript”. Paste this code and save.

Munual Add Social Bookmarking Button's Code :
To add popular social bookmarking button in you footer allowing your visitors to bookmark your post in services like "Digg", "Technorati", "Del.icio.us", "StumbleUpon", "Reddit", "Blinklist", "Furl", "Spurl", "MyYahoo" and "Simpy" all you have to do is copy the code in the Box bellow and read on to see where to paste the code.

For the purposes of this article, we have uploaded the images onto our Photobucket account. If you desire to change the images, you can change the image URLs to those of your own.

<!-- Start of social bookmarks. Check http://tips-for-new-bloggers.blogspot.com/ for updates --><br/>
<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Digg' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/digg.gif'/></a>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'><img alt='Technorati' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/technorati.gif'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='del.icio.us' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/delicious.gif'/></a>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Stumbleupon' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/stumbleupon.gif'/></a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Reddit' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/reddit.gif'/></a>
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=" + data:post.url + "&amp;Title=" + data:post.title' target='_blank'><img alt='Blinklist' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/blink.gif'/></a>
<a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&amp;u=" + data:post.url' target='_blank'><img alt='Furl' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/furl.gif'/></a>
<a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Spurl' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/spurl.gif'/></a>
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.title + "&amp;u=" + data:post.url' target='_blank'><img alt='Yahoo' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/yahoo.gif'/></a>
<a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Simpy' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/simpy.gif'/></a><br/>
<div align='center'><a href='http://themmonline.blogspot.com/' alt='Blogging Resources' target='_blank'>Widget by ©The MM Online</a>
<!-- End of social bookmarks -->

Where To Place The Code :

After you have copied the social bookmarking code above, follow simple steps metioned below:

Go to Template -> Edit HTML and check the box that says “Expand Widget Templates.”

There are several places where you can place the bookmarks.

1. You can place them just below your Posts and before the “Posted By” line as shown in the above pictures. Scroll to these lines and place the relevant code at the red portion:-

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
PLACE CODE HERE
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>

2. If you want the social bookmark links to be just above the labels:-

Scroll to these lines and insert the relevant code at the red portion:-

PLACE CODE HERE
<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>

3. If you want the bookmark links to be at the bottom after the labels:-

Scroll to these lines and place the code at the red portion:-

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>
PLACE CODE HERE

You're done adding the post popular social bookmarking servces to you'r blog. Ejoy!

If you like reading this post, Please leave a comment and let the conversation continue.

12 comments:

Everymatter said...

I have used the codes for social bookmarking but got following error

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "M" must end with the ';' delimiter.


Please help me out.

MaLanG - Separating Emotions said...

Hi there,
Yes the code had a small issue which is now resolved..
You can now use the code above.. will not show any errors :)
Thanks!

C. Tekmen said...

Great job...thank you!!!

MaLanG - Separating Emotions said...

My pleasure C.Tekmen. Did you enjoy the code? Feel free to use and share it .. :)

For anything else.. you can just email me and I will get back to you ..

Regards,
-MaLanG!!

Unknown said...

Mobile Repairing Picture Help

wow really great thanks man

harry said...

A blog (a contraction of the term "Web log") is a Web site, usually maintained by an individual with regular entries of commentary, descriptions of events, or other material such as graphics or video. Entries are commonly displayed in reverse-chronological order. "Blog" can also be used as a verb, meaning to maintain or add content to a blog.
=============================================================
Harry
Social Bookmarking

Edo said...

I too have found an easy way. Please check it out!

http://edopeno.com/2008/11/21/add-social-bookmarks-to-your-site/

Anonymous said...

Thanks for your help. I just did a post on my blog linking back to this post to help other readers. I found though that there was an error so had to place closing /div tag after the end of social bookmarks bit. Just to let you know.Thanks a bunch.

Rohan Lobo said...

hi,
that was a very nice post,
I wanted to know something simpler

How can i give a option for the viewers of my blog, to click a link so that they can bookmark my blog.

Regards
Rohan
loborohan@gmail.com

Anonymous said...

Do you know fiesta Gold? I like it.
My brother often go to the internet bar to buy fiesta money and play it.
After school, He likes playing games using these fiesta online gold with his friend.
I do not like to play it. Because I think that it not only costs much money but also spend much time. One day, he give me many buy fiesta Gold and play the game with me.
I came to the bar following him and found fiesta online money was so cheap. After that, I also go to play game with him.

Do you know fiesta Gold? I like it.
My brother often go to the internet bar to buy fiesta money and play it.
After school, He likes playing games using these fiesta online gold with his friend.
I do not like to play it. Because I think that it not only costs much money but also spend much time. One day, he give me many buy fiesta Gold and play the game with me.
I came to the bar following him and found fiesta online money was so cheap. After that, I also go to play game with him.

Anonymous said...

top [url=http://www.001casino.com/]casino online[/url] brake the latest [url=http://www.realcazinoz.com/]free casino[/url] autonomous no consign perk at the chief [url=http://www.baywatchcasino.com/]casino online
[/url].

Anonymous said...

Scorching young modern casino employee takes her managers head out of a large decrease, simply by fucking him over the live dealer roulette desk. [url=http://www.xvideos.com/video1882529/buxom_black_booty_bitch_banged]2 women indulging blessed assertive[/url] Very hot in addition to sexy golden gets noted in the tape in my ballet shoes and then she ain't lacking confidence to show your ex shape and then for having sexual intercourse , House maid within wide lace top stockings performs a pair of tough cocks Cookware slut is the winner at ping pong as well as displays beneficial sportsmanship by simply caressing and banging your girlfriend adversary http://www.xvideos.com/video1851616/black_kittens_in_heat My personal ex girlfriend or boyfriend attractive bathe fun , Asian kitchenware chick in blindfolded after which you can includes physical objects loaded straight into your ex by just two men, and then fucks them both