Tip: How to Embed Flipboard Into Ning N3/N2

[⚡JFarrow⌁]

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: 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:

<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!  Live Example on Beautiful Nation Project

Enjoy!  Let me know if you have any questions. 

[⚡JFarrow⌁]

Thank you John... was a real treat to get it working

[⚡JFarrow⌁]

Thank you John... was a real treat to get it working

[Kos]

We were just looking at Flipboard last week.  Awesome.  Thank you!

[⚡JFarrow⌁]

flipboard is pretty amazing for what it is and the ease of building magazines.. i hope you guys find this useful!

[Fire-Tech]

+1. I have thought about this a few times. Will have to dig in. Thanks for sharing man.

[⚡JFarrow⌁]

My pleasure FT...kinda opens a few doors huh..

[Fire-Tech]

yeah, I have a few ideas. Will post back when I get time to mess with them.

[George H. Compton IV]

This is cool thank you for sharing  JFarrow :-)

[⚡JFarrow⌁]

np GC!

[⚡JFarrow⌁]

Bonus Tip for Flipboard:  If you would like to display your magazines in a compact fashion like this,

here is a simple code for you to alter to plug into a HTML module on your site, replacing the BOLD with the magazine of your chosing:

<table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="text-align: center;"><iframe height="200" width="150" name="flipboardmagazine" style="border:0; display:inline-block; height:200px; width:150px; vertical-align: middle;" src="https://flipboard.com/cover/beautifulnationproject-bziGbU"></iframe>
      <script src="https://cdn.flipboard.com/web/buttons/js/flbuttons.min.js" type="text/javascript"></script></td>
      <td style="text-align: center;"><iframe height="200" width="150" name="flipboardmagazine" style="border:0; display:inline-block; height:200px; width:150px; vertical-align: middle;" src="https://flipboard.com/cover/earthly-bWYq7m"></iframe>
      <script src="https://cdn.flipboard.com/web/buttons/js/flbuttons.min.js" type="text/javascript"></script></td>
      <td style="text-align: center;"><iframe height="200" width="150" name="flipboardmagazine" style="border:0; display:inline-block; height:200px; width:150px; vertical-align: middle;" src="https://flipboard.com/cover/tiny-tamika-travels-bsjpTn"></iframe>
      <script src="https://cdn.flipboard.com/web/buttons/js/flbuttons.min.js" type="text/javascript"></script></td>
      <td style="text-align: center;"><iframe height="200" width="150" name="flipboardmagazine" style="border:0; display:inline-block; height:200px; width:150px; vertical-align: middle;" src="https://flipboard.com/cover/edu-tech-b3TXXt"></iframe>
      <script src="https://cdn.flipboard.com/web/buttons/js/flbuttons.min.js" type="text/javascript"></script></td>
    </tr>
  </tbody>
</table>

You may only need one call to that javascript too.. ill test it..  as a test i added it to my member profiles onBNation