You can put two hidden images on your page, and then add similar buttons on the fly.
Something like this should work:
<img style="display:none;" onload="user_can_access_facebook()" onerror="no_access_to_facebook()" src="http://static.ak.fbcdn.net/rsrc.php/v1/yp/r/kk8dc2UJYJ4.png" />
If the javascript function user_can_access_facebook() should add a similar button to the DOM.
(http://static.ak.fbcdn.net/rsrc.php/v1/yp/r/kk8dc2UJYJ4.png is the URL of the Facebook logo on the login page. It may not be a static link, so you might need to find another static resource to check.)
For twitter you have to do the same.
Edit:
I put together a small POC:
<html> <head> <script language="javascript" type="text/javascript"> function user_can_access(sitename) { var siteDiv = document.getElementById(sitename + '_access'); siteDiv.innerText = "You have access to " + sitename; } function no_access(sitename) { var siteDiv = document.getElementById(sitename + '_access'); siteDiv.innerText = "You do NOT have access to " + sitename; } </script> </head> <body> <img src="http://static.ak.fbcdn.net/rsrc.php/v1/yp/r/kk8dc2UJYJ4.png" onload="user_can_access('Facebook')" onerror="no_access('Facebook')" style="display:none;" /> <img src="http://support.twitter.com/images/twitter-logo-no-bird.png" onload="user_can_access('Twitter')" onerror="no_access('Twitter')" style="display:none;" /> <div id="Facebook_access"></div> <div id="Twitter_access"></div> </body> </html>
To try locally, simply block access to the corresponding domain above (static.ak.fbcdn.net and support.twitter.com).
As stated above, you may need to find other resources that are static for verification. If the URLs for images change to facebook and twitter, you should also change them in your code.
Sani singh huttunen
source share