How to Add a Responsive Facebook Like Box To Ning Networks

Post date: Sep 6, 2014 11:49:32 PM

How to Embed Responsive Facebook Like Box

There are times when you might not like to import the posts from a facebook page, but would rather just add a Facebook Like Box to your Ning community. However...

Sometimes Facebook Like boxes will break out of your layout..

Sometimes you want a like box in a sidebar and sometimes in a larger content area...

So...If you have been looking for a way to simply embed a facebook like box into your 3.0 template but have found yourself frustrated because it overflows your columns, here is a solution.

Solution to Embed Responsive Facebook Like Boxes

Other Cool Tricks for Importing Social Profiles to Ning

You can playaround with the code here on codepen or see it full screen here

Other cool related things you can do, if so inclined:

Import Entire Facebook Page Into Ning Page

Find Out How Here

Code to place inside an HTML textbox in Site Manager:

<div id="fb-root"></div>

<script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) {return;}

js = d.createElement(s); = id;

js.src = "//";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-wrap">

<h1>Responsive Facebook Like Box</h1>

<div class="fb-like-box" data-href="" data-width="992" data-show-faces="true" data-show-border="false" data-colorscheme="light" data-stream="false" data-header="false"></div>


*replace the red with your own page url

Code to place inside your Advanced CSS:

.fb-wrap {


margin: 0 auto;


.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }

Import Facebook Pages to Ning Networks

Import Google+ Photos and Photo Albums Into a Ning Page:

Find Out How Here

Import Google Plus Photos to Ning

Add Pinterest Boards To a Ning Page: Tip Here

Comments and questions below, or contact me for any custom work you may need.