Skip to main content

How to fix the Facebook Like Box width

Screen_Shot_2013-06-14_at_7.09.43_PM.png

A few days ago Facebook changed the minimum width of their like box to 292px. This has affected most sites on the web.

Because the sidebar on most of our stock themes is smaller than this, the change caused the like box to stretch out of the container...and that just doesn't look good.

NationBuilder rolled out a special fix for all of our stock themes, but those that have been customized need to take a few extra steps to get their Like box back to normal. 

Official response from

If you have a custom theme and have modified either _columns_2.html or _supporter_nav.html, you can apply the fix by wrapping the like box snippet in a div with a new class called "fb-like-box"

Screen_Shot_2013-06-14_at_9.48.26_PM.png

Sample Embed Code:

<div class="fb-like-box"><fb:like-box href="{{ site.broadcaster.facebook_page_profile_url }}" width="240" show_faces="true" stream="false" header="false" colorscheme="{{ site.facebook_colorscheme }}"></fb:like-box> </div>

Custom Widths:

If you want a custom sized like box less than 292px wide, you can also wrap the embed code as shown above, but modify the width value to whatever you'd like both in the embed code, and by adding this class to the theme.scss:

.fb-like-box iframe { width: XXpx !important; }

You can also implement a different solution, like others mentioned here.

Remember: the FB like box needs to be updated in both the columns_2.html (view for logged out users) and the _supporter_nav.html (view for logged in users).

Share this post

Showing 2 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.