Content Editor WebPart: Popfly/Mashup

Standard

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

Popfly1

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

Popfly2

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

Popfly3

Here is the code for the Aston Villa Page Turner

.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

Popfly4

And we then have our Popfly mashup in our SharePoint site

Popfly5

One thought on “Content Editor WebPart: Popfly/Mashup

Leave a Reply

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