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.
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.
Advertisements

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

  1. I tried step 2 on a page of my wordpress blog and, after I updated the page, I only ended up with the following code:

  2. Zeitgeist says:

    Hi, I’m trying to embed this on my tumblr, but It didn’t work. I use the cargo Theme, do you know where I have to pute the code, to allow visitors to “like” a specific picture ?

    Thx,

    ZG.

  3. Zeitgeist says:

    IT works now ! Thank you !

  4. Jon Pape says:

    Positions the Like button:

    ________________________________________

    App Info (replace 104403936268919 with your own id):

    window.fbAsyncInit = function() {
    FB.init({appId: ‘104403936268919’, status: true, cookie: true,
    xfbml: true});
    };
    (function() {
    var e = document.createElement(‘script’);
    e.type = ‘text/javascript’;
    e.src = document.location.protocol +
    ‘//connect.facebook.net/en_US/all.js’;
    e.async = true;
    document.getElementById(‘fb-root’).appendChild(e);
    }());

  5. MGM says:

    I can’t make step 2 work. Step 1 works pefectly, the button is embeded but with the generic tumblr blog name problem. But when inserting step 2 code, the html gets an invalid error and can’t save it.

    Any thoughts?

  6. Zeitgeist says:

    Same for me, the <meta property=”og:title” content=”{block:PostTitle}
    {PostTitle}
    {/block:PostTitle}” just displays " when showing the source ….

    Thanks for your help !

  7. grsml says:

    I originally got the code from here: http://developers.facebook.com/docs/reference/plugins/like if that helps at all.

  8. jerrell says:

    can’t get the 2nd part to work either..it just pulls my tumblr sites name and not the post name..or is that what its suppose to do?

  9. Casey says:

    Awesome! I am pretty sure mine is working!

  10. Andrew says:

    I snooped around in the HTML for my Theme and found where to put it to place the button where I want it. However, there is no button. There is only a small window through which I can see a screen that says the website doesn’t exist. I don’t know if this is a problem with the Permalink in the code or what. I know very little about HTML. I will leave my code as is in case you would like to visit the website and see what I am talking about.

    Regards, Andrew

  11. Aline says:

    Do you know how to put the like buttom to the blog instead of the posts, at Cargo Theme?

    Thank you.

  12. Mike says:

    I was wondering if the same theory that makes the “Like button” unique to each blog post could work with the Facebook Chat box as well. Right now our chat box is the same across all blog posts.

    Thanks!

  13. jwolfepr says:

    Great tutorial — worked perfectly for me, and now I have a better understanding of how themes work. Thanks!!

  14. James says:

    Can you make a fb LIKE link that likes 2 things simultaniously

  15. I have the cargo theme on my tumblr blog, please can you explain where exactly to paste the code in this case. Thank you.

  16. Vlad says:

    Hello and good morning! Regarding the location of the button you can do this:
    – Inside the iframe, insert this position:fixed;top:xx%;left:xx%; so the code looks like this

    //www.facebook.com/plugins/like.php?href=Permalink&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font&height=21

    Hope this helps! Have a nice day!

  17. Analytical says:

    For some reason, on my blog the like box alternates on certain posts, like its on the bottom for some and its on the top for others, but it works. Is there anyway that I can get the box to be on either the bottom or the top?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: