Experiments with Flipboard and Ning Networks

posted Feb 22, 2015, 2:00 PM by Jaybird Farrow

Using Flipboard for Community Building

This Ning tip / trick / hack assumes the following:

  • You use Flipboard as a way to give legs to your posts and content inside your network
  • You've added the Bookmarklet to your browser toolbar and regularly add content from your network to your magazines
  • You'd like to then embed your magazines into your Ning Site. (For example)

Here's how to do this:


Step One

Step One: Add something to a magazine on your flipboard like so:

After clicking the title of the magazine you added it to, you will be taken to the page for that magazine.  Make note of the URL. 

This Example: https://flipboard.com/section/beautiful-nation-project-bddZSO



Step Two

Find a page you'd like to add the magazine to on your site or add a new page to hold the magazine

Step Three

Add the following snippet of code to a HTML Module:Find a page you'd like to add the magazine to on your site or add a new page to hold the magazine

<div id="flipboard"></div>


Step Four

Add the following snippet of code into the Above Footer HTML Box on that page, replacing the XXXXX with your own magazine URL from step one.

<script>
  (function () {
    var width = 0,
        flipboard = document.getElementById('flipboard');
    width = flipboard.getBoundingClientRect().width ? flipboard.getBoundingClientRect().width : flipboard.offsetWidth;
    if (width > 800) {
      flipboard.innerHTML = '<iframe width="100%" frameborder="0" height="600px" marginheight="0" marginwidth="0" scrolling="no" src="https://flipboard.com/section/XXXXXXXX"></iframe>'
    }
  })();
</script>


And There You Have It

And there you have it!  Live Example on Beautiful Nation Project

Enjoy!  Let me know if you have any questions. 


Comments