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 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.
- 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
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:
- 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.
This hook executes immediately before the comments block (outside the
Other Themes Hooks
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.
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.
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 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.
Subscribe for new Genesis Tutorials