How to Add a Responsive Facebook Like Box To Ning Networks

posted Sep 6, 2014, 4:49 PM by Jaybird Farrow [ updated Sep 6, 2014, 4:52 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

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); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
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="http://www.facebook.com/landsurveyorsunited" data-width="992" data-show-faces="true" data-show-border="false" data-colorscheme="light" data-stream="false" data-header="false"></div>
</div>

*replace the red with your own page url

Code to place inside your Advanced CSS:

.fb-wrap {
  width:50%;
  margin: 0 auto;
}

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

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

Import Google+ Photos and Photo Albums Into a Ning Page:
Find Out How Here

Add Pinterest Boards To a Ning Page: Tip Here

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