How To Add Facebook ‘Like’ Button To Your Blog or Tumblr – UPDATED

Updated in May 2012

There doesn’t seem to be a simple step-by-step guide on the web so I’m writing this, particularly for Tumblr users but it will apply to other platforms too…

STEP 1:

Copy this code:

<meta property="og:title" content="{block:PostTitle}{PostTitle}{/block:PostTitle}"/>
<meta property="og:site_name" content="{Title}"/>
<meta property="og:image" content="{PortraitURL-128}"/>

STEP 2:

Go to tumblr.com/customize and click ‘Edit HTML’. Paste the code above somewhere after <head> and somewhere before </head>.

STEP 3:

Copy the code below and paste it into your theme code so it appears in the footer of each post, somewhere after {/block:More} and somewhere before {block:Permalink}:

<iframe src="https://www.facebook.com/plugins/like.php?href={Permalink}&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=evil" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:165px; height:24px"></iframe>

You can play with the width to make the text appear as one or more lines. You may also have to experiment with pasting that code in different places to get the Like button to show up where you want it.

STEP 4:

Save your theme changes and check out your blog. You can see an example at the top of this very post 🙂

For more info from Facebook go here or drop me a line.

Want to learn new creative and marketing skills with me? Check out upcoming courses on topics like SEO, content marketing, copywriting and podcasting.


What's trending in digital

Stay on top of the latest news, tips, tools and updates in digital. Just for people in marketing and business. No fluff, no ads, no spam.
Join thousands of readers keeping abreast with it all, every Thursday.