Arts Assistance

  • About
    • Frequently Asked Questions
    • Testimonials
    • Resources
  • Services
    • Website Care Plans
    • Website Inquiry Form
    • Design Evaluation
  • Portfolio Examples
  • Blog
  • Contact

Skip the Plugin – Add the Facebook Like Box to Your Sidebar Like a Pro

February 13, 2013 by Nancy Seeger

DYI Facebook LIke BoxThere seem to be a lot of Facebook Like Box plugins many just imitating the one directly available from Facebook. I’ve tried several of them and found most of them weren’t that flexible and a bit awkward to customize. Also, it means one more plugin to track and maintain with updates to ensure security. That to me is not a timesaver but a time drain. We all love to save time so let’s skip the plugin!

Can you copy and paste and also login to your WordPress dashboard (admin privileges)? I have great news then; you don’t need to be a coding pro to add the Facebook Like Box to a sidebar on your website! You just need to follow a few simple steps.

Step One – Get the Widget Code

  • First copy your Facebook Page URL. Example: https://www.facebook.com/ArtsAssistance
  • Measure the width of your sidebar (if you have existing boxes there, use a plugin like MeasureIt, an add-on for FireFox and Safari). Notate the pixel width of your sidebar.
  • Go to https://developers.facebook.com/docs/reference/plugins/like-box/
  • Fill in the Facebook Page URL you saved and width you notated into the form. You will see your Facebook Like Box example populate to the right.
  • For the height, I found 215 to work for me but you may need to adjust to fit your needs. Check the example on the right as you continue filling out the form.
  • You can leave selected “Show Faces” if you desire (highly recommend, this is after all a social network and who doesn’t like to see their friends?).
  • For Color Scheme, recommend selecting “light” which will work for most themes.
  • Do you want your Facebook Page comments to show? Leave clicked on “Show Stream” however, I don’t recommend it. Due to the space constraints of most sidebars it will be too long and take away from other items you are promoting. Recommendation – uncheck.
  • Ah, this is the big decision area. Do you like the border colors? Maybe you are fine with it – if so leave blank and Facebook’s branded colors will stay in place.
  • Not a fan of the border colors? With many themes this isn’t a good fit. If your sidebar background color is white, put in “#ffffff” without the quotes and presto – no borders! Less distracting also. Another good color for borders “#cccccc.”
  • Suggest clicking off “Show Header;” most people will figure out a Like button.
  • Click on “Get Code” and copy the output (if you need to paste temporarily, paste into a Text Edit for Mac or NotePad for the PC).

Step Two – Paste In Your Newly Generated Like Box Code

  • Login to your website’s WordPress dashboard (example http://www.yoursite.com/wp_login.php).
  • Go to the left to “Appearance” and then “Widgets.”
  • Click and drag “Text” to the Main Sidebar area. You can add it to the bottom of the listing or based on your marketing priorities. Since the Facebook API can be slow to load at times, I don’t suggest the top.
  • On the sidebar “Text” you just dragged, click on the down arrow to open the box.
  • Skip the title form area and paste your newly created code into the second form area. Click on the “Save” button.

Congrats, you now have a Facebook Like Box! Boy you are awesome!

For the Coders

Noticed the script file link? You can put that in your footer file before the body tag closes unless you prefer the box to load more quickly. The instructions from Facebook are to put it immediately after the body tag opens. I took the risk of placing the script in the widget box to give myself the option of turning off the Facebook Like Box on pages it may not be needed and preferably not requiring the script for every page.

Filed Under: Website tips

Get More Tips For Your Website

"*" indicates required fields

Comments

  1. Angela says

    March 12, 2013 at 2:37 am

    Thank you so much for this! Easy and straight forward, worked like a charm. I just used the code once pasted to find and adjust the data width, refreshing and checking.

    • Nancy Seeger says

      March 21, 2013 at 2:31 pm

      Hi Angel,

      I’m glad to hear that worked out for you. Would love to see it in action – can you send me the link or post here?

      Kind regards,
      Nancy

Testimonials

"...We have been working with Nancy Seeger and Arts Assistance for a number of years. In all that time, we have found her to be extremely professional, highly skilled and knowledgeable, very responsive and a joy to work with...." [ Read More ]

"Thank you for your hard work in bringing our latest website to life. We’ve done three web properties together, and they keep getting better and better!..." [ Read More ]

Latest Posts

  • Annual Website Checkup for 2022
  • Where Did My StudioPress Theme Go?
  • Keeping Your WordPress Website Hack Free
  • Increase Ticket Sales in Social Media with Better Website Links
  • Hidden Trap – Critical Quick Step To Protect Your Website Domain

Receive Website Tips

"*" indicates required fields

FacebookLinkedInTwitter

Copyright © 2025 · Arts Assistance · Website Design Services in Fairfax, VA · Privacy Policy · Contact Us

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Cookie settingsACCEPT
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT