All About SharePoint: Twitter, Geolocation and SharePoint 2010

I wrote about Geolocation and SharePoint in my last article which you can read at the following URL:

HTML5 Geolocation and SharePoint 2010

In this article, we will extend the idea further and include Twitter. In last article we saw how one can find location of site visitors using HTML5 Geolocation feature. Now we will use that feature to find Twitter users in your area. We will add two text boxes in the application. One to enter the search term and the other to enter the radius of the search. Application will first find your location on the map and then search in the proximity of your location. You can set radius to any value you like. Application will find Twitter users in that radius of your location and then show their logo, name, tweet and tweet time. It works in browsers as well as mobile devices. If you haven't figured out how to run HTML5 in SharePoint, read following article.

HTML5 Video and SharePoint 2010

Jump to section "Using HTML5 in SharePoint 2010". You will find all the details in that section.

Create a new ASPX page in your application. Make sure masterpagefile points to your new master page. You will find this attribute in the first line of the page.

<%@ Page Language="C#" masterpagefile="../_catalogs/masterpage/v5.master" title="Demo"

inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>

See red colored text above. I named my new master page "v5.master".

Your second line in the ASPX page will be:

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

And then starts the real code. See below.

function
twitterSearch(){

var gps =
navigator.geolocation;
if
(gps){

gps.getCurrentPosition(searchTweets,showError);
}
else
{
searchTweets();
}
}

This function gets the current position of the user. searchTweets() is the function that is called if current location is found successfully. searchTweets() is next, shown below.

function
searchTweets(position){

var query =
"http://search.twitter.com/search.json?callback=searchResults&q=";
query +=
document.getElementById("searchBox").value;
if
(position){
var lat =
position.coords.latitude;
var lng =
position.coords.longitude;
query +=
"&geocode=" + escape(lat + "," + lng + "," +
document.getElementById("radiusBox").value +
"mi");
}

var script =
document.createElement("script");
script.src =
query;
document.getElementsByTagName("head")[0].appendChild(script);
}

searchResults() is the callback function. We pass search keyword in the query parameter called "q" and then we pass geocode that comprises of latitude, longitude and radius. Then we add this search query dynamically to the page body. searchResults() function is given below:

function
searchResults(response){
var tweets =
response.results;
tweets.forEach(function(tweet){
tweet.linkUrl
= "http://twitter.com/#!/"
+ tweet.from_user + "/status/" +
tweet.id;
});
createTable(tweets);
}

In searchResults() we read each tweet and create results table. We pass all
tweets to the createTable() function. createTable() function is given below:

createTableSkeleton() function creates

the table skeleton and header
row.

function
createTableSkeleton()
{
var tbl = "<table
id='resultsTable' border='1'
bgcolor='lightskyblue'>";
tbl +=
"<TR><TH><h3>Logo</h3></TH>";
tbl
+=
"<TH><h3>User</h3></TH>";
tbl
+=
"<TH><h3>Tweet</h3></TH>";
tbl
+= "<TH><h3>Tweeted
At</h3></TH></TR><BR><BR>";
tbl
+= "</table>";

return
tbl;
}

createTableBody() creates the main body that shows the results.

function createTableBody(userID, logoUrl,
tweetText, linkUrl, created_At, geo,
IsAlternateRow)
{

var resultsRow =
document.createElement("tr");
if
(IsAlternateRow){

resultsRow.setAttribute("class", "odd");

}
else

{
resultsRow.setAttribute("class",
"even");
}

var srcCell =
document.createElement("td");

srcCell.setAttribute("class","src");

resultsRow.appendChild(srcCell);

var logo =
document.createElement("img");
logo.src
= logoUrl;
logo.setAttribute("alt",
userID);
logo.setAttribute("height",
48);
logo.setAttribute("width",
48);

srcCell.appendChild(logo);

var user =
document.createElement("td");

user.setAttribute("class","src");

resultsRow.appendChild(user);

user.appendChild(document.createTextNode(userID));

var messageCell =
document.createElement("td");

messageCell.setAttribute("class","msg");
var link =
document.createElement("a");

link.setAttribute("href", linkUrl);

link.setAttribute("target", "_blank");

link.appendChild(document.createTextNode(tweetText));

messageCell.appendChild(link);

resultsRow.appendChild(messageCell);

var created_at =
document.createElement("td");

created_at.setAttribute("class","src");

resultsRow.appendChild(created_at);

created_at.appendChild(document.createTextNode(created_At));

return
resultsRow;
}

Then we have the style sheet.

Finally we have the html controls. Results are shown in "searchResults" DIV.

<asp:Content
ContentPlaceHolderId="PlaceHolderMain"
runat="server">
<div
id="main">
<label for="searchBox">Enter
Search
Term:</label>      
<input
type="text" id="searchBox"/><br>
<label
for="radiusBox">Enter Radius (in
miles):</label>
<input type="text"
id="radiusBox"/>
<input type="button"
value="Search Twitter"
onclick="twitterSearch()"/>
</div>
<div
id="searchResults">
</div>

</asp:Content>

Click here to download complete code (ASPX file in zip format)

Now access this ASPX page in browser and you are done. Again if you want to see how to configure SharePoint to run HTML5 code, please visit following URL. It has complete detail on how to configure the server.

HTML5 Video and SharePoint 2010

If you want to test this code in your browser, use following link:

http://walisystemsinc.com/sharepoint/art/twittersearch/twitterSearch.htm

Enter search term and the radius and click Submit. Your browser will ask for your permission to use your location. Allow it
and search will show all Twitter users in your area tweeting about the search keyword.

This is how it will look in SharePoint: