Adding Twitter and Facebook buttons to Tumblr
I just finished adding the tweet and like buttons to my site and was amazed how both simple and complicated it was. I found many good sites with helpful information but none had the exact combination I was looking for. So here is how I finally got it to work the way I wanted. Hopefully this will be as helpful to someone else as the other pages I found were to me.
Let me start by thanking the Author of the Tumblr theme. I am using a heavily modified version of the Netpad theme from Jumplex. It offered a great starting point that was very close to what I wanted, but more importantly it was very cleanly put together and easy to modify. Thank you Jumplex, your work is very appreciated.
This theme has many nice features, including Disqus and Google Analytics support. But I wanted to add support for Twitter and Facebook buttons. The first place you might start, as I did, is the Facebook “like box” page. This page offers a wizard for configuring your like box.
It produces a code block that can be used to put the info box on the page. It offers both an iframe and an xfbml option. I chose the xfbml option because I was going to be putting both a site like box and a like button on each post.
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1”></script>
<fb:like-box href="http://www.facebook.com/pages/CanyonRcom/189359354428289" width="225" show_faces="false" stream="false" header="true"></fb:like-box>
But the code produced doesn’t fit smoothly into the dynamic nature of the Tumblr template engine. So I moved the script tag into the <head> section of the template.
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1”></script>
I then added a meta tag to the template.
<meta name="text:Facebook URL" content="" />
This puts an entry under the Appearance menu to input the URL of the facebook page. I was then able to add my facebook page address to those settings.
And I added this block to the code for the sidebar layout.
{block:ifFacebookURL}<fb:like-box href="{text:Facebook URL}" width="225" show_faces="false" stream="false" header="true"></fb:like-box>{/block:ifFacebookURL}
This gave me a site wide box linked to my facebook page for the site.
Now to get twitter and facebook buttons for the individual posts.
Again Face book offers a wizard for the like button that allows customization the layout of the button and presents a code block to insert into a page.
In similar fashon to the like box, the button offers both and iframe and xfbml code. This code is a good starting point but isn’t perfect because I need a custom URL for each posting.
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1”></script>
<fb:like href="http://canyonr.com/post/3355399522/online-safety-info-for-your-non-tech-friends" layout="button_count" show_faces="false" width="55"></fb:like>
The script tag is the same one I already added to the <head> of our theme. This allows me to focus on the fb:like tag. It currently contains the URL of a specific article, I needed to substitute the code for each article. The Tumblr theme docs gives the {Permalink} variable that I can use to insert the URL for each article. Fortunately several other pages suggest using the {URLEncodedPermalink} variable instead. This gives a small block of code to insert to get the like button.
<fb:like href="{URLEncodedPermalink}" layout="button_count" show_faces="false"></fb:like>
Now, where to place it. I put it with in the <div class="detail"> and <div class="ndp"> portions of the theme. For other themes, it can be included at the end of the section that shows up at the bottom of each post.
The twitter button is slightly more complex because of the options they allow. The wizard for the Tweet button only gives a few settings but the dev page lists all of the properties that can be passed.
Once again we get a script tag to add to the <head> of our theme.
<script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>
The twitter button is an <a> tag in order to facilitate browsers that don’t support scripting. I modified the default tag to include several options, most importantly the data-url setting. By using Tumblr’s {ShortURL} tag I was able to send the same shortened URL to twitter that Tumbler’s built in twitter posting uses. I also added a | after the {Title} to give a little visual seperation to the URL.
<a href="http://twitter.com/share" class="twitter-share-button" data-url="{ShortURL}" data-text="{Title} |" data-count="none" data-via="canyon">Tweet</a>
I placed the Tweet button infront of the Like button because when the page has no likes the number baloon isn’t present but the space is still there. Since I wasn’t going to show the count for the tweets, I think it looked better in that order.
But wait, they aren’t lined up. The Tweet button is at least 6 pixels higher than the Like button. What a travesty. Why wouldn’t the competing social giants work together to make sure there buttons looked good together. Turns out this is configured to look correct in IE and looks wrong in Chrome. After much searching I found some ideas on how to resolve this and decided on creating two new span areas to contain the buttons and “fixing” the floating property for each.
I attached some CSS to the end of the section for the containing <div> tags.
#content .detail .ndp .social_buttons {vertical-align: top;}#content .detail .ndp .social_buttons .twitter {vertical-align: middle;}
I then wrapped the buttons in corresponding <span> tags. My final button code is:
<span class="social_buttons"><span class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-url="{ShortURL}" data-text="{Title} |" data-count="none" data-via="canyon">Tweet</a></span><fb:like href="{URLEncodedPermalink}" layout="button_count" show_faces="false"></fb:like></span>
This, somehow, gets the buttons to line up and look correct in both browsers.
And now I have Facebook and Twitter integration for each post and for my site as a whole. I hope this helps the next person who is trying to decipher the confusing realm of social buttons and tumbler themes.
