How to Install the Facebook Like Button in WordPress
Posted: January 25, 2013 by Alex Chan
The Facebook Like Button is a popular, proven, way of generating social media feedback on the fly for your website. It enables users to immediately post their feedback and share the page with their friends. We've already seen the power of social media with twogirlsandapuppy so the more likes, the more views, and watch your social media presence sky rocket!
Before we start, the Facebook Like Button comes in many forms if you're using WordPress. There are dozens of very simple to install plugins but the method we prefer is installing the button using Facebook's provided API code. That's one less plugin on your WordPress install, and this method works on any website.
Facebook Like Button Widget
1. Visit Facebook's Like Button API page
The page gets periodically updated from time to time with useful information such as updates to their widget code. Each time you visit, take a little time to look for updates
2. Fill in the Form on the Facebook Like Button Page
Using the form, you can change the style of your Facebook widget to show the compact version, a change in text style, colors, and more. Fill in the form with the settings you like and put a hash(#) or anything into the URL field. We will change that to the dynamic WordPress URL later. Once you're ready click "Get Code".
A few tips:
- The box_count layout style is the one you generally see on websites
- The width of the box_count button is 44px
- The Send button doesn't work for every website
- The verb "Like", will receive more "Likes" then "Recommends"
3. Copy The Like Button Code
Facebook offers the code in 4 formats – HTML5, XFBML, IFRAME, URL. We prefer HTML5. You will want to avoid the iFrame and URL options if possible. The "App ID" is optional. It allows you to track likes, monitor insights, and add multiple administrators.
4. Paste the code on to your website where you would like the button to appear
Follow the instructions and paste the top portion of the code directly below thetag. Don't worry, it won't mess with your template. Copy and paste the bottom portion of the code where you would like the "Like Button" to appear.
5. Set data-href="<?php the_permalink(); ?>"
Change the dummy URL you used for the generated code with <?php the_permalink(); ?>. That's the dynamic permalink for your WordPress page. If can put whatever URL you want into this location. The variable will be different for different CMS'.
6. Upload the files to your server
Congratulations! Your Facebook Like Button widget is all setup.