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
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; }
Import Google+ Photos and Photo Albums Into a Ning Page:
Add Pinterest Boards To a Ning Page: Tip Here
Comments and questions below, or contact me for any custom work you may need.