Wanna use Twitter in SharePoint 2010... sure thing!

Ok so last week I had a golden email off a member of staff:

"Idea to Share:"
"I was thinking I might share my modules on Twitter this year! What do you think?"

I feel my face resembled something similar to this:

Ok maby not quite as excited as the above cat but it was quite close! Why did this excite me so much? Well it basically means I get to use my favourite technology in the WORLD. XML! If I'm honest I barely use xml however its a technology that I respect and realise the awesome power it can possess if used right, and I hoped I could tap into this by combining Twitter and SharePoint!

So here was my plan by using Twitters "Feed for this Query" feature embed the RSS feed into a Tulip page, so that way both staff and students could post information on the SharePoint page provided they use the set Query, this being the module name. BINGO! I also figured giving a link to the academics Twitter account was a suitable idea as well would be useful...

So here's how I did it:

1. Get the RSS feed from Twitter:
Go to Search.Twitter.com and type in the Query name I also added "include:retweets", quite self explanitory what that does.

Then on the search results page:

Click on the link which says "Feed for this query" and it'll bring of the feed (obviously):

However the feed is in ATOM format, which annoyingly isn't supported on our copy of SharePoint, luckily Twitter allows you to change where it says ATOM to RSS and it magically changes to an RSS format... I almost spat my coffee out when I thought "hmm I wonder if I change the URL it'll make it in RSS format". Once you've changed the URL to RSS then copy the whole address.

2. Add the 'RSSFeedForSharePoint' WebPart to your page:
Go to the SharePoint page you want to display your tweets on and click on the edit icon:

We then want to insert a web part this is under "Edit" and "Insert":

THEEEEN To get to the RSSREADER Web Part select "Miscellaneous" - and "RSSReader Web Part" then click "Add":

3. Bring the RSS feed and the reader together:
In your newly added web part go to the bit where it states "Enter the URL of RSS feed" and paste in your XML feed address which we got from step 1:

You can also edit different things in there like how many tweets to show (Enter number of items to display:) and the different sizes etc. Once your happy click "OK". And your tweets should magically appear:

This is all find and dandy but if someone was to visit your page they wouldn't have a clue what they're looking at so lets give it some context. Click on the "edit" button again. And select the area just above where your RSSReader thingy is and Enter some contextual text:

And your done!

This will obviously work for any RSS feed, most notably if you want to use the RSS feed from an individual account, remember to change the ATOM bit to RSS. However I'd advice against displaying your own account here as you might accidently tweet something distasteful to the Module or Program so it's probably best to use the Search Query method I've shown above.

Hope this has been of some use if any of the images are too small click on them to enlarge and please comment if you have any questions or likewise!

Some START progress

Well it seems I've finished the majority of the back end work for this project, successfully integrating Twitter, Picassa and Blogger into one page using, PHP & XML... Which I'm quite happy with seeing as prior to this project I've not coded anything in php! As part of me trying to maintain the whole creative commons thing and trying to share and share alike thingy here's the code I've used:

Blogness.php - Grabs the xml from the rss feed and displays all posts:
Adapted from: http://www.hiash.com/blogger.php

<?php
define('MAGPIE_DIR', '../../magpierss/');
require_once(MAGPIE_DIR.'rss_fetch.inc');

//RSS feed has to be of ATOM format
$rss = fetch_rss( 'http://www.blogger.com/feeds/8911594570691911602/posts/default' );

//display latest blog content:
foreach ($rss->items as $item) {
$title = $item['title'];
$content = $item['atom_content'];
echo "<h1>$title</h1><p>$content</p>";
}
?>


Twitterness.php - grabs the rss from your public twitter feed and displays the last 5 posts...
Adapted from http://workbench.cadenhead.org/twitter-rss-to-html/


<?php

define('MAGPIE_DIR', '../../magpierss/');
require_once(MAGPIE_DIR.'rss_fetch.inc');

$tweets_to_display = 5;
// the page where the tweet(s) will be displayed
$page = "";
// the user's Twitter username
$username = "StartPlymouth";


$rss = fetch_rss( 'http://twitter.com/statuses/user_timeline/49595711.rss' );

// start buffering output
ob_start();

$count = 1;
$now = time();


foreach ($rss->items as $item) {
// limit the number of tweets displayed
if ($tweets_to_display > 0) {
if ($count > $tweets_to_display) {
continue;
}
}
$tweet = $item['description'];
// ignore tweets linking back to page (if it is defined)
if ($page != "") {
if (!strpos($tweet, $page) === false) {
continue;
}
}
// figure out how recently the tweet was posted
$when = ($now - strtotime($item['pubdate']));
$posted = "";
if ($when < 60) {
$posted = $when . " seconds ago";
}
if (($posted == "") & ($when < 3600)) {
$posted = "about " . (floor($when / 60)) . " minutes ago";
}
if (($posted == "") & ($when < 7200)) {
$posted = "about 1 hour ago";
}
if (($posted == "") & ($when < 86400)) {
$posted = "about " . (floor($when / 3600)) . " hours ago";
}
if (($posted == "") & ($when < 172800)) {
$posted = "about 1 day ago";
}
if ($posted == "") {
$posted = (floor($when / 86400)) . " days ago";
}
// filter the user's username out of tweets
$tweet = str_replace($username . ": ", "", $tweet);
// turn URLs into hyperlinks
$tweet = preg_replace("/(http:\/\/)(.*?)\/([\w\.\/\&\=\?\-\,\:\;\#\_\~\%\+]*)/", "<a href=\"\\0\">Link</a>", $tweet);
// link to users in replies
$tweet = preg_replace("(@([a-zA-Z0-9\_]+))", "<a href=\"http://www.twitter.com/\\1\">\\0</a>", $tweet);
echo '<p class="Tweets"> <strong>'.$username.':</strong> '.$tweet.'</p><p class="TweetInfo">'.$posted.'</p>';
$count++;

}

// display output
ob_end_flush();
?>

Picassaness.php - This one is the most complex but doesn't require Magpierss which is cool, does the same grabs public xml, I've got it to store all the images in an array and select a random 5 and display them. (to change on each refresh):
(I adapted from - http://code.lawpower.net/2008/01/21/picasa-gallery-googles-cruel-rss-feed/)

<?php
$DisplayNumberofPhotos = 5;

function AddXMLtoItems($xmlurl){
//get the xml from the feed provided in $xmlurl
$session = curl_init($xmlurl);
curl_setopt($session, CURLOPT_HEADER, false);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($session);
curl_close($session);
$xml = simplexml_load_string($response);
$items = $xml->channel;

//now we have each item from the XML file into $items we now need to split them up so their more useful to us
foreach($items->item as $item){
$title = $item->title;
$content = $item->description;

//pull the images from the *descripotion* section
$quotes = array('"', "'", "\n");
$imgContents = str_replace($quotes, '', $content); #Strip " and ' as well as \n from input string
$imgContents = stristr($imgContents, 'src='); #Drop everything before the 'src'
$endTagPosition = stripos($imgContents, 'alt'); #Position of the end tag '>'
$img = substr($imgContents, 4, $endTagPosition - 4); #Get everything from src to end tag --> 'src="path" something>'

//Change the dimentions of the images, Picasa sets images sizes at specific sizes within the url
$ImageURL = str_replace('/s288', '/s220', $img);
$ImageURLs[] = $ImageURL;
}
return $ImageURLs;
}

//Grab the images from the array and merge them all into one big array...
$ImageURLs = AddXMLtoItems("http://picasaweb.google.com/data/feed/base/user/StartPlymouth/albumid/5354140273775432289?alt=rss&kind=photo&authkey=Gv1sRgCOGggY2Y8baMLw&hl=en_US");
//$ImageURLs2 = AddXMLtoItems("");
//$ImageURLs3 = AddXMLtoItems("");
//$ImageURLs4 = AddXMLtoItems("");
//$ImageURLs = array_merge((array)$ImageURLs1, (array)$ImageURLs2, (array)$ImageURLs3, (array)$ImageURLs4);

//Now we need to grab random images from this array to be displayed on the home page
for ( $counter = 0; $counter <= ($DisplayNumberofPhotos - 1); $counter += 1) {
//get ImageToDisplay to be a exact image number
$ImageToDisplay = sizeof($ImageURLs);
$ImageToDisplay = rand(0, $ImageToDisplay);
$ImageToDisplay = round($ImageToDisplay);
$ArrayofImagesBeenDisplayed[] = $ImageToDisplay;
}
//add image displayed to an array to ensure we don't get duplications
$ArrayofImagesBeenDisplayed = array_unique($ArrayofImagesBeenDisplayed);

//Display these random images and link them to a larger image
for ($counter2 = 0; $counter2 < sizeof($ArrayofImagesBeenDisplayed); $counter2 += 1) {
$ImageDisplayURL = $ImageURLs[$ArrayofImagesBeenDisplayed[$counter2]];
$ImageLinkURL = str_replace('/s220', '/s1024', $ImageURLs[$ArrayofImagesBeenDisplayed[$counter2]]);
echo "<a href='" . $ImageLinkURL . "'><img src='" . $ImageDisplayURL . "' /></a>";
}
?>


Obviously I'm no coder and I'm sure this will make some of you spit your coffee out at your computer screen, but I'm sure some of you will find it useful! Any feedback would be good. I've made these seporate files to be called into the main page by using Include('file.php'); so should hopefully work with you, for the picassa one you have to declare how many images you want displayed: $DisplayNumberofPhotos = 5; include('Picassaness.php') In the picassa one I would quite like it to find all rss feeds related to that piccassa user rather than having to list each individual album manually so if anyone knows how to do that, that would be great. Otherwise shall try and work it out myself and post it here.