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.

http://www.popfly.ms

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;' 

src='http://www.popfly.com/users/Alex-Pearce/Aston%20Villa%20Page%20Turner.small' 

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