Adding a Facebook Like button to your WordPress site

Adding a Facebook Like button to your WordPress site

Adding a Facebook “Like” button to your WordPress site is a great way to connect socially with your audience and to drive traffic to and from your site and your Facebook page.  This post will cover two ways to add a “Like” button to your site, and each requires a Facebook App ID and an Admin ID.

There are a lot of steps here, so be ready to spend a few minutes going through it.

What’s an App ID and where do I get one?

When you add a “Like” button to your site, you’re creating a mini web service or application.  The App ID (also known as an API Key) is a string that uniquely identifies your application.  To get a Facebook AppID, log into Facebook as yourself and then type “Developer” into the FB search bar and then click the “Apps” link.  You can also navigate to this URL directly, but make sure you are logged into FB first: developers.facebook.com/apps.  Then follow these steps.

  1. Click on Create an App.
  2. Type in an App Name.  This should be descriptive like SiteName_FBLike.  Name has to be fewer than 32 characters and not infringe on anyone else’s copyright.
  3. Adding a Namespace is optional.
  4. Pick and App Category from the drop down.
  5. Leave the Web Hosting box unchecked (we will be using your blog’s web hosting).
  6. Click Continue.
  7. Complete the Captcha security check and click Continue. Facebook will take you to the “Basic” page for your new App ID/API Key.
  8. Change the contact email, if desired.
  9. Disable sandbox mode.
  10. Click “Website with Facebook Login”
  11. Type in the full site URL (with protocol — that is, with the http:// or https://).
  12. Click Save Changes.
  13. Copy and paste the App ID into a text file to use for later.

What is an Admin ID and where do I get one?

For security, each Facebook account is assigned a unique set of numbers called an Admin ID that identifies your account.  To get your Admin ID, here’s what you do:

  1. Log in to Facebook.
  2. Navigate to the page you want to see the Admin ID for (that is, your business ororganization’s page).
  3. Change the URL from www.facebook.com to graph.facebook.com.  This shows a view of your site’s identifying data that is used Facebook’s Open Graph protocol.  The first ID number that you see is your Admin ID number.
  4. Copy and paste the Admin ID into a text file to use for later.

OK! Now into the nitty gritty….

Add the “Like” Button method 2: with Facebook generated code

Facebook’s developer site includes a code generator for the “Like” button.  The most important field is the URL of the site you want to like. The other fields change how the like button displays, and the code generator displays a live preview of what the plugin will look like as you change the options.  When you are done tweaking the display, click the Get Code button to generate your code.

Facebook will generate two snippets of HTML5 code.  Notice that the snippet references your App ID, and you have the option of switching App IDs if you accidentally generated this code with the wrong ID.

Add the first snippet to your website HTML, inside the <head> tags.  You can use a WordPress plugin like Header Footer to quickly add this code from the front end; or, your site theme or template may include a place to put head code.  Add the second snippet of code wherever you want the plugin to appear on your page.

This is great for static pages or widgets, but if you want to add the like button to every blog post automatically, you need to edit your page template (for example, in WordPress you might edit the ‘single.php’ template).  This can get a bit tricky, and you may choose instead to use method #2 for adding the Facebook “Like” button.

Facebook Like Button plugin code

Facebook Like Button plugin code

Add the “Like” Button method 2: with a plugin or extension

There are a number of CMS extensions out there that will let you add social sharing and functionality to your site.  I recently used this WordPress plugin for a client who wanted her visitors to be able to “Like” individual blog posts.

  1. Always take a back up of your site before you install a new plugin.
  2. Install the plugin per the developer’s instructions.
  3. Activate the plugin.
  4. Edit the plugin settings.  This plugin has settings for “Like” and “Recommend”.  Notice that the plugin requires both the App ID and the Admin ID.
  5. Modify the general and layout settings as you want the plugin to display.  Note the check boxes in this plugin that allow you to choose where you want the plugin to display.  If you choose “Show in Posts” the plugin will be added automatically to each new blog post.  You can also choose if you want the post to appear before, after, or before and after the post.
  6. Save your changes.

Then you’re done!

Facebook Like WP Plugin

Facebook Like WP Plugin

To test the plugin, go to any one of your existing posts, or create a new one.  “Likes” appear on the visitor’s timeline under “Recent Activity.” “Send” sends the post to a visitor’s FB inbox.

Facebook Like Button Blog Example

Facebook Like Button Blog Example

Blog

Leave a Comment

Your email address will not be published. Required fields are marked *