shoogle designs' blog » Category: Twitter

Embedded timelines with API V1.1 OAuth

shoogledesigns — Mon, 22 Jul 2013 14:14:08 +0000

If you do read my blog, you would have noticed a post on the retirement of Twitter API v1, the launch of v1.1, and the subsequent [new] way of retrieveing the latest tweets of a given user.

This post was all about getting a twitter user timeline without having to dig deep into authentication. Today, I’m going to show you how to do the same thing with authentication.

What is OAuth?

Twitter uses OAuth to provide authorized access to its API, giving its users a secure way to connect their Twitter accounts with 3rd party apps without having to share their passwords, and providing them in the same time with a wide range of libraries.

Twitter Application

In order to get started, let’s first connect our twitter account to the Twitter Developers interface and create a new application.
Give it a name, a description, fill in your website url, leave the callback url blank, tick the terms and conditions checkbox, fill in the captcha, and create your app.

Once created, request your access tokens by clicking on the blue button at the bottom. This is basically all you need to access the API with authentication. And if you do take a look at the details of the app, you’ll understand you’ll be needing all four tokens present on the page (ie the consumer key, the consumer secret, the access token, and the access token secret).

TwitterOAuth PHP Library

Now, you’ll need a php library to work with Twitter’s OAuth API. If you google twitteroauth, you’ll find quite a few of libraries to use. The one we are going to use here is Abraham’s.

Download all files, and copy the twitteroauth folder into your project folder, as you won’t be needing the rest of the files.

Connection

Start with a blank html5-ready index.php file such as the following one:

In the body, start coding your php. We are going to require twitteroauth.php (and its mate OAuth.php) we have just donwloaded. Note that you don’t need to call both of them, twitterouath.php is enough.

require_once("twitteroauth/twitteroauth.php");

Create a few variables to hold you app’s consumer key, consumer secret, access token, and access token secret. Create as many parameter variables as you wish. To give you a head start, we are going to use GET statuses/user_timeline and all parameters are listed in there.

For our example, I created a couple of variables sunch as $nb_of_tweets (which is going to do – well – exactly what it says on the tin), and an $include_rts to include or exclude the RTs from your timeline.

$consumer_key = 'xxxxxxxxxxxxxxxxxxxxxx';  
$consumer_secret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$access_token = 'xxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$access_token_secret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$nb_of_tweets = 5;
$include_rts = false;

Note that RTs can be excluded with a ‘false’ value, but they will still count toward both the maximal length of the timeline and the slice selected by the count parameter. So it says on the user_timeline spec page.

Connect to the API using the get(‘statuses/user_timeline’) command, and run a loop to display your tweets in an unordered list.
Kudos to Kevin who commented below and added his two cents to helps us improve hyperlink display.

And a shit lot more kudos to him again as he also fixed our @mentions and #hashtags links, as I kindly asked him to. [Brilliant mate!]

Full code looks a lot like:

    get('statuses/user_timeline', array('count' => $nb_of_tweets, 'include_rts' => $include_rts)); 
                ?>
        
             $tweet): ?>
                [:space:]]+[[:alnum:]/]","\\0",  $tweet->text); 
            //#
            $tweet = preg_replace('/(^|\s)#(\w*[a-zA-Z_]+\w*)/', '\1#\2', $tweet);
            //@
            $tweet = preg_replace('/[@]+([A-Za-z0-9-_]+)/', '@$1', $tweet );
                    
                    echo $tweet;

                ?>

Refresh your page, you should be getting your latest tweets listed nicely in an unordered list.

Note that GET statuses/user_timeline has got limitations. For example, the maximum number of requests allotted per user is currently set to 180 per 15 minute window. Therefore, if you do get a lot of trafic on your site, it would be wise to optimize all this by setting some kind of cache and avoid reaching the 180 request limit.

For people testing this out, make sure you run your test in a local environment (using MAMP, or xampp for windows users).

Last, but not least, I added a Github repo so you can have a go at this API in no time. You just need to replace the tokens by your owns.

So long.

The post Embedded timelines with API V1.1 OAuth appeared first on shoogle designs' blog.

Embed your latest tweets on your website the API v1.1 way…or not

shoogledesigns — Thu, 13 Jun 2013 07:55:33 +0000

July 22nd 2013 – UPDATE: Now also in the blog the OAuth Way.

A quick follow up to my “Quick and easy way to display tweets on a static website” blogpost in the wake of the retirement of Twitter’s API v1, as the json method used on that tuto isn’t working anymore.

Right, so you were using Twitter’s former API (v.1) to display your latest tweets on your website, and now you’re getting a blank section. If you look under the hood with the dev tools, you probably will see an error such as “Failed to load resource: the server responded with a status of 410 (Gone)”.

As Twitter announced it on June 11th, API v1 is now retired, and we need to switch to API v1.1. This isn’t the biggest news of the week. The plan had ben laid out for us some six months ago.

I had made a mental note to sort it out before it happened.

Needless to say I had done absolutely bugger all about it. Partly because I was lacking motivation. All this bollox – you’ll admit it – does not make much sense, especially since our timelines are already publicly available. But that’s another story, hence let’s not get philosophical.

So what does the API change imply?

Stricter rules

Take a look at Twitter’s documentation on the subject.
There is an overview of the new API, a detailed page on timeline embedding, and what rules you need to follow in terms of twitter status display.

In a nutshell, you have very little room to get excentrique with the way you want to integrate your twitter status within your website.

Procedure

Side note: There are many ways to connect to Twitter, but this post isn’t about how to make authenticated calls to the API. Here, we are just going to focus on the simple display of a timeline without authentication.

Log into your twitter account
Go to your widget management page using https://twitter.com/settings/widgets
Create your widget choosing the timeline source of your choice (user, favs, list or search)
Copy and paste the code into the HTML of your site.
Change the settings you are able to change (which isn’t much) to your liking (read from Client Side Options and onwards on the embedded timelines page)

Example

A simple example with a status timeline limited to 5 tweets (data-tweet-limit=”5″), a transparent background, no header, no footer (data-chrome=”nofooter noheader transparent”), and the color of my choice for the links (data-link-color=”#1BB5E0″) and borders (data-border-color=”#B5DDE8″).

Tweets by @shoogledesigns

Follow @shoogledesigns

Still not happy?

Frustrated about the new api, the new setup, and more importantly the new rules? Feeling rebellious? Then Jason Mayes’ post will be of great interest to you, since he found a way of returning the raw text of his tweets using Javascript, the way it used to be with the json/api v1.0 back in the days,…a couple of days ago I mean.

Well, it didn’t take long, did it? lol

Check out his JS fiddle.

The post Embed your latest tweets on your website the API v1.1 way…or not appeared first on shoogle designs' blog.

Reminder: Quick and easy way to display tweets on a static website

shoogledesigns — Tue, 30 Oct 2012 10:59:45 +0000

June 12th 2013 – UPDATE: The method used in this post is no longer valid, Twitter having retired API v1, and rolled out API v1.1 yesterday.
Get it sorted out here.

In the course of my work of redesign of shoogledesigns.com (see teaser here), I have encountered a peculiar situation in trying to locate a quick and efficient way to display a number of my tweets on my website. Now, i’m not talking WordPress and plugins, but static html pages.

I’ve been looking for a few tutos as it had been flipping ages I had needed to embed tweets into a static website, and funny enough, it took me quite a while to make it work again.

I wasn’t asking for much: no widgets, no third party apps, no 3-page tutorials and endless code to read. Just a few lines of jquery and a couple of variables to change is all I wanted.

Yet, this ended up being tough to find. It either didn’t work with the latest version of jquery at hand, didn’t display RT’s or didn’t display fuck all.

After a bit of work, i found some short code, and thought you may want to keep a copy of it, in case…

$(document).ready(function () {		
	
// Type in your twitter id here
    
var user = 'TWITTERID';
          
// How many Tweets do you want to display?
//Type in the number after &count=
// Do you wanna show RT's? include_rts= '0 for no' or '1 for yes'
 
    $.getJSON('http://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + user + '&count=3&include_rts=1&callback=?', function(data)      {
          
        var tweet = "";
for (i = 0; i < data.length; i++) {
tweet += data[i].text + "

";
}
      
        tweet = tweet.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, function(url) {
            return ''+url+'';
        }).replace(/B@([_a-z0-9]+)/ig, function(reply) {
            return  reply.charAt(0)+''+reply.substring(1)+'';
        });
      
// Give your tweets a home: here an element of id tweet (#tweet)
        
$("#tweet").html(tweet);
    });
});

I’ve put an un-styled working version of this on my Github.
Download the files here.

The post Reminder: Quick and easy way to display tweets on a static website appeared first on shoogle designs' blog.

Walk back in time with Twitter image galleries

shoogledesigns — Wed, 24 Aug 2011 09:08:24 +0000

Twitter have just rolled out a new and cool feature, with the announcement of the now-available image galleries.

The feature allows you to display the pictures you have added to your tweets in an aggregated manner, simply using the grid and slideshow url (see below). The new feature displays up to 100 of your mot recently tweeted images in chronological order.

Without surprise, all big image sharing partners such as Instagram, yFrog, and TwitPic are supported.

Check out your media grid by replacing ‘username’ by your twitter id:

https://twitter.com/#!/username/media/grid

https://twitter.com/#!/username/media/slideshow

This is obviously a great wee tool if you tend to take a lot of pictures, especially if you are on the go, like a long trip, like my friend (and Travel Photograph) Ken Kaminesky here…

The post Walk back in time with Twitter image galleries appeared first on shoogle designs' blog.