Considering site visitors spend 80% of their time above the fold, the best place to add a Facebook follow/like box would be in this area using the sidebar widget area.
However, there may be different reasons you don’t want or can’t do this which is the reason i have written this post.
This tutorial is based on the Genesis theme framework however i will also provide solutions for other theme users.
There’s 4 steps to adding any of the official Facebook plugins to your website:
- Choose which Facebook plugin you want to use and customize it
- Create a Facebook application
- Add the Facebook Javascript after the opening <body> tag in your theme.
- Add the Facebook plugin HTML code in the location you want the plugin to appear in your theme
These official plugins are all available from the Facebook Developers page and are different to the one and only official Facebook plugin created especially for WordPress.
Customize Facebook Like Box
Go to the Facebook Developers page and enter your Facebook url.
Customize the height, width and other display options for your box.
The Like Box is a social plugin that enables Facebook Page owners to attract and gain Likes from their own website. The Like Box enables users to:
- See how many users already like this Page, and which of their friends like it too
- Read recent posts from the Page
- Like the Page with one click, without needing to visit the Page
Source: Facebook Developers
Facebook Code After Post
Lots of different choices when it comes to using Facebook code in your theme.
I used the script which is dynamically updated if you display your like count, stream and faces of the people who like your page.
You’ll need to create an app if you use this script which is something i’ve done before when installing the official Facebook plugin.
If you tried pasting the html in your theme and it didn’t work, this is because you haven’t added the 1. Javascript SDK code after the opening <body> tag.
- The first step is to add this code after your <body> tag
- Then you’ll need to paste the html code where you want to use to display your Facebook box
You can add the 1. Javascript using a hook plugin and pasting the code into the hook field which executes immediately after the opening <body> tag.
Once you choose which code you want to use, paste it into your after post widget or Genesis Simple Hooks plugin field.
Some themes offer an after post widget others don’t meaning you will need to create this widget or simply use a hook plugin like i have.
Hook plugins enable you to display t code output in any area your theme uses a hook.
Here’s 3 popular locations you can choose from to display your likebox:
Content Hooks
- genesis_after_content Hook
This hook executes immediately after the content column (outside the #content div).
Post Page Hooks
- genesis_after_post Hook
This hook executes after each post in all loop blocks (outside the post_class() div).
- genesis_after_post_content Hook
This hook executes immediately after the genesis_post_content hook for each post/page within the loop.
Comments Hooks
genesis_before_comments
Hook
This hook executes immediately before the comments block (outside the #comments
div).
Other Themes Hooks
The Thesis theme also offers a free hook plugin & the Canvas theme by Woo themes offers a built in Hook Manager.
Using Shortcodes
You could also use shortcodes and display your likebox using 2, 3 or 4 content column classes which might be next to another social network follow button or even your subscribe opt in box.
Another option is to use a shortcodes plugin which offers social follow button shortcodes which you could simply paste into any hook field. This would easily be the fastest way to add a like or follow button anywhere your theme offers a hook location.
Hook plugins enable you to execute shortcodes in every hook location.
Facebook Plugin
Another option would be to use the official Facebook plugin which enables you to display a small subscribe or like button before or after your content.
Summary
Its clearly easier to simply install the official Facebook plugin if you want to add any Facebook plugin to WordPress.
If you prefer to use the Facebook plugin code, you’ll need to do a few things:
- Choose which Facebook plugin you want to use
- Create a Facebook application
- Add the Facebook Javascript after the opening <body> tag. (1. See Below)
- Add the Facebook plugin HTML code in the location you choose to execute the plugin code. (2. See Below)
Adding Facebook plugins to your site will help increase your connections and spread your content to friends of your Facebook friends.
Was This Tutorial Helpful?