How To Add Facebook Like Box Below Post Content Area

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.

Video Tutorial

Comments

3 responses to “How To Add Facebook Like Box Below Post Content Area”

julien

July 17, 2014

Hi Brad, I am a newbie with wordpress. I don’t know why but I am not able to activate the facebook like box using your way. I use TERRAGON child theme, do you think there is a problem with this theme? I want to put the like box in my footer (Four widgets are activate in the footer)

Thank you for your help

Log in to Reply
1. Brad Dalton
  
  July 17, 2014
  
  Hello Julien
  
  I would install the Facebook plugin or Jetpack which includes a Facebook Like box.
  
  The code on this page has been tested however it cannot be tested on every theme.
  
  Log in to Reply
  1. julien
    
    July 18, 2014
    
    Thank you for yours reply. I tried different plugins (included jetpack) but it still doesn’t work. I asked on terragon’s forum support and I am waiting for a reply.
    
    Log in to Reply