How to Embed a New Facebook “Like” Button on Tumblr
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 embedded 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.
- First off, grab this code:
<iframe src=”http://www.facebook.com/plugins/like.php?href={Permalink}&layout=standard&show-faces=true&width=450&action=like&colorscheme=light” scrolling=”no”frameborder=”0” allowTransparency=”true” style=”border:none; overflow:hidden; width:300px; height:75px”></iframe>
The {Permalink} is where the Facebook like button will go. Like the button here.
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 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 [insert post title] “10 reasons I love unicorns.”
5. Save your work and you’re done.
Note: I still haven’t figured out how to format the location of the Like button when a blog post doesn’t have a title (the button defaults to the top of the post rather than the bottom). When we figure it out, I’ll post it.
