How to add new Facebook Like Box to Genesis WordPress

Do you promote your business, website or blog on Facebook using Fanpage feature? If yes, then you can easily get more likes and subscribers to your fanpage by adding the “Facebook Like Box” to your website or blog. Facebook has launched new look “Like Box” that features a big cover image along with other options like: thumbnails photos of people who ‘liked’ your FB page and stream of latest FB page updates.

New Facebook Like Box for WordPress Genesis sites

Generate code for new Facebook Like Box

1. Open the new Facebook Page Plugin webpage.
2. Type URL of your Facebook page. You should see preview of the Like Box for your FB page.

Get code for new Facebook Like box

3. Enter height and width values for the Like Box. If you are using a modern responsive theme, you can skip entering the explicit height and width values. Just leave those options blank.
4. Enable or disable options: hide cover photo, show friend’s face and show page posts as per your requirement.
5. Click the Get Code button.

Add Like Box code in Genesis Theme

1. Go to Genesis > Theme Settings. Click to expand ‘Header and Footer Scripts’ section.
2. Copy the first part of the code and paste it in the second box (for wp_footer) on the Genesis Theme Settings page.

Code usage of new Facebook Like Box

3. The second part of the code should be used where you want to display the Like Box. For example, to display the Like box in the sidebar: go to Appearance > Widgets, drag a text widget to the ‘Primary Sidebar’ and paste the code in it.

Add Like Box code in any WordPress Theme

1. Ideally, first part of the code has to be added to header.php file. Instead of manually editing files, you can use header and footer scripts plugin that adds a setting panel as seen in the Genesis theme method above.
2. Then paste the script code in header or footer box.
3. Second part of the code should be added where you want to display the FB Like Box, like: the Primary sidebar area or footer widgets.

Note: Article re-written. Originally published on Sept 16, 2012.

iGuiding Make Websites

Create a 'Happy' website today

An awesome Mobile Responsive website powered by: Genesis Framework, WordPress, HTML5, CSS3 & personal attention.


  1. Steven says

    works well on a site I’m building but it does kill my backgrouns and can’t figure out why, I know it’s the first or top part of the html5 code

    • Steven says

      I managed to fix this myself, if anyone else has a similar problem, I just enclosed the first tag part of the html5 code in another div ie …
      using WP 3.4.2 and Atahualpa theme v3.7.9

Leave a Reply