Why don't we put one of those share on facebook links at the end of each Blogger post? It seemed like a simple request. Other people had them so it couldn't be too difficult, right?
Well several google groups, blog posts and google searches later I can confidently say, "It really isn't all that difficult. If you know what you are doing."
In an effort to save you the time and energy I dumped into this one I will try to thoroughly explain what I did to get that nifty little share on facebook icon at the end of each of my blog posts.
I guess I should start by mentioning http://addthis.com/ If you want a quick and easy way to include posts to every conceivable sharing service you can sign up for a free account and their site will make a nifty little button that opens a window and allows the user to select whatever service they want. We just wanted a single simple button for posting to facebook and potentially something that could be expanded to include a few other select services.
The first thing I had to do was learn all about this Blogger widget stuff. Its actually not hard to learn if you've had any code writing experience. There are some great resources in the blogger help pages.
- Wideget Tags for Layouts
- Page Element Tags for Layouts
I started this particular Blog with the Minima template by Douglas Bowman. Once I understood the basics of the Blogger widget I opened up the Blog's Layout Tab and then selected "Edit HTML" from the sub-menu. In the Edit template section of the page I checked the "Expand Widget Templates" checkbox.
So here we are staring blankly at a text file that contains all the CSS and other little markup tidbits that form our blog layout. Did I mention you probably want to know a little CSS?
At the end of the CSS section I added a section for my customizations:
/* Customizations
------------------------------------------------ */
div.sharelinks{
float:right;
}
div.sharelinks a{
display:block;
text-decoration:none;
text-indent:-9999px;
height:16px;
width:16px;
margin-right:4px;
}
a.facebookshare{
background-image:url(yoururl.com/facebook.gif);
}
As you can see I defined 3 CSS classes. The first class is the div container for my button. I can use this class to position my button and more importantly it allows me to group all my buttons together should I decide to add more in the future. The next class defines all of the common attributes I would like for my share buttons to have. I'm using images for my buttons which is why I have the text-indent set to -9999px. The third class defines the image I want to use for my facebook button, insert your own image as needed.
So now we have to add the widget code that will display our div and our button. I decided that I wanted my buttons to line up with the first line in the footer of each post. To do this I had to locate:
<div class='post-footer-line post-footer-line-1'>
Now to add my button right below it:
<b:if cond='data:post.url'>
<div class='sharelinks'>
<a class='facebookshare' expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='blank'>facebook</a>
</div>
</b:if>
Give props to Dave Tips for the basic idea and code that lead to this version. Dave's version was an all markup no CSS version that helped me understand how these templates work.
The first bit sets a condition that states if there is a post url associated with this section of the blog evaluate as true. The markup contained within that if block is displayed each time it evaluates as true.
So the part that was not obvious to me that I learned from Dave's example is how the expr: tag evaluates on render. Notice that the quotes in the href have to be encoded as " also notice that the +data:post.url is outside the quotes. I'm not sure why this works and it seems counter intuitive to me but have no fear it does work. Perhaps someone can shed some light on this part for me?
We are done. All you have to do now is save your changes and go view your blog. Assuming you used the typical facebook 16x16 px icon, there should be a pretty little facebook button after each and every one of your posts.
