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.

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.

Share on LinkedIn

Davinder Singh Kainth

A digital creator with 15+ years of experience in Website Design, Development, SEO, and Content Creation to Podcasting at SmartWebCreators.com with the motto of "Be Smart, Keep Creating". A coach, consultant, and your dear geek friend ❖

7 Comments

  1. kwil87 on October 19, 2012 at 11:23 pm

    It does not work. Is this supposed to work with all themes?

    Reply
    • Editor on October 24, 2012 at 3:31 am

      It is universal code that works on every platform. Make sure you paste 2 codes in correct files in your blog.

      Reply
  2. Steven on December 23, 2012 at 6:22 am

    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

    Reply
    • Steven on December 23, 2012 at 7:27 am

      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

      Reply
  3. joe on December 31, 2012 at 1:58 pm

    please help me with the code to add facebook likes on my website

    Reply
  4. Raghav Malhotra on January 8, 2017 at 6:05 am

    Hey! first, everything go marvelous!!! thanks a lot by the code. But i have a question… how can i do the same but with a twitter teets box?

    again, your code was perfect!
    see ya!

    Reply
  5. Jessica on January 24, 2017 at 5:26 pm

    Finally! Something easy to understand. Thank you, thank you, THANK YOU! So glad I don’t have to install another plugin.

    Reply

Leave a Comment