How to Set Up a Facebook “Like” Button on Your Blog Posts

Allowing people to interact with social media without leaving your website is one great way to encourage users to share blog posts with their friends. Showing how many other people also have shared your post gives it social proof even without someone logging onto Facebook to check it, and clicking Like takes less time than adding a comment.

Plus, adding a Like button is easy! Check out the steps below.

Decide where to put it

Pick a spot for your Like button. Both the beginning and end of a blog post are common locations: the beginning allows you to show off social proof before a reader begins, while the end encourages people to click it immediately after they’ve finished reading.

You can include your Like buttons as a part of your template – talk to your designer to set that up – or you can include the Like button code directly in your post. Facebook will generate the code (as you’ll see in the steps below), so just make sure you copy and paste the code into the HTML view of your post, not into the WYSIWYG editor.

Customize your Like button

The first step is to check out the Facebook Developer’s Like button page. This detailed page gives you forms to generate your Like button, and also includes a number of FAQs and usage tips.

At the top of the page is Step 1 – Get Like Button Code.

 

This form shows you how many different ways you can customize your Like button, and the Like button displayed on the right will change to reflect the changes you make. Check out what each of the fields means:

• URL to Like
  If you leave this blank, the button will automatically like the page that the person is viewing.
• Send Button
  The Send button gives people an option to send the link as a message, and it still counts toward your Like button total count. However, if this is checked, you will only be able to use XFBML (learn more about this below).
• Layout Style
  There are three different layout styles to choose from:
  • Standard: Displays the Like button and social text, and photos if applicable. Minimum size is 225×35 (without photos) or 225×80 (with photos).
  • Button_count: Displays the number of likes beside the Like button. Minimum size: 90×20
  • Box_count: Displays the number of likes above the Like button. Minimum size: 55×65
  • Width
    Change the width of the Like button to add extra padding on the side.
  • Show Faces
    If this is checked and you are using the standard layout, your site will show mini photos if friends of a user like a certain page.
  • Verb to display
    You can actually display a Like button that doesn’t say Like: you can change it to say Recommend.
  • Color Scheme
    There is a less-common dark color scheme that makes the Like button and dialog grey instead of white.
  • Font
    Pick one of a few different sans-serif fonts if you really want the Like button to match your site.

Remember – you can play around with these options until you find a layout you like. Once you do, click Get Code. A pop-up will display your plugin code.

Don’t worry, you don’t have to be able to read this code, just copy and paste it. But wait – there are two different codes there! Which should you use?

XFBML vs. iframe

The two different codes are the same information in two different languages. If you don’t want to tweak anything else on your page, pick the iframe code – it should work right out of the box.

However, if you want to get a little fancy and you can change the code of your whole website (not just the blog post), you can make a few tweaks and use XFBML. XFBML uses Javascript to make the Like button a little more interactive, like dynamically resizing the photos displayed and allowing a user to make a comment or send a message through Facebook instead of just clicking Like. To use XFBML, you need to add the Javascript SDK, something that’s a little more detailed than we’ll go into here.

Check out the Facebook Developer pages for more information, and other things you can do to further integrate Facebook with your website or blog. Get ready to start being Liked!