How To Put A Facebook Like Button On Your Website

  • follow us in feedly
Published February 6, 2013 by Brad Knutson
Facebook Like

Adding a Facebook like button to your webpage is easy. There are several tools and WordPress plugins out there that can do this for you, but I find that working straight with the code is the easiest and safest way to add the button to your site.

You can easily customize your button by going to the Facebook Developers page for the Like Button: https://developers.facebook.com/docs/reference/plugins/like/.

I’ve chosen version of the button with the counter box on top, which show how many times the page has been liked.

Step 1. Include the below JavaScript SDK on your page once. Ideally, this would be put right after the opening <body> tag.

Step 2. Place the below code wherever you want the button to show up on your site.

The Result

That’s all there is to it.

Note for WordPress developers: I’ve found that when using the responsive WordPress twentytwelve theme (or child themes of twentytwelve) that the Facebook comment popup won’t display correctly. After reading through support forums and messing around with the CSS, I finally came across the following solution:

While this does work for devices with wider browser widths, I found that on the iPhone, the 450px width artificially widens the page. It doesn’t look very good. I decided only to add the CSS fix to larger screen widths.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">