Content Editor WebPart: Popfly/Mashup


Microsoft Popfly is a great way to create a mashup – taking a source of information and publishing it in a great graphical view.

As an example here I have taken my favourite football team(soccer for you Americans ;-), Aston Villa, searched Live Images and  published all the images it finds into a page turner.  There are some many different blocks you can use now in Popfly – you should really give it a go if you haven’t already.

So here are the blocks for the Aston Villa Page Turner


When we’ve saved that, we can run and see how it looks as a mashup


So how do we get this onto our SharePoint page.  Well its easy as the others really.  As per YouTube and SlideShare, Popfly gives you the embed code to add to any kind of website.

Click on Share at the top and you can see other sites you can publish it to like your Space and Bebo.  Click on Embed and you can copy the code


Here is the code for the Aston Villa Page Turner

<iframe style='width:500px; height:375px;' 
frameborder='no' allowtransparency='true'></iframe>

.csharpcode, .csharpcode pre


font-size: small;

color: black;

font-family: consolas, "Courier New", courier, monospace;

background-color: #ffffff;

/*white-space: pre;*/


.csharpcode pre { margin: 0em; }

.csharpcode .rem { color: #008000; }

.csharpcode .kwrd { color: #0000ff; }

.csharpcode .str { color: #006080; }

.csharpcode .op { color: #0000c0; }

.csharpcode .preproc { color: #cc6633; }

.csharpcode .asp { background-color: #ffff00; }

.csharpcode .html { color: #800000; }

.csharpcode .attr { color: #ff0000; }

.csharpcode .alt


background-color: #f4f4f4;

width: 100%;

margin: 0em;


.csharpcode .lnum { color: #606060; }

So we copy the code and place it in the Content Editor Web Part in the Source section


And we then have our Popfly mashup in our SharePoint site


One thought on “Content Editor WebPart: Popfly/Mashup

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.