Experiments with Flipboard and Ning Networks

Post date: Feb 22, 2015 10:00:13 PM

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.