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.
Replies
Thank you John... was a real treat to get it working
We were just looking at Flipboard last week. Awesome. Thank you!
flipboard is pretty amazing for what it is and the ease of building magazines.. i hope you guys find this useful!
+1. I have thought about this a few times. Will have to dig in. Thanks for sharing man.
My pleasure FT...kinda opens a few doors huh..
yeah, I have a few ideas. Will post back when I get time to mess with them.
This is cool thank you for sharing JFarrow :-)
np GC!
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