Monday, March 12, 2007

Easy Social Bookmarking for your Blog

Social Bookmarking Icons

Found this site that offer an easy way for you to add those social bookmarking icons for a blog or a website. There are now so many social bookmarking sites, and adding as many icons as possible can make your blog or website look cluttered. For example, I found this in the sidebar of a blog:

Social bookmarking icon clutter

Now with AddThis, you can get just a single icon to put on your blog or website, and a visitor clicking on the single icon will get to a page where he can choose whatever social bookmarking service or services he is subscribing to.

I have added AddThis icon for both the blog as well as the individual posts of this blog: Dummies Guide to Google Blogger. You can pop over to that site and test them out.

I will just paste the note that I added as I tried to add those icon to the above blog (note: you can do it without having to register for an account, but I think registering for an account is useful because then you have access to statistics like how many people have bookmarked the blog, etc.)

http://www.addthis.com/
Choose Bookmark or RSS Feed
http://www.addthis.com/account.php
email: xxxx@gmail.com
username: manature
password: yyyy
Message: An account with this username already exist
ignore
signin
Click "Get the code for your button
Which kind of button? Bookmark button/feed button
Chosed Bookmark button
Click radio button to choose the button (chosed the largest one, more visible)
Where? Drop-down menu: "on a Blog"
Blogging Platform: Drop-down menu: chose "Blogger"
Want stats with that? tick "Yes"
Click "Get Your Free Button"
Code for Blog Button:

Note: The codes here are for illustration purposes only. You should get the codes direct from your own account in AddThis as otherwise, you will not be able to see the statistics as it will enter my account instead.

<!-- AddThis Bookmark Button BEGIN -->
<a href="http://www.addthis.com/bookmark.php" onclick="window.open('http://www.addthis.com/bookmark.php?pub=manature&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'addthis', 'scrollbars=yes,menubar=no,width=620,height=520,resizable=yes,toolbar=no,location=no,status=no,screenX=200,screenY=100,left=200,top=100'); return false;" title="Bookmark using any bookmark manager!" target="_blank"><img src="http://s3.addthis.com/button2-bm.png" width="160" height="24" border="0" alt="AddThis Social Bookmark Button" /></a>
<!-- AddThis Bookmark Button END -->


To add to top of left sidebar of Dummies Guide to Google Blogger
Click "Add a Page Element" for the left sidebar in the Layout
Selected HTML/Javascript
Pasted in the script
Save
Done

Social Booking icon for the posts

This will involve tampering to your template, so a good thing to do is to backup your template first. If you are new to editing and backing up templates, refer to this post How to backup and edit your New Blogger template. To add the AddThis icon to the bottom of every posts, get into your template editor, tick the "Expand widget template", then look for this line of code:

<div class='post-footer'>

paste directly below the above line of cod this block of codes

<!-- AddThis Bookmark Post Button BEGIN -->
<div><a expr:href='"http://www.addthis.com/bookmark.php?pub=enviroman&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Bookmark using any bookmark manager!'><img src='http://s3.addthis.com/button1-bm.gif' width='125' height='16' style='border: 0px; padding: 0px' alt='AddThis Social Bookmark Button' /></a></div>
<!-- AddThis Bookmark Post Button END -->


Preview, and if satisfied, save the template.

Update 14 March 2007: I find it so useful, I think I will add them to this blog as well.

Update 21 March 2007: I got a comment which seem to indicate that the blogger didn't understand how AddThis easy social bookmarking works, so I thought I will do an update to explain further. When you install the AddThis easy social bookmark icon AddThis easy social bookmark icon, the icon include many social bookmarking services. When clicked on, it will open up a pop-up (see screenshot below, click to enlarge):

AddThis easy social bookmarking expanded pop-up

from which you can select a whole range of social bookmarking services. Try clicking on the icon just below this post or the icon at the top or the left sidebar and see what happen.

38 comments:

  1. Hi Peter,

    This is a very useful tool and one I've been using on all my blogs. It also has some nice basic statistics that show what people are bookmarking and subscribing to.

    ReplyDelete
  2. hi...
    how do you create a space for writing code in your blog?

    ReplyDelete
  3. hi ...
    how do you add code to your blog?

    ReplyDelete
  4. Hi anurag,

    I don't think you are refering to adding the code to create the social bookmarking icons as that had been explained in the post. I think what you are referring to is to the scroll box into which I put the code. For that, refer to How to make a scroll box

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  5. How do I make the bookmark icon be in the same row as the comments, time of post, permalink etc? I want it to be the last icon on that same row equally spaced. thanks

    ReplyDelete
  6. i tried to add the code to my temelate and ive got this 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 "url" must end with the ';' delimiter.

    ReplyDelete
  7. Hi Amit,

    You have to copy the codes direct from AddThis site. I don't know why when copying the codes from this post didn't work, even if it doe, you should have your own account and get the code yourself from AddThis site, otherwise, you wouldn't be able to access the statistics.

    Peter
    Dummies Guide to Google Blogger

    ReplyDelete
  8. hi and thanks for ur useful information and i learn everything from u thanks soo kind of u.One more thing I like to know is how I put ,Add to Google,my yahoo and my msn tab ,As on addthis.com I only find bookmark not all this. please please help.

    thanks
    www.vista-tip.blogspot.com

    write2ujval@gmail.com

    ReplyDelete
  9. Hi Ujval,

    I think you did not fully understand how AddThis easy social bookmark icon works. I have added an update. Read the update and see if it answer your question.

    Peter
    Dummies Guide to Google Blogger

    ReplyDelete
  10. I, i 'm writing from italy, i have 5 blogs with blogspot.com. I start with google's blogs 2-3 weeks ago and i don't know codex and don't speak english very well, but i must work with intenet because my body is no good for others work... Ok, owewer, i think to began crazy: when i find beautiful and good lessons about put the code, i copy its, past its butt... blogspot.com said to me (often) in RED: this is an error, the codex not good, xlm error, xlm error, codex not closed, .. I know not good htlm, this codes with many many $$ is the first time i see it..... scuse me if i speak and don't make an answer, but i'm very stressing about this situation.Funny!! your blog speak my language!! i see it now...ok m i go to read more, after i tell you somethingm bye to http://blogmasterpg.blogspot.com !!

    ReplyDelete
  11. Nein, nada, niz, no no no!!! I don't understnd is one month i lokking for to add in end of my posts some social bookmark buttons, now that find this "add this" I can't put on my blogs, is frustrant, very grustant. I think that is template. is the unique thing i know, but i no sure. BlogmasterPg

    ReplyDelete
  12. Hi Peter,
    Ok, so I got a new template that is a three column template, I think I actually got it from your site. It is the rounders one. You can go to my blog and check www.useitandloseit.blogspot.com well, I previously had the social bookmark added from addthis, but now with this new 3 column template I cannot find where I am supposed to put the code. I even pasted my html to ms word and tried to find the part of the html that I was supposed to put the code beneath, but there is nothing. I found it easily before I changed the template, can you please help me? Thanks so much! Love the site, it has been so helpful!

    ReplyDelete
  13. Hi Tre',

    I suppose you have read this?
    Easy social bookmarking for your blog.

    You just click "Add a Page Element" and select HTML/Javascript then paste it into the window. However, if you have other things like "Subscribe to feed" etc. It is better to edit that Page Element and paste it below the script for the feed so you save valuable space. If you put in separate Page Elements, there will be large white space between them.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  14. Hi again Peter,

    Thanks for your quick response to the previous comment, however what I want to do is add the code from addthis.com into my template, but what I cannot find is: div class='post-footer', which is what I am supposed to put it beneath. I also did add the buttons as a page element, but I kind of want the buttons to add themselves at the end of every post like yours do. I did read your post on easy social bookmarking, but still having issues. I am sorry for continuing to bother you. hey, if you weren't so darn helpful I wouldn't! :) but you are the most helpfull site that I have found, so you will probably continue hearing from me, sorry in advance,lol.

    Thanks again,
    Tre'

    ReplyDelete
  15. If you have problem, click inside the template editor, click ctrl+A to highlight everything, righ-click, choose "copy". Open notepad, make sure Format > word wrap is off, right-click and paste template into notepad. Click EDIT in the menu bar, choose "Search for" and search for div class='post-footer'. If you have problem, get the "scroll button" in the vertical scrollbar to the top. highligh everything, then search. You should find div class='post-footer.

    When you have found it, you can either note roughly where in the template it occurs, go back to the template editor and paste what you need to paste there. Alternatively, you can do it in Notepad itself, highlight everything, copy, go to he post editor, click inside the post editor, right-click and press DELETE key, paste everything from Notepad into the empty post editor.

    IMPORTANT NOTE: BACKUP YOUR TEMPLATE FIRST

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  16. Has anyone else had this issue:
    I embedded the code for AddThis & it looks great and for months, I just assumed it was working. But apparently, when people try to use it to add my feed to their Google Homepage, it shows up on the homepage as "temporarily unavailable." I have a friend who has the same problem on his blog. The bookmarking button works fine.

    Any suggestions/ideas as to why this may be happening? I emailed the folks at AddThis & searched everywhere for troubleshooting info, but have heard nothing.

    ReplyDelete
  17. Hi Josephine,

    I am afraid my response is not going to be very satisfactory. I have no reason to subscribe to the feed for my own blogs except if I want to test it. So far, I have not done that so I am unable to add my experience here (I may actually have done it once sometime ago, but have forgotten the result of the test). The problem may be a temporary problem of AddThis server.

    I am copying this response to my long list of TO DO to test when the time permit. If I do that, I may write a report at Testing Blogger Beta (now New Blogger. If I really do that, I will put a link to that report in this post.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  18. Thanks for your response, Peter, and for dropping by Please Come Flying!

    I'm starting to think maybe it has something to do with the fact that I use my own URL, not the .blogspot.com URL? I don't know. If I figure it out, I'll let you know.

    Looking forward to checking out your other blogs!
    -Josephine

    ReplyDelete
  19. Hi Peter,
    I cannot find div class='post-footer' in my Expand widget template. The other thing is that when I copy the block of codes to the place I think it should belonge to after I receive this message:

    "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 "url" must end with the ';' delimiter."

    Can you help?
    Thanks.

    ReplyDelete
  20. Hi babe,

    You may be using a non-standard template. I just finished one job for someone from Argentina who gave me her user name and password. The template she used was non-standard and the code mentioned in the post couldn't be found. I had to spend some time to find an alternative place to paste the script. The job was just finished this morning. She offered to pay donation to my Paypal account plus links to my blog.

    Regarding you being unable to find div class='post-footer', I don't know if I can do the same thing, but I can try.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  21. Hi Peter,
    Many thanks for your quick response. My template is this one: http://tinyurl.com/ys5zg8

    If it's such a problem forget about it. It is not so important for me.

    Onece more. Many thanks.

    Petr B.(BaPe)

    ReplyDelete
  22. Hi BaPe,

    I checked the template and couldn't find <div class='post-footer'>

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  23. Hi Peter,
    I somehow managed to add the bookmarks to my posts. Now I wonder whether it is posible to place/move my "New Kid" picture in the middle of my right column. Now it's on the right edge of the column...

    Any idea?

    Many Thanks.

    BaPe

    ReplyDelete
  24. Hi BaPe,

    Not clear what you want as you didn't give the URL to the page concern, but hope that this post will help: Uploading and manipulating images Part 2.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  25. Hi Peter,

    I ment if i can somehow move/shift my logo/avatar on my blog: New Kid on the Blog

    Meny thanks for your responses.

    BaPe
    New Kid on the Blog

    ReplyDelete
  26. Hi BaPe,

    How did you put it there? Via "Add a Page Element" and selecting Picture or HTML/Javascript, or what?

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  27. Hi, the picture/avatar which is on my site is from my Profile. So when I want to change it, I have to go to: Edit User Profile and there under the heading Photograph change the URL of the picture I want on my blog as a avatar.

    ReplyDelete
  28. Hi BaPe,

    I am not that familiar with Avatars and don't know if there is any difference with plain images. Why don't you give us the URL to the Avatar and maybe I will be in a better position to answer your question.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  29. Hi Peter,
    This is a good tip to distribute the details of posts in a blog. If a reader likes a post, Then he can bookmark it. I was using this widget.
    I think "Use a multi service" is less effective than "Use few popular social bookmarking icons in every post".
    Use addthis widget in every post in blogspot

    ReplyDelete
  30. Hi Peter:

    I put the AddThis Social Bookmark in several of my blogs. I was doing fine until I reached http://http://grandeursobranco.blogspot.com/

    The widget installed OK as usual for each post on the blogs. However, in this blog it doesn't show up in the first two posts but it shows up in all the rest of the posts, in this blog. It has me baffled. Do you have any ideas on what is wrong?

    Happy New Year Peter.
    Urso Branco

    ReplyDelete
  31. Hi urso,

    To tell the truth, I am so busy, I hardly have time to bookmark any sites, not have the time to add the social bookmarking in my numerous blogs. So not much help here. Perhaps you may be lucky and some readers might be able to help you out or try Google Blogger Help group.

    Peter Blog*Star
    Generating Revenue from your Website

    ReplyDelete
  32. Hi Urso,

    For your problem, perhaps you may want to try Add This help page. There is a "Please contact us" link at the bottom of the page. Do let us have some feedback of your progress.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

    ReplyDelete
  33. Thank you Peter for replying! I'm going to try out your tips for the social bookmarking, you explain it very clear so I think it will work! However, I will have to wait for the thunderstorm to pass ... Oh yes, you were almost right, I'm not from Holland but from Belgium which isn't far from the Netherlands!
    Kind greetings and many thanks!

    ReplyDelete
  34. Hi KarenHappyWomen,

    Belgium? I was a student in Belgium 30 years ago! Nice to meet someone from Belgium.

    Peter Blog*Star
    Earning Online

    ReplyDelete
  35. Hi Peter,
    Finally it was calm in the house and I found the time to put the ddthis button on my blog. And it worked, I am really grateful, your instructions are clear and helpful! You speak very well Flamish! To answer you question regarding Belgian politics I am not the best person to refer to as I don't go there very often. I look at the news sometimes and for what I heard they are trying everything to keep the country one. Personally I think it is all a waste of time, energy and money but if you look to our history which is rather complicated one can understand that getting along well isn't always easy. My husband studied in Gent as well but this is 20 years ago. What did you study? Was it all in Flemish? Heve you ever been back later or do you still have friends? Als je meer Vlaams wil lezen (of schrijven)kan je terecht op één van onze andere blogs http://recepten-voor-geluk.blogspot.com

    Nogmaals hartelijk dank!

    Kindest regards,
    Karen

    ReplyDelete
  36. Goode dag Mevrouw Karen,

    Ik was een student in Gent België 30 jaar geleden, Faculteits Landbouw Universiteit van Gent

    Meneer Peter Chen

    ReplyDelete
  37. Hey Peter,

    You have share great information with us. All social bookmarking services in one place. thanks!

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics