allaboutmoss

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

<link rel="Stylesheet" type="text/css" href="/_layouts/TwitterTrends/css/demo.css" />
<link rel="Stylesheet" type="text/css" href="/_layouts/TwitterTrends/css/jScrollPane.css" />
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/_layouts/TwitterTrends/scripts/jquery.mousewheel.js" type="text/javascript"></script>

<script src="/_layouts/TwitterTrends/scripts/jScrollPane-1.2.3.min.js" type="text/javascript" ></script>

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.

<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#twitter-ticker').slideDown('slow'); //Slide down the Widget when the page has loaded
RefreshTweets(); //Function which does all the job
setTimeout("RefreshTweets()",60000); //Refresh the Tweets every 1 minute
});

function RefreshTweets() {
var container = $('#tweet-container');
if(hashtag == "") //Global variable declared through C# code
{
hashtag = "SharePoint"; //Set Default Hashtag
}
$.getJSON("http://search.twitter.com/search.json?q=%23" + hashtag + "&rpp=15&&callback=?", function (msg) {
container.html(''); //Remove the Loading GIF
for (i = 0; i < msg.results.length; i++) { //Build DIVs containing Tweets and add it to Container DIV
var str = '<div><div><a href="http://twitter.com/' + msg.results[i].from_user + '" target="_blank"><img src="' + msg.results[i].profile_image_url + '" alt="' + msg.results[i].from_user + '"/></a></div>';
str += '<div><a href="http://twitter.com/' + msg.results[i].from_user + '"target="_blank">' + msg.results[i].from_user + '</a></div>';
str += '<div>' + relativeTime(msg.results[i].created_at) + '</div>';
str += '<div>' + formatTwitString(msg.results[i].text) + '</div>';
container.append(str);
}

});
container.jScrollPane(); //Add Scrollbar

}

We will also be using 2 functions which is used to Format Tweet and Time (you can find this function in script.js which you have downloaded from Tutorialzine website)

function formatTwitString(str)
{
str=' '+str;
str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
str = str.replace(/([^\w])\#([\w\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
return str;
}

function relativeTime(pastTime)
{
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();

var difference = parseInt((currentStamp - origStamp)/1000);

if(difference < 0) return false;

if(difference <= 5)                return "Just now";
if(difference <= 20)            return "Seconds ago";
if(difference <= 60)            return "A minute ago";
if(difference < 3600)            return parseInt(difference/60)+" minutes ago";
if(difference <= 1.5*3600)         return "One hour ago";
if(difference < 23.5*3600)        return Math.round(difference/3600)+" hours ago";
if(difference < 1.5*24*3600)    return "One day ago";

var dateArr = pastTime.split(' ');
return dateArr[4].replace(/\:\d+$/,'')+' '+dateArr[2]+' '+dateArr[1]+(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
}
</script>

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

<div id="main">
<div id="twitter-ticker">
<div id="top-bar">
<div id="twitIcon"><img src="/_layouts/TwitterTrends/images/twitter_64.png" width="64" height="64" alt="Twitter"/></div>
<h2>Twitter Trends</h2>
</div>
<div id="tweet-container"><img id="loading" src="/_layouts/TwitterTrends/images/loading.gif" width="16" height="11" alt="Loading.." /></div>
<div id="scroll"></div>
</div>
</div>

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

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

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

[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;

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

string strHashTag;
strHashTag = VisualWebPart1.HashTag;
Response.Write("<input type='hidden' value='" + strHashTag + "' id='hashtag'/>");
ClientScriptManager cs = Page.ClientScript;
cs.RegisterClientScriptBlock(GetType(), "hashtag", "<script>var hashtag='" + strHashTag + "';</script>");

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]