Add Simple Widgets to Your SharePoint Page
When I teach beginning SharePoint users, I describe web parts as “little widgets you can drop on your page”. That usually does the trick. However, what if you REALLY want to put some widgets on your page? How would you go about doing that?
I sent out a link to the SharePoint World Cup Template demo site I created from Andy Dale’s framework template. I tweaked it a little with some widgets to make it a little less geeky. I then received this message from Ray, one of the EUSP Weekly Newsletter Subcribers:
“I’ve never added a widget to a page. Where can I find instructions on adding one of the FIFA widgets to MySite?”
Hey, EndUserSharePoint, right? We’re supposed to be able to show people how to do this stuff, so here you go, Ray. Thanks for the suggestion.
Get Started
First thing we have to do is go find some widgets worth putting on the page. FIFA has a media page setup that has about half a dozen available. Go to Google and type in FIFA Widgets. The first thing that shows up in the search is a direct link to the widget page.
Look over the widgets and see which one you like. My favorite is the Ranking widget, since it shows a lot of colors and actually might be useful. Click the widget on the page and a modal window will pop up. Double click the “ADD WIDGET+” button and some code will be exposed. (Sometimes there’s a request to “Choose your favorite team”. I ignore that and close it.)
Copy the code from the widget. Here’s the one for the Rankings:
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNzQ4MTc*ODIyMzQmcHQ9MTI3NDgxNzY5ODY*MCZwPTExMjQxMjEmZD13b3JsZHJhbmtpbmdfZW4mZz*yJm89ZGZk/YjE*OWQyYjU3NGYwMzg1NDlkN2UwNmFkZDNiNWMmb2Y9MA==.gif" /><object classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0 width="300" height="400" align="top" id="WFHost"> <param name = "FlashVars" value = "Partner=1124121&theme=New Classic&widgetW=300&widgetH=400&widgetX=0&widgetY=0&stickyType=&WFBtnX=0&WFBtnY=0&defaultPreviewURL=http://www.fifa.com/flash/widgets/worldranking/images/image_en.png&useFacebookMystuff=false&buttonURL=http://www.fifa.com/flash/widgets/worldranking/images/button.png&URL=http://www.fifa.com/flash/widgets/worldranking/app.swf%3FteamId%3Darm%26lang%3Den" /><param name="wmode" value="transparent"/><param name="allowScriptAccess" value="always" /><param name = "movie" value = http://cdn.gigya.com/wildfire/swf/WildfireHost3.swf /> <embed name = "WFHost" id = "WFHost" width = "300" height = "400" src = http://cdn.gigya.com/wildfire/swf/WildfireHost3.swf flashvars="Partner=1124121&theme=New Classic&widgetW=300&widgetH=400&widgetX=0&widgetY=0&stickyType=&WFBtnX=0&WFBtnY=0&defaultPreviewURL=http://www.fifa.com/flash/widgets/worldranking/images/image_en.png&useFacebookMystuff=false&buttonURL=http://www.fifa.com/flash/widgets/worldranking/images/button.png&URL=http://www.fifa.com/flash/widgets/worldranking/app.swf%3FteamId%3Darm%26lang%3Den" AllowScriptAccess="always" quality="high" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>
Embed the Widget Code
Go to the page where you’d like to place the widget. You must have at least Site Manager permissions because you will need to add a web part to your page. Open the page for editing (Site Actions -> Edit Page). Click “Add a Web Part” at the top of the web zone where you’d like the widget to appear. Scroll through your web part gallery and find the “Content Editor Web Part”. If one isn’t available, it means you administrator has removed it from the gallery.
Open the Tool Pane in the web part (Edit -> Modify SharePoint Web Part), and choose the “Source View” button. This will allow you to embed HTML, javascript and other stuff into the backend of the page. Paste the code you took from the FIFA site into the source view. Click Save.
Summary
That’s it! What? You expected more? Nope. Find some cool stuff, cut and paste it into a Content Editor Web Part and you’ll be a hero in no time.
I would really like to see what other people are doing with their SharePoint World Cup template page. Leave a link below and we’ll check it out.
Happy widget-ing.
Mark
Worked first time!
Thanks
- Ray
Great article! So simple, and so easy, but something that may not be so obvious to many end users.
Thanks
I never get the code window. Is there a specific browser requirement? I double-click as you say but nothing happens.
It’s Flashed based. See if upgrading to the latest version of Flash helps. — Mark
When you select Edit, you should get a choice between “Rich Text Editor” and “Source Editor”. Clicking Source Editor should display the code window.
I’m running Flash 10 + IE8 on Windows 7 and try as I can, I cannot get a code window to appear nor do I have anything offering “Edit”…
Any ideas ?
Thanks for the article!
Getting the widgets onto my site was straightforward enough, but how can I get the tabs as you have done (your example shows 3 widgets with tabs at the top)?
Cheers!
Steve.
Steve – Check out Christophe’s Easy Tabs solution at Path to SharePoint. — Mark
http://blog.pathtosharepoint.com/?s=Easy+Tabs
Thanks Mark,
Got it working – doesn’t look quite as nice yet but I’ll get there…!
Cheers!
Steve.
I’d already tried the easytabs route which works elsewhere on my site but not for the widgets on the right hand side – Am I missing something (using Easy tabs v2)?
Thanks
Very cool. Is there a way to remove the “Add Widget” button? I can’t read code too well, so just wondering if it’s contained in a removable tag.
Phil – Christophe has a forum in Stump the Panel that he moderates daily. Hit him up with your question and I’m sure he’ll respond. — Mark
John,
Not sure why you’re looking for “Edit”. Go here: http://mossworkshops.endusersharepoint.com/FIFAWorldCup/default.aspx In the right hand panel where the widgets are, click “Add Widget +”. Choose a team, any team, from the list that pops up. After that, the embed code should show in a window for you to copy. If that doesn’t work, I can do much else, since this is from FIFA not from EUSP.
Hope that helps,
Mark