Twitter Trends Webpart for SharePoint

In this article we will see how we can develop a Twitter Web Part for Sharepoint. We are going to use jQuery and Twitter Search API along with our favorite c# code. The Web Part will be a simple Twitter Widget which will display latest tweets for a Hashtag. Below is a screenshot of how our Web Part will look like.

We are going to name our Web Part Twitter Trends ;-) Lets get started

Fireup Visual Studio 2010 (Oh Yeah we will be using Visual Studio 2010 for our project and you will notice how easy it is for developers to build and deploy SharePoint Projects in VS 2010) and Select File -> New Project and create a new Visual Web Part Project.


Click OK and you will see another Window which will ask you to enter the Local SharePoint site which we will use to Debug our Web Part. Enter your Test Site and Click Finish.

Instead of designing our widget we are going to use the design of a Twitter Widget Tutorial in Tutorialzine.

We will be making few changes in CSS to suit our needs. Please check the above link to learn how the Widget is designed. We will not be discussing what changes were made to the CSS files also download the source code as we will be using CSS Files, Images and Javascript files from that project.

Back to our project in Visual Studio, Right Click our Project and Click Add -> SharePoint “Layouts” Mapped folder.

If you notice, Visual Studio automatically added a folder for us under layouts folder to store our files. Now Create 3 new folders namely CSS, Images, Scripts. Add CSS Files, Images and JS files to these folders.

Now your solution explorer should look like this

Open the ASCX file and add the following code

[sourcecode="JavaScript"]


[/sourcecode]

In the above code we have just referenced the proper CSS files and Javascript files including the jQuery file from Microsoft CDN.

Add the below code below the above lines of code. The code is self-explanatory also I have added comments so that it will be easy to understand.

[sourcecode="JavaScript"]

[/sourcecode]

Next, Add the below code which will add the required DIVs and containers

[sourcecode="JavaScript"]

Twitter

Twitter Trends

Loading..

[/sourcecode]

Now it’s time to add our Custom Property to the Web Part so that users will be able to enter their own hashtag.

Open VisualWebpart1.cs and change

[sourcecode language="csharp"]

[ToolboxItemAttribute(false)] to [ToolboxItemAttribute(true)]

[/sourcecode]

Add the below code which will add a Textbox under a custom category.

[sourcecode language="csharp"]

[WebBrowsable(true),
Category("Twitter Trends"),
Personalizable(PersonalizationScope.User),
DefaultValue(""),
WebDisplayName("Hash Tag"),
WebDescription("Please enter a hashtag")]

public string TwitterTrendsProperty
{
get { return HashTag; }
set { HashTag = value; }
}
public static string HashTag;

[/sourcecode]

Next, Open the code behind file for the user control which will show the Tweets and add the below code under Page Load event.

[sourcecode language="csharp"]

string strHashTag;
strHashTag = VisualWebPart1.HashTag;
Response.Write("");
ClientScriptManager cs = Page.ClientScript;
cs.RegisterClientScriptBlock(GetType(), "hashtag", "");

[/sourcecode]

In the above code we declare a new Javascript variable and set its value based on the Value entered in our custom property “Hashtag”

That’s it! Now it’s time to test our Twitter Trends Web Part ;-) Right click the project and select Deploy. Yes it is that simple!

Wait for Visual Studio to deploy the solution. You should see the status in the status bar

To test our new Web Part, open the site and add the Web Part. You should find your webpart under “Custom” Category.

After adding the Web Part, Click “Edit Webpart” to enter your own hastag and see our new Twitter Web Part in action ;-)

Download : Twitter Trends [Source Code] Twitter Trends [WSP]

8 thoughts on “Twitter Trends Webpart for SharePoint

  1. Very Cool Project! But when I sign in as a user in the site’s ‘Members’ group and edit the web part, the “Twitter Trends” category is missing. If I sign in as a user in the site’s ‘Owners’ group and edit the web part, the “Twitter Trends” category is there–but saving a Hash Tag value overwrites everybody else’s Hast Tag value! (SharePoint 2010 Server running on Windows 2008 R2) -Marc

  2. Hello,

    I´m recieving the next error when I´m have the webpart displayed in my page

    SCRIPT438: Object doesn’t support this property or method home.aspx?PageView=Shared&InitialTabId=Ribbon.WebPartPage&VisibilityContext=WSSWebPartPage, line 1018 character 13

    This error is targered to
    container.jScrollPane(); //Add Scrollbar

    Do you have any idea?

    Thanks

  3. Hi,
    I’ve downloaded and installed the WSP and it runs. However, after I set a Hashtag value it disappears after a couple of minutes. It seems it’s not saved and the results returned only show tweets with Sharepoint as hashtag. Why is this?

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>