Add a Facebook Like Box to Your Blog’s Design - dummies

Add a Facebook Like Box to Your Blog’s Design

By Melissa Culbertson

Social media widgets such as a Facebook Like box allow you to invite readers to endorse your blog on Facebook. A Facebook Like box displays a reader’s friends who follow you, your latest Facebook fan page posts, or both.

Facebook is the most popular social media platform, but you can add other social media widgets to your blog, including widgets for Twitter, Pinterest, and Instagram.

If you’re on, you can also find plug-ins for all these, but remember that using too many plug-ins can slow down your blog’s loading time. Using widgets that create HTML code for you to place into your blog’s sidebar or footer avoids the use of plug-ins.

  1. Visit the Like Box Developers page.

    You’ll find the Facebook Like Box Developers page here. In the center of the page, you see a sample Find Us on Facebook box.

  2. Type your Facebook page’s URL into the first field.

    When you press Tab to go to the next field, the sample box changes to your own page’s feed.

  3. Customize the Facebook Like box as needed.


    You have a few fields to select your preferences:

    • Width and Height: The width is typically set to the width of your sidebar. Select a height as well if you want to constrain the box to a certain height; otherwise, the height is determined automatically.

    • Show Faces: Leaving this setting checked shows the faces of a visitor’s friends who also like your Facebook page. This can help build your credibility because if their friends like your page, then they may be missing out!

    • Color Scheme: Select either light or dark.

    • Show Stream: This shows your latest Facebook posts, and a visitor can scroll through them right from your blog page (although they can’t comment, Like, or share them). Displaying this can pique curiosity and drive more Likes.

    • Border Color: Enter this value as a hex color code (#xxxxxx) or by writing in a common color name (red, blue, and so on).

    • Show Header: Deselecting this makes the Find Us on Facebook header disappear.

  4. Click Get Code.

    This brings you a box with various types of code to copy and paste into your own blog.

  5. Click the IFrame tab; then copy and paste the code.

  6. Add a widget for Text (WordPress) or gadget for HTML/JavaScript (Blogger) to your sidebar.

  7. Paste the content into the HTML field.

  8. Save your changes.

    If you visit your home page, you see your customized Facebook Like box in your sidebar.

To prevent your sidebar from becoming overwhelmed with too many social media widgets, select the ones that are the most important to you.