How to Embed New Facebook “Like” Button on a Tumblr Blog

Facebook recently, as in a couple of hours ago, released a bit of handy functionality that allows you to install a “Like” button on any webpage. Obviously, this has some pretty cool web traffic implications considering that it acts just like a Like button on Facebook (even looks the same). Anyhow, enough about that, here’s the “How To get this button installed on your blog” (this is specifically for Tumblr- however the same principal applies for other platforms). Joel Leo should take a huge bow for helping me out on this, a true genius you are, sir.

1. First off, grab this code:

<div><iframe src=”http://www.facebook.com/plugins/like.php?href={Permalink}&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:300px; height:75px”></iframe></div>
The {Permalink} in the above code is the link of the post that the “like” button shows up in. You can customize your Like button here http://developers.facebook.com/docs/reference/plugins/like

2. Then head on over to your Tumblr custom HTML settings; you should find this under the “Theme” tab, and paste it into where you’d like the Like button to go. Note: I put the button below the body of the text– your HTML code probably looks very similar to mine- look for the <p>body</p> paste the Facebook HTML right after this. See the location of the FB code in the pic below.

3. Now that you have that pasted in there all sung like. Grab this code:

<meta property=”og:title” content=”{block:PostTitle}

{PostTitle}

{/block:PostTitle}”>

4. While still in the custom theme dashboard on your Tumblr account, head to the top of the page. Paste the code above into right after the Title block of code, see picture below:

What this effectively does is change what your friends on Facebook see when someone likes a post. Rather than seeing that Sally “liked this blog” (default functionality if you don’t do steps 3 and 4) people will see: Sally liked “Title of Post.”

5. Save your work and you’re done.

example: http://imaclurg.tumblr.com/post/539046048/how-to-embed-a-new-facebook-like-button-on-tumblr

Note: I still haven’t figured out how to format the location of the like button when a blog title doesn’t have a post (defaults to the top of the post rather than the bottom). When we figure it out, I’ll post it.