Adding Custom Social Bookmarks to Blogger

Notice the large icons for social bookmarking that I recently added below each post. Visitors simply click the icon to send the post url and title to the desired social bookmarking site. Using my familiarity with Blogger template styling/html, I was able to modify a great WordPress tutorial. Now you too can have control over the look and placement of social bookmark icons. So this is officially a Blogger hack of WP!


What’s available

The biggest resource in this effort is the WP tutorial at BloggingWithSuccess (BWS) on how to add attractive social bookmarklets.

  1. The BWS tutorial has useful references to sites where you can find eye catching custom icons.
    DryIcons:
    Smashing
    : 3D icons :
    Web2Icons:
    CircleIcons:
  2. The same post also provides basic styling to offset your icons below your post. I used their CSS but made some changes for my theme. The suggested blue color (#d4e2eb) worked, but large icons standout enough and my design has lots of color (LOL.) So instead I used a colorless background with just a darker border on the top.
  3. Each service has a unique format for passing data about the post your want to bookmark — what else is new. This adds a wrinkle when going to icons other than the five shown in the BWS tutorial. They provide a strategy for using the old fashioned ‘share this’ button to see how to form the link expression for other services. Hover over the icon and you’ll see the actual url and title. What you want is the format since you can not put a static url or title in your template! We’ll discuss how you do that later. (See “Other Icons”)

Getting it done

Many Blogspot blogs show several posts on the home page, so my procedure places the custom icons below every full post. It you want it to appear only on the single post page then see the note below the scroll box code. I always advice using a test blog first. However, you can safely apply directly to your blog without a net, as long as you preview before you save any template changes!

Go to your Blogger dashboard, choose Layout and Edit HTML tab. Check the Expand Widget Template box

Press ‘Download full template’ to save your current version. Find anchor lines of code, shown here in green, by using the Ctrl + F keys or your browser’s Edit menu & Find feature.

  1. A. Find this line in your template so we can add styling around the icons
    ]]></b:skin>
    Copy the six lines below, then paste before the line you just found.

    #Social{
    background: #d4e2eb;
    border: 1px solid #DDD;
    padding: 5px;
    margin: 5px;
    }

    Preview this version (press blue button at bottom of the html window) and make any color or border adjustments. For the border color, #ddd is short-hand for #dddddd, so find a color you want and just substitute the code. In my template I replaced lines 2 and 3 with

    background: transparent;
    border-top: 2px solid #DDD;

    Whenever the preview is good, you can save the template. After a good save, if there is a problem you can try to backtrack or press ‘clear any unsaved changes’ and start over!

  2. Now let’s find the spot for the actual icons layout. The end of the post is signaled by ‘post-footer-line post-footer-line-1’ . For my theme the first line is the author/comment summary. The second held the AddToAny button. I put the social icons below that button as a new paragraph in line-2.

    Find this line: <div class=’post-footer-line post-footer-line-2′>

    Can’t find that line? If there is no line-2 , then find the same expression using 1 instead of 2. You’ll be putting the code at the end of the line-1 section.

    For either section, it’s tricky finding the exact spot. The code must be a separate sub-section to not interfere with existing lines. So unless you know, ask for help or take the path of least resistance — place it at the very end of the post before the footer! To do that instead, find <data:post.body/>and put the code after the </p> tag which may be on the same or separate line that you found. Just leave a comment if you need help.

  3. Copy and paste all of the code in the scroll box after an end tag in your line- section. The scroll box contains the code for the five icons used at BWS. However, I’ve used the necessary Blogger code instead of php functions. Also the images are on Flickr so you can use these until you feel confident enough to switch images and or add other link services.

    The Twitter link uses a service by bit.ly which has the features of the Simple Twitter Link plugin, sending a compressed url.

    <p>
    <DIV align=’center’ id=’Social’ style=’text-align: center’>
    <TABLE align=’center’ border=’0′><TBODY><TR><TD width=’68’><a expr:href=’&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’><IMG alt=’Add To Delicious’ src=’http://farm4.static.flickr.com/3041/3554373391_cd28ab7c8d_o.png’/></a><br>Add to Del.icio.us</br> </TD>
    <TD width=’68’><a expr:href=’&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’><IMG alt=’Digg This Post’ src=’http://farm4.static.flickr.com/3571/3555181686_fc76aa8c95_o.png’/></a><br></br>Digg<br>This Post</br> </TD>
    <TD width=’68’><a expr:href=’&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’><IMG alt=’Stumble This Post’ src=’http://farm4.static.flickr.com/3358/3554373453_a366370146_o.png’/></a><br>Stumble This Post</br> </TD>
    <TD width=’68’><a expr:href=’&quot;http://technorati.com/faves?add=&quot; + data:post.url’ target=’_blank’><IMG alt=’Fave on Technorati’ src=’http://farm4.static.flickr.com/3590/3554373481_a4ea7b5152_o.png’/></a><br>Fave on Technorati </br></TD>
    <!– java code used for twitter link –>
    <script charset=’utf-8′ src=’http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523′ type=’text/javascript’/>
    <script charset=’utf-8′ src=’http://s.bit.ly/TweetAndTrack.js?v=1.01′ type=’text/javascript’/>
    <td width=’68’><a expr:onclick=’&quot;return TweetAndTrack.open(this, &quot;&quot; + data:post.url + &quot;&quot;);&quot;’ href=’#’>
    <span style=’display:none;’>Reading: <data:post.title/></span><IMG alt=’Tweet This’ src=’http://farm4.static.flickr.com/3411/3555181740_75748aed5c_o.png’/></a><br></br>Tweet<br> This Post</br> </td>
    </TR></TBODY></TABLE>
    </DIV>
    </p>

    Note:If you want the icons to show only when a single post is opened and not on the homepage, then add these conditional lines — the first one just BEFORE the code in the scroll box and the second one just AFTER the code:

    <b:if cond=’data:blog.pageType == “item”‘>
    … …
    </b:if >

    Again, preview and save if everything looks good. Then you can adjust icons and placement if you want to.

Other Icons

Here’s the format for bookmarking links to some other popular sites. Use these to add other services.

Reddit <a expr:href='”http://reddit.com/submit?url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’>

Google Bookmarks <a expr:href='”http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’>

Just select an icon and add it to your Flickr or blog image files, then follow the format used in the tutorial code above to replace or add to the five favorites. Example of entire entry for Digg:

<TD width=’68’><a expr:href=’&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’><IMG alt=’Digg This Post’ src=’http://farm4.static.flickr.com/3571/3555181686_fc76aa8c95_o.png‘/></a>Digg<br>This Post</br> </TD>

Place the appropriate link at the expr:href=’ spot. Put your new icon image location at the src=’ spot, replacing the items in red. Naturally you’d have different ‘Digg this Post’ with the new service name, e.g. Reddit.

Why not give it a try. If the images are too large, use a smaller version. Let me know how it turns out!

You may also be interested in these posts.
Do I really need a test blog?
How To Outsmart Blogger’s Image Handling
Fearful of What Blog is Behind Door #1 on Blogger?


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


15 Comments

  1. Wow, you're quick! And it looks fine. Not sure why the icons background is transparent with no border but you used the original styling:
    #Social{
    background: #d4e2eb;
    border: 1px solid #DDD;
    padding: 5px;
    margin: 5px;
    }
    Was there an override somewhere in your html?

  2. Thanks for visiting and the compliment. Your blog topic is worthy of everyone's attention. Good luck.

  3. Not sure of any override in my html, that I'll have to check. Also, I want the icons smaller, perhaps those sites provides options for icon sizes?

    Recent blog post: About Me

  4. that’s very easy. Just change the html for each icon to have the browser resize them. Since they are square 48 x 48 you can safely resize and keep same resoluion. So try adding height=”24″ width=”24″ in one of the img tags — see location in this excerpt. Must be after the end quote for src!
    src=”http://farm4.static.flickr.com/3041/3554373391_cd28ab7c8d_o.png” height=”24″ width=”24″ Preview and Adjust if too small/big.Add to all other images and save.
    Here's how delicious icon would look:
    <img src="http://farm4.static.flickr.com/3041/3554373391_cd28ab7c8d_o.png&quot; height="24" width="24"/>

  5. But don’t forget the space around each smaller icon needs to be decreased! It’s a vicious cycle.. 😀   Change the TD Width=”68″  to something more appropriate.

  6. ya i need to add that widget 🙂 ..i'm a vegetarian..that recipe is famous in my home town..saw ur comments" u saying me in blogcatalog 😉 ".."this guy used my post to add that cool image" 😛 ..

    Regards

    Sriram

  7. What about Facebook? I successfully added the other sites but want to add FB…your example code didn't work for me for FB and I found some other code but could not get it to work either…Can you help?

    Thanks!

    Recent blog:=- More Miles in Missouri?

Comments are closed.