The quick version: I’ve found a way to abuse the login mechanism for both Twitter and Google to detect whether a user is logged in to that service. Facebook provides an API for this. So I provide a cross-browser javascript template that works for all 3 networks. If you want to get straight to the code jump to the implementation section or check out the Social Network Login Status Detector Demo.

Introduction

I was interested in seeing whether it would be possible to track which social networks a website visitor is logged into at the time of their visit; it could be cool for selecting which social media buttons you show them, what sort of marketing you do to them, or simply to evaluate whether you should be participating more on a certain social network. I was interested in Facebook, Twitter and Google+; as an SEO I was also interested in whether people were logged into a general Google account so I could compare which percentage of those had a Google+ account.

A quick search turned up an interesting post from Mike Cardwell who had a method for doing this for Facebook, Twitter and Gmail, but unfortunately it didn’t work in Internet Explorer. Secondly, I knew there was a better method than Mike’s for Facebook, which I’d seen presented by Mat Clayton of Mixcloud; he uses Facebook’s API to do the same thing (see slide 15). Mat’s method works great across browsers, so that solved the Facebook side of this.

Finding a way in to Twitter and Google+

Wat I needed was a method for detecting whether a visitor to my site was logged in to Twitter, Google and more specifically Google+.

Thanks to abraham from Hacker News I discovered that Twitter has an undocumented endpoint that simply returns true or false for whether the current user is logged in! It is very simple:

However, due to boring technical details concerning MIME types this code doesn’t work on IE9, which (unfortunately) for many purposes makes it less than ideal.

Browsers nowadays are very sensitive to cross site requests and the all to common exploits that abuse them, and so unless the 3rd party site plans to allow it using javascript for this is probably going to be difficult. The other great way to make cross domain requests is with image tags.

Tricking login mechanisms

I came up with the theory that I needed to try to access and image on Twitter/Google’s sites that would only be available to users when they are logged in. Using javascript I could detect whether the image loaded or not and thus determine whether the user was loggedin. However, these are obviously going to be few and far between (image assets are often static and so on CDNs and/or not protected in such a manner), if they exist at all (I didn’t find any), so I was back to square one. I needed a protected area of the site, but needed the file contents to be an image.

My winning moment was realising that some naive login systems might be open to abuse for exactly this purpose. It is often the case that you try to access a specific page on a site, lets say the “Upload a photo” page but you need to be logged in to do so. If you are not logged into the site in question, when you visit the URL the page redirects to the Login page to authenticate you are who you say you are; however the site wants to be helpful and send you to the page you were looking for so they keep a track of that target page in the URL as a parameter and then helpfully redirect you to that page after login is complete.

What happens if you visit the login page with a ‘redirect on login’ parameter and you are already logged in? When implemented in a naive fashion you are simply immediately redirected to the page specified in the parameter. Some sites limit that parameter to being another page on the same domain, but we’ll see that doesn’t help for this trick.

This mechanism is open to abuse in exactly the way I needed; I could set the ‘redirect on login’ page to be an image file on the same domain. For example:

In this example, if I am logged in Twitter is kind enough to 302 redirect me to the image file I specified, but if I am not logged in I am show the login page. It turns out that both Twitter and Google’s login mechanisms are susceptible to exactly this trick. It seems LinkedIn and Tumblr are currently immune to this, though I didn’t dig too deep so there might be another redirect URL for them.

Putting it all together

From this point on it was quite easy to hack together some javascript; just stick this code in the <head></head> section of your page:

Then, anywhere in your code that seems like a nice place stick this HTML:

Finally, somewhere after that HTML stick this Javascript:

You will need to replace xxxxxxxxx above with the appID for an app created for your domain; if you don’t have one you can create one in about 60 seconds. Simply visit https://developers.facebook.com/apps whilst logged in to Facebook, and click “Create New App”. You will be prompted for a “Display Name”, and you can enter any old dummy text here and press Continue. On the next page it is only necessary to fill out the “App Domain” and the “Website” with the URL of the domain you want to use this code on. Do that, save changes and grab the “App ID” from the top of the page and enter it in the code above.

You should be all set! Now you can change your alert() functions to do whatever you want based on the login status of the user. See a demo of it in action Social Network Login Status Detector Demo.

Wrap up

In my testing this worked on a range of versions of Firefox and Chrome, IE versions 7 and up, Safari and Opera. It may be that these loopholes get fixed, but in the meantime I implore you to only use this in nice ways. There is an argument that a 3rd party even knowing what other sites you are logged into is a breach of your privacy, and I can certainly see why some people would feel like that (especially if this was scaled up to more personal sites that you might be logged into). If you want to prevent this then for Firefox you can try RequestPolicy or NoScript. For Chrome you can give ScriptNo a shot. On IE you can try giving Firefox or Chrome a try.

However, I do also think that this sort of thing can be used in good ways – serving only a subset of social buttons to your users, or determining whether you should be providing support on a given social platform etc. If anyone has any nice suggestions for other ways you could use (nicely) use this, I’d love to hear.

I’ve broken the need for quick checks of these data down into 3 categories and continuing my recent trend of throwing together tools for the SEO community to use I’ve put together 3 tools to help out in these instances.

I created a simple Javascript function which generates the signed authentication hash. It’s very easy to use:

The parameters you must pass are the SEOmoz Access ID and the Secret Key. Once you have the timeStamp and signature, in addition to the Access ID you can easily form the request on the server side; here is some example PHP code:

Make sure you don’t transmit the Secret Key. You can grab the standalone Javascript file here: SEOmoz API Javascript.

You may want to consider, as an alternative to using JS in this way doing full SEOmoz Application Authorization.

If you’ve never heard of mTurk then there are good introductions here and here. Basically mTurk provides a huge online pool of workers – people at home who get paid anywhere between a few cents to a few dollars to complete simple tasks online. Anyone can join the workforce as a ‘worker’, and people in the US can become ‘requesters’ that set tasks. Here I describe how to become a requester and how to setup tasks that bring workers to your SERP Turkey tests. Don’t despair if you are not in the US – there is a method for you to get Amazon Turk workers with an extra step – see the section below.

Once you’ve registered as a requester (which may take a day for your first payment to go through), and created your template (10 mins) you’ll be able to create new SERP Turkey tests and get the live in SERP Turkey in less than 5 minutes.

Registering as a requester

So – lets get started. Head over to the mTurk request start page, and fill in your email and press the button to proceed. You’ll be asked for your name, email confirmation and to create a password. Next you’ll be asked for your company name and US address and phone number. Check the box to agree to the terms and proceed to the next screen. So far so good!

Ok, if you’d like to take the tour you’re offered now, go for it and I’ll see you on the over side. Otherwise just press ‘Get Started’ and start setting up your first task.

But some credit

mTurk works on a prepayment system and you have to buy credit to start. This is simple – just goto ‘Account Settings’ and then click the ‘Prepay for Mechanical Turk HITs’ link.

You’ll need a US registered credit card (though I’ve heard some people got through without one) to make the payment. be aware that your first payment might take 24-36 hours to get approved.

Creating a task (HIT) for SERP Turkey

mTurk tasks are called HITs (Human Intelligence Task) and are generally created using re-usable templates. Templates will define:

• HIT Title, Description & Keywords
• Payment per task (per worker)
• How many workers you want
• Time allotted per assignment
• How long before the task expires?
• Worker required qualifications

Templates will also define how you wish the question of the task to be presented to the user.

So, lets get going… You’ll be asked what sort of work you want the user to do:

Select ‘Categorization’ and you’ll be presented with a list of pre-built template types:

Select the Search Relevance template, which we’ll customise.

Here are the settings I’ve been using:

Title: Click the best result from a set of Search Results
Description: Simply click on the result that you’d select yourself for that search.
Keywords: search, evaluate, opinion, google, quick

Time allotted per assignment: 2 minutes
HIT expires in: 7 days (generally I’ve not been fussed about needing the results before a deadline – at $0.05 per HIT you should allow 24-36 hours per 100 users)

HIT Approval rate: >=90% or >=95% depending how quickly I wanted the results. Obviously >=95% gets slightly improved results but a little slower.
Number of HITS approved: >100 or >500, once again depending on speed vs. quality

Reward per assignment: $0.05 – I experimented with $0.10 but didn’t see any real benefit in speed or quality. I’d rather twice the number of users!
Number of assignments per hit: 200 – this is entirely up to you and your budget and the number of variants you want. The more the better! I’d say ~100 per variant is an absolute minimum. If you’re experiment has subtle changes only between the variants then you’ll need even more. Note that each worker can only do a HIT once.

If you want to read more about your configuration options then look at page 10 of this mTurk guide.

Once you’ve chosen your settings press the ‘Design Layout’ button to proceed. We’ll overwrite the template provided – press the “Edit HTML Source” button you see at the top of the text area. Paste in the code here:

<br /> <h3 style="font-weight: normal; ">Pick a Search Result</h3><br /> <p style="font-weight: normal; ">Imagine you searched for "<b>${term}</b>" in Google.</p><br /> <p style="font-weight: normal; ">When you click the link you will see (in new window)  a list of <i>dummy</i> search results for that search; please click the result that you’d deem most relevant:</p><br /> <p><b><span class="Apple-style-span" style="font-weight: normal; "><b><a target="_blank" href="${result_page}">${result_page}</a></b></span></b></p><br /> <p>Please paste the result code on the second screen into the answer box below. Thanks!</p><br /> <p><textarea name="comment" cols="80" rows="3"></textarea></p><br />

Click the ‘Edit HTML source’ button again to toggle back to display mode and you should see something like this (click to enlarge):

The ${term} and ${result_page} markers you see will be filled in when you create a task from this template. This makes the template re-usable for multiple SERP Turkey tasks. We ask the user to paste the response code they get back from mTurk as we have to ask them a question (mTurk rules), and this response code encodes whether their click was recorded or not (if they timed out by taking longer than 5 minutes, or fiddled with the page somehow they’ll get a failure code). Only you will know which codes are a success for a test (shown in your SERP Turkey dashboard).

Hit the “Preview and Finish” button and you’re template will be saved and ready to use. Woo!

Creating a SERP Turkey task in mTurk

Now you have a template, you need to create a HIT when you want to run a SERP Turkey test.

Step 1: Create your test in SERP Turkey. If you’re not sure how, then read the SERP Turkey introduction blog post I wrote on SEOmoz.

Step 2: On the SERP Turkey Dashboard page you’ll find a download link for an mTurk input file; download it. This input file will fill in the ${term} and ${result_page} variables we created in our template.

Step 3: Login to mTurk and hit the chubby “Publish” button at the top. Select whichever template you want (you probably just have the one we just created if this is your first time).

Step 4: Upload the input file you downloaded (or select a previously uploaded one).

Step 5: Now you’ll see a preview of how the HIT will look to workers. If everything looks in order press “Next” to see the final screen.

Step 6: You can now give this batch of HITs a name, review how much it is likely to cost etc. If everything looks good then hit “Publish”.

Now you’re test is live and out there in the world!

Monitoring results

You can now monitor (and download) the results in realtime via the SERP Turkey interface. You can also view the “Manage” tab in mTurk to see how many workers have recorded completing the job on your end.

You should periodically review the results in mTurk and approve the workers work, so they get paid (you want to establish a good relationship as a requester so try to pay within a couple of days – you can automate payment in your template settings). If you’re so inclined you can see what response code each worker entered and compare this to the ‘success’ response code in SERP Turkey’s dashboard to see whether their click was counted or not – they are only not counted currently if they took longer than 5 minutes from viewing the SERPs to clicking a result. You should be able to safely ignore this and just pay all the workers.

Cancelling a job

If you’re monitoring the results and realise that the test isn’t going how you planned, there is a problem or you think you already have enough data then you can cancel a job at any time in the Manage page of mTurk.

Outside of the US?

If you are outside of the US and cannot access mTurk directly, worry not. There is another solution: Smartsheet Crowdsourcing actually leverages Amazon’s Mechanical Turk, but you don’t need to be in the US to use it. You do have to pay a $30 monthly subscription but then you can leverage Turk. If someone wants to write a Smartsheet SERP Turkey post I’ll happily add a link in here and on the SERP Turkey page!

Future

IF SERP Turkey proves popular I will look at adding more features, and either way I will soon make it so you can download all the raw click data for your tests to do your own more detailed analysis. I just haven’t had time!

Wrap up

That’s pretty much all there is to it!

If you have any feedback or suggestions then contact me by email at turkey@tomanthony.co.uk or via twitter at @TomAnthonySEO, or leave a comment here.

Happy Turkeying!