Welcome to KnowledgeLink - The AKG Blog

Add Social Media Widgets to your SharePoint 2010 Team Site - Part 1

Posted by Ariella Beard on Fri, Dec 2, 2011 @ 09:12 AM

I have been playing around with social media widgets and found out they are actually very simple to implement with SharePoint 2010. They look really sweet too:-)! Janetra shared in some earlier posts how to Add a Facebook LikeBox to a SharePoint 2010 Web Part Page and How to Display the LinkedIn Company Insider Plugin on a SharePoint 2010 Web Part page. I’m going to deviate a little from those and show you how to dress up your SharePoint 2010 Team Site social media style. In this post, the first of two, I’m going to show you how to add a Twitter feed widget to your SharePoint 2010 Team Site.


This widget can help keep you up with everything being said on Twitter about your company (just like the example on Twitter’s Widget page – see below) or with topics that are relevant to your project or company.

 

 

 Twitter Search Widget

 

 

 

 

 

 

 

 

 

 

 

 

Twitter has a fabulous looking Search Widget just for this purpose in their Resources. Click Here and it will take you to the Search Widget Settings page.


From the Search Widget Settings, enter your twitter handle or your search term (#SharePoint 2010 for example) in the Search Query field.

 

  describe the image

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

 

 

 

Next, fill out the Title and Caption fields as you see fit.
You can see as you type that the Title field generates the first headline on the widget and the Caption field the one below it. Once you click on Test Settings you will see your search results.
Next, click on the Preference tab to add a scroll bar to your widget.

I liked the automatic color scheme, so I left the Appearance tab alone.

However, if you are so inclined, the settings on this page allow you to customize your widget colors (just click on the color box next to the value):

 

describe the image

 

 

 

 

 

 

 

 

 

 

 

I made sure and click on the Dimensions tab to check the auto width checkbox.

Now you are all set to move on to putting your customized widget on your SharePoint site!
Click Finish & Grab Code and a new page will pop up with the code already highlighted.

  

 

describe the image

  

 

Copy and paste the code into a text file (I used Notepad). Then save it somewhere easily accessible, like your desktop.

Now, go to the SharePoint site where you would like the widget and upload the text file you created. I am going to store mine in the default Site Assets document library that is included with the default team site template. You can find it by clicking on All Site Content at the bottom of your Current Navigation (formerly Quick Launch Bar) and looking under the Document Libraries heading.

 

 

 

describe the image

 

 

 

 

 

 

 

 

 

 

 

 

 

 

In the Site Assets library, click on Add document.

  

 

describe the image

 

The upload document dialog pops up, Browse to find your document and then click OK.

After you have finished uploading your document to your library, right click on the title of your document and select Copy shortcut.

Now, go to the home page of your team site and click on the Page menu. From the Edit group on the ribbon, choose Edit.

 

  

page tab edit menu

 

 

 

 

 

 

 

 

 

The Editing Tools menu will appear as will faint lines indicating your team site zones; click inside the team site zone where you want the web part.

  

describe the image

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Then click on the Insert tab, and from the group Web Parts on the ribbon, select Web Part.

The Web Part pane opens. From the Categories menu select Media and Content, then from the selection of Web Parts, select Content Editor, and click Add.

 

 

describe the image

 

 

The Content Editor Web Part appears in your team site zone. Click the web part drop down menu and select Edit Web Part.

 

 

 U  Blog blog pictures abblog28 resized 600

 

 

 

 

 

 

 

 

The web part properties menu appears on the right hand side of your screen.

Right click in the Content Link field, and paste the shortcut to your text file.

 

 

 describe the image

 

 

 Expand Appearance and from the Chrome Type drop down menu and select None.

 

 

describe the image

  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Click OK; if a browser security warning pops up, select Yes.
 

  

 

describe the image

 

 

 

 

 

 

  

 

(I asked Janetra about this because I wasn’t sure about what sort of security risk this entailed. The widget does not make your SharePoint site more vulnerable to outside access or anything. Continue to practice common sense about what links you click on, i.e. if you don’t recognize the user the tweet is coming from, check out their profile first; you can probably tell if they are a spammer or not from their tweets.)


You are still in edit mode at this point, so you haven’t seen the finished product yet.
Click on the Format Text tab on the Editing Tools menu and select Save & Close in the Edit Group.

 

 

 describe the image

 

 

 

 

 

 

 

 

 

Now you can behold the wonder and beauty of your fabulous new twitter feed widget:

 

 

 describe the image

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Enjoy! Until next time...

 

~Ariella

Topics: SharePoint 2010, Scrolling Twitter Feed, Team Sites