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!
The biggest resource in this effort is the WP tutorial at BloggingWithSuccess (BWS) on how to add attractive social bookmarklets.
- The BWS tutorial has useful references to sites where you can find eye catching custom icons.
Smashing: 3D icons :
- 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.
- 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!
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.
- A. Find this line in your template so we can add styling around the icons
Copy the six lines below, then paste before the line you just found.
border: 1px solid #DDD;
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 withbackground: 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!
- 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.
- 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.
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”‘>
Again, preview and save if everything looks good. Then you can adjust icons and placement if you want to.
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 + “&title=” + data:post.title’ target=’_blank’>
Google Bookmarks <a expr:href='”http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=” + data:post.url + “&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=’"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + 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?