Collaboration Blog

Xbox 360 Avatars in a Content Editor Web Part (using Microsoft Popfly)!

I recently made a nice looking Web Part (shown below) which shows a picture of my Xbox 360 avatar and those of my friends. I used Microsoft Popfly to make it look so great and I thought I’d explain how you could make your own. This is aimed at all those gamers out there!

Stage 1 – Rip My Popfly control

1. Go to my Popfly project here.
2. Select Rip This
3. With a copy of the Popfly project open, click the Configuration icon (a spanner) next to the List box.
4. 
5.  
6.  
7.  
8.  
9.  

    5. In the Value text box, simply type in your Xbox Live Gamertag and that of your friends (separate names using commas; e.g. JIMMY KEMP, friend1, friend2)

    6. Click OK

    7. Click Run to see your Popfly project in action

    8. Click Save and enter a name for your Popfly project

    9. Click Share

    10. Click Embed and then copy the html source, which will look something like the following:

<iframe style='width:500px; height:375px;' src='http://www.popfly.com/users/355387/Xbox%20360%20Avatars.small' frameborder='no' allowtransparency='true'></iframe>

Stage 2 – Create a Web Part

1. On your SharePoint site, from the Site Actions menu, click Edit Page
2. Click Add a Web Part
3. Select Content Editor Web Part and click Add
4. On the Content Editor Web Part click Open the Tool Pane
5.  
6.  

    5. In the properties pane for the Web Part, click Source Editor...

    6. Paste the html source you copied at the end of stage 1

    7. Click Save

Enjoy!