http://www.patrickstjohn.org/node/101 에서 참조

Facebook

If I want to create a share link for Facebook that works everywhere and has everything I want contained in one URL, I can use Facebook’s “sharer.php” functionality. (Facebook says it’s officially “deprecated,” but there’s no sign of them stopping this implementation anytime soon.)

So let’s say I want to share this link:

http://www.otlcampaign.org/blog/2013/02/04/inconvenient-truth-education-…

I can simply add “http://www.facebook.com/sharer/sharer.php?” before the link, and voila!

Create Custom Share Links for Facebook, Twitter, and Google Plus

Thankfully Facebook was able to properly pull a relevant title, blurb, and image from the page to display. However, given that we want to maximize the number of clicks, what if we wanted to customize things? We can!

However, it gets much more complicated. Let’s say I wanted the title to be The Inconvenient Truth of Education “Reform”!, and have the blurb be Recent events have revealed how market-driven education policies, deceivingly labeled as “reform,” are revealing their truly destructive effects on the streets and in the corridors of government:, and have the thumbnail image be this one:

Create Custom Share Links for Facebook, Twitter, and Google Plus

Looks perfect, but the URL looks like this monstrosity:

http://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://www.otlcampaign.org/blog/2013/02/04/inconvenient-truth-education-reform&p[images][0]=http://www.otlcampaign.org/sites/default/files/journey-for-justice-mlk-memorial.jpg&p[title]=The+Inconvenient+Truth+of+Education+’Reform’!&p[summary]=Recent+events+have+revealed+how+market-driven+education+policies,+deceivingly+labeled+as+%22reform,%22+are+revealing+their+truly+destructive+effects+on+the+streets+and+in+the+corridors+of+government:

Yuck. Who wants to replace all those spaces and punctuation marks with HTML code?

Twitter

Twitter’s single-URL method of sharing is a bit more straightforward, simply because there are fewer things to worry about: it’s just a message and a link (and maybe a twitter user reference or two). So if I want a link to produce this:

Create Custom Share Links for Facebook, Twitter, and Google Plus

I need a link that looks like this:

http://twitter.com/intent/tweet?text=The+Inconvenient+Truth+of+Education+%22Reform%22%3A+http%3A%2F%2Fbit.ly%2F12nPcP2+%28via+%40otlcampaign%29

Still pretty rough.

Solution?

Thankfully, all the code-wrangling needed can be automated thanks to our old pal Javascript. To that end, I’ve set up an easy tool for creating these share links: Share Link Generator.

I’ve also included Google+, which unfortunately doesn’t allow for any customization to the extent that Facebook does.

All you have to do is fill in the fields and click a button. Hope you enjoy!

UPDATE: Manjunath brings up a good point in the comments about mobile sharing: for god knows what reason, Facebook’s mobile sharer.php (on m.facebook.com) doesn’t use the same parameters.

For the mobile Facebook sharer.php, the markup is much simpler, and we can only pick the URL and the title. Like so:

http://m.facebook.com/sharer.php?u=<the url you want>&t=<the title you want>

If you want to force mobile browsers to use the regular Facebook sharer.php, you can simply add “&m2w” (w/out quotes) to the end of the regular Facebook share link. I haven’t extensively tested that yet, so YMMV.

http://www.patrickstjohn.org/node/101 에서 참조

Facebook

If I want to create a share link for Facebook that works everywhere and has everything I want contained in one URL, I can use Facebook’s “sharer.php” functionality. (Facebook says it’s officially “deprecated,” but there’s no sign of them stopping this implementation anytime soon.)

So let’s say I want to share this link:

http://www.otlcampaign.org/blog/2013/02/04/inconvenient-truth-education-…

I can simply add “http://www.facebook.com/sharer/sharer.php?” before the link, and voila!

Create Custom Share Links for Facebook, Twitter, and Google Plus

Thankfully Facebook was able to properly pull a relevant title, blurb, and image from the page to display. However, given that we want to maximize the number of clicks, what if we wanted to customize things? We can!

However, it gets much more complicated. Let’s say I wanted the title to be The Inconvenient Truth of Education “Reform”!, and have the blurb be Recent events have revealed how market-driven education policies, deceivingly labeled as “reform,” are revealing their truly destructive effects on the streets and in the corridors of government:, and have the thumbnail image be this one:

Create Custom Share Links for Facebook, Twitter, and Google Plus

Looks perfect, but the URL looks like this monstrosity:

http://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://www.otlcampaign.org/blog/2013/02/04/inconvenient-truth-education-reform&p[images][0]=http://www.otlcampaign.org/sites/default/files/journey-for-justice-mlk-memorial.jpg&p[title]=The+Inconvenient+Truth+of+Education+’Reform’!&p[summary]=Recent+events+have+revealed+how+market-driven+education+policies,+deceivingly+labeled+as+%22reform,%22+are+revealing+their+truly+destructive+effects+on+the+streets+and+in+the+corridors+of+government:

Yuck. Who wants to replace all those spaces and punctuation marks with HTML code?

Twitter

Twitter’s single-URL method of sharing is a bit more straightforward, simply because there are fewer things to worry about: it’s just a message and a link (and maybe a twitter user reference or two). So if I want a link to produce this:

Create Custom Share Links for Facebook, Twitter, and Google Plus

I need a link that looks like this:

http://twitter.com/intent/tweet?text=The+Inconvenient+Truth+of+Education+%22Reform%22%3A+http%3A%2F%2Fbit.ly%2F12nPcP2+%28via+%40otlcampaign%29

Still pretty rough.

Solution?

Thankfully, all the code-wrangling needed can be automated thanks to our old pal Javascript. To that end, I’ve set up an easy tool for creating these share links: Share Link Generator.

I’ve also included Google+, which unfortunately doesn’t allow for any customization to the extent that Facebook does.

All you have to do is fill in the fields and click a button. Hope you enjoy!

UPDATE: Manjunath brings up a good point in the comments about mobile sharing: for god knows what reason, Facebook’s mobile sharer.php (on m.facebook.com) doesn’t use the same parameters.

For the mobile Facebook sharer.php, the markup is much simpler, and we can only pick the URL and the title. Like so:

http://m.facebook.com/sharer.php?u=<the url you want>&t=<the title you want>

If you want to force mobile browsers to use the regular Facebook sharer.php, you can simply add “&m2w” (w/out quotes) to the end of the regular Facebook share link. I haven’t extensively tested that yet, so YMMV.

http://www.tomanthony.co.uk/blog/detect-visitor-social-networks/ 에서 참조

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:

  1. <script>
  2.     function twitterLoginStatus(state) {
  3.       alert(state);
  4.     }
  5. </script>
  6. <script src=‘https://api.twitter.com/sessions/present.js?callback=twitterLoginStatus’></script>

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:

  1. <img src=“https://twitter.com/login?redirect_after_login=%2Fimages%2Fspinner.gif” />

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:

  1.  <script type=“text/javascript”>
  2.    function show_login_status(network, status)
  3.    {
  4.     if (status)
  5.     {
  6.      alert(“Logged in to “ + network);
  7.     }else{
  8.      alert(“Not logged in to “ + network);
  9.     }
  10.    }
  11.  </script>

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

  1. <img style=“display:none;”
  2. onload=“show_login_status(‘Google’, true)”
  3. onerror=“show_login_status(‘Google’, false)”
  4. src=“https://accounts.google.com/CheckCookie?continue=https%3A%2F%2Fwww.google.com%2Fintl%2Fen%2Fimages%2Flogos%2Faccounts_logo.png&followup=https%3A%2F%2Fwww.google.com%2Fintl%2Fen%2Fimages%2Flogos%2Faccounts_logo.png&chtml=LoginDoneHtml&checkedDomains=youtube&checkConnection=youtube%3A291%3A1”
  5. />
  6.  
  7. <img style=“display:none;”
  8. onload=“show_login_status(‘GooglePlus’, true)”
  9. onerror=“show_login_status(‘GooglePlus’, false)”
  10. src=“https://plus.google.com/up/?continue=https://www.google.com/intl/en/images/logos/accounts_logo.png&type=st&gpsrc=ogpy0”
  11. />
  12.  
  13. <img style=“display:none;” src=“https://twitter.com/login?redirect_after_login=%2Fimages%2Fspinner.gif” onload=“show_login_status(‘Twitter’, true)” onerror=“show_login_status(‘Twitter’, false)” />
  14.  
  15. <div id=“fb-root”></div>

Finally, somewhere after that HTML stick this Javascript:

  1. <script>
  2.  window.fbAsyncInit = function(){
  3.   FB.init({ appId:‘xxxxxxxxxxxx’, status:true,  cookie:true, xfbml:true});
  4.   FB.getLoginStatus(function(response){
  5.    if (response.status != “unknown”)
  6.    {
  7.     show_login_status(“Facebook”, true);
  8.    }else{
  9.     show_login_status(“Facebook”, false);
  10.    }
  11.   });
  12.  };
  13.  // Load the SDK Asynchronously
  14.  (function(d){
  15.   var js, id = ‘facebook-jssdk’; if (d.getElementById(id)) {return;}
  16.   js = d.createElement(‘script’); js.id = id; js.async = true;
  17.   js.src = ”//connect.facebook.net/en_US/all.js”;
  18.   d.getElementsByTagName(‘head’)[0].appendChild(js);
  19.  }(document));
  20. </script>

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.

http://www.tomanthony.co.uk/blog/detect-visitor-social-networks/ 에서 참조

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:

  1. <script>
  2.     function twitterLoginStatus(state) {
  3.       alert(state);
  4.     }
  5. </script>
  6. <script src=‘https://api.twitter.com/sessions/present.js?callback=twitterLoginStatus’></script>

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:

  1. <img src=“https://twitter.com/login?redirect_after_login=%2Fimages%2Fspinner.gif” />

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:

  1.  <script type=“text/javascript”>
  2.    function show_login_status(network, status)
  3.    {
  4.     if (status)
  5.     {
  6.      alert(“Logged in to “ + network);
  7.     }else{
  8.      alert(“Not logged in to “ + network);
  9.     }
  10.    }
  11.  </script>

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

  1. <img style=“display:none;”
  2. onload=“show_login_status(‘Google’, true)”
  3. onerror=“show_login_status(‘Google’, false)”
  4. src=“https://accounts.google.com/CheckCookie?continue=https%3A%2F%2Fwww.google.com%2Fintl%2Fen%2Fimages%2Flogos%2Faccounts_logo.png&followup=https%3A%2F%2Fwww.google.com%2Fintl%2Fen%2Fimages%2Flogos%2Faccounts_logo.png&chtml=LoginDoneHtml&checkedDomains=youtube&checkConnection=youtube%3A291%3A1”
  5. />
  6.  
  7. <img style=“display:none;”
  8. onload=“show_login_status(‘GooglePlus’, true)”
  9. onerror=“show_login_status(‘GooglePlus’, false)”
  10. src=“https://plus.google.com/up/?continue=https://www.google.com/intl/en/images/logos/accounts_logo.png&type=st&gpsrc=ogpy0”
  11. />
  12.  
  13. <img style=“display:none;” src=“https://twitter.com/login?redirect_after_login=%2Fimages%2Fspinner.gif” onload=“show_login_status(‘Twitter’, true)” onerror=“show_login_status(‘Twitter’, false)” />
  14.  
  15. <div id=“fb-root”></div>

Finally, somewhere after that HTML stick this Javascript:

  1. <script>
  2.  window.fbAsyncInit = function(){
  3.   FB.init({ appId:‘xxxxxxxxxxxx’, status:true,  cookie:true, xfbml:true});
  4.   FB.getLoginStatus(function(response){
  5.    if (response.status != “unknown”)
  6.    {
  7.     show_login_status(“Facebook”, true);
  8.    }else{
  9.     show_login_status(“Facebook”, false);
  10.    }
  11.   });
  12.  };
  13.  // Load the SDK Asynchronously
  14.  (function(d){
  15.   var js, id = ‘facebook-jssdk’; if (d.getElementById(id)) {return;}
  16.   js = d.createElement(‘script’); js.id = id; js.async = true;
  17.   js.src = ”//connect.facebook.net/en_US/all.js”;
  18.   d.getElementsByTagName(‘head’)[0].appendChild(js);
  19.  }(document));
  20. </script>

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.