Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

Cross-Platform Social Media Sharing Tool

Posted by bcmoney on February 1, 2012 in AJAX, JavaScript, Web Services with 2 Comments

No Gravatar
English: Infographic on how Social Media are becoming the new Mainstream Media

Image via Wikipedia

Social media has taken over the web (for now) and the name of the game is sharing, something legislation like SOPA and PIPA just didn’t seem to understand. Rather than figuring out a new economic model based on the reality of sharing on the web, that rewards this type of activity (which is essentially just a more trackable form of “word-of-mouth” advertising, the best kind of promotion for any product, service or brand), instead these legislative measures simply try to take us back to the stone-age by applying a “copyright theft” label to anything as mundane and innocent as posting a link to potentially copyrighted materials. Well, whether bureaucrats and greedy corporate execs approve of the idea or not, the culture of sharing that the internet has bred is definitely here to stay!

In these days of non-stop distractions and the constant bombardment of messages towards the average internet user, you (i.e. your website, or your brand) absolutely have to have a presence at least somewhere in the endless streams of information available via the leading social media sources. That’s not just the typical “Social Media marketer” hype but a sadly true statement. Believe me, I really wish it weren’t true, but just look at these figures and the infographic to the right showing time spent logged in to the major Social Networks and Social Media sites:

Here is where I should admit that I could have just started off this post with saying “use a third party sharing service” and been done with it. Let me clearly state now that yes, I do realize there are many services out there that can provide you this kind of utility out-of-the-box, within a few clicks and simply agreeing to their terms then completing the sign up. The two that come to mind are ShareThis and AddThis (both of which I have no personal interest or stake in, aside from having been a user of each in the past, on different sites).

However, with any third party service, you are effectively giving them access to your data, and depending on the amount of code involved in running their solutions, may also be opening up potential security risks by including third-party JavaScript. Last but not least, and most significantly, as with any third party service, you never want to rely on them too much. I’ve learned this the hard way, especially of late with Google’s increasingly frequent acquisitions of promising startups, which turn out to be buy-to-fry (as in buy to remove a competitor’s product from the market completely), or buy to discard (otherwise leave to collect dust or stop adding new features but keep a service running, in order to prevent any future direct competition). Two that come to mind are Aardvark (a community-powered Question & Answer service) and Apture (a community blogging and website enhancement tool), the former of which is still alive thus falls into the “collect dust” pattern, and the latter of which was discontinued to be integrated into the Google behemoth or lost to the annals of internet history forever.

Also, expect a similar post to this one discussing how to build a simple Apture alternative next month!
Sharing Tools and Badges are organized by content type below:



Google+ (docs):

This produces the following button:

Facebook (docs):

<script type="text/javascript">//

This produces the following button:

MySpace (docs):

Share on Myspace

This produces the following button:

Share on Myspace

LinkedIN (docs):

<script src="" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script>

This produces the following button:



Twitter (docs):

<script type="text/javascript">// 

This produces the following button:

StumbleUpon (docs):

<su:badge layout="5">
<script type="text/javascript"> 
 (function() { 
     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
      li.src = ''; 
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 

This produces the following button:



Reddit (docs):

<script type="text/javascript">// 
<script type="text/javascript" src=""></script>

This produces the following button:

Digg (docs):

<script type="text/javascript">// 

This produces the following button:

Delicious (docs):


This produces the following button:



*YouTube offers two methods:

  1. Using a YouTube-provided private email/MMS address: (could be used in mailto: link but can only be visible to that user or falls outside of YouTube’s usage terms)
  2. API-based Authentication, using one of YouTube’s several video upload API methods

Tumblr (docs):

<script type="text/javascript" src=""></script>

<span id="tumblr_button_abc123"></span>

<script type="text/javascript">
    var tumblr_video_embed_code = "";
    var tumblr_video_caption = "";

<script type="text/javascript">
    var tumblr_button = document.createElement("a");
    tumblr_button.setAttribute("href", "" + encodeURIComponent(tumblr_video_embed_code) + "&caption=" + encodeURIComponent(tumblr_video_caption));
    tumblr_button.setAttribute("title", "Share on Tumblr");
    tumblr_button.setAttribute("style", "display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('') top left no-repeat transparent;");
    tumblr_button.innerHTML = "Share on Tumblr";

This produces the following button:



*Flickr offers two methods:

  1. Using a Flickr-provided private email address: (could be used in mailto: link but can only be visible to that user or falls outside of Flickr’s usage terms)
  2. API-based Authentication, using flickr photo upload API method

Imgur (docs):


    function share(imgURL, title) {
    var canvas = document.getElementById('imgur');
    var cxt = canvas.getContext('2d');
    var img = new Image();
    img.src = imgURL;
    try {
        img = canvas.toDataURL('image/jpeg', 0.9).split(',')[1];
    } catch(e) {
        img = canvas.toDataURL().split(',')[1];
  var fd = new FormData();
  fd.append("title", title);
  fd.append("image", img); // Append the file
  fd.append("key", "b57e00e47959b75db230afc1a609acef");
  var xhr = new XMLHttpRequest();"POST", "");
  xhr.onload = function() {
    document.getElementById('imgur_page') = 'Image uploaded to: ' + JSON.parse(xhr.responseText).upload.links.imgur_page;

This produces the following button:




*Last.FM Scrobbler (docs):
The only option here for scrobbling from your app is to go through the full authentication flow and generate a timestamped auth token which temporarily grants permission to post an update to the user’s account. This can only be a textual update about a particular artist/album/track combination that was listened to, as Last.FM is not an audio file hosting service, thus this will not help if you’re looking for a one-click audio file host.

SoundCloud (docs):


This produces the following button:

* = Requires oAuth or another proprietary Authentication mechanism to be followed before content can be shared or posted to the service.


A demo of all these Social Media buttons and Sharing Tools in action is included below (along with download so you could run it on your own servers).


Embed it as follows:

<iframe src="" frameborder="0" scrolling="no">
<script src=""></script>

You can pass in the following parameters:

Name Description Example
url URL of the item being shared ?url=
title *Textual short title of the item being shared &title=How%20To%20Be%20Cool
desc *Textual long-form description of the item being shared &desc=This%20is%20an%20interesting%20look%20into%20the%20art%20of%20being%20cool.
image Image file URL to pass to Imgur or other Image-sharing service &image=
audio Audio file URL to pass to SoundCloud or other Sound-sharing service &audio=
video Video embed code to pass to Tumblr, Blog, etc &video=%3Ciframe%20allowtransparency%3D%22true%22%20scrolling%3D%22no%22%20marginwidth%3D%220%22%20marginheight%3D%220%22%20frameborder%3D%220%22%20width%3D%22600%22%20height%3D%22500%22%20src%3D%22

(*URL encoded, except for URL root)


Lastly, I added the both the options of switching to a vertical layout (pass parameter width=0px, in fact any width between 0-75 will attempt to use a vertical layout instead if it renders properly in your browser) or alternatively can hide the icons altogether (pass parameter width=0) in order to avoid having too much clutter and giving your users social media overload. The hover-able icon is courtesy of the open source ShareIcons project, which is sponsored by ShareThis.