Cross-Platform Social Media Sharing Tool
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:
SOCIAL NETWORKING
Google+ (docs):
This produces the following button:
Facebook (docs):
<script type="text/javascript">//
This produces the following button:
MySpace (docs):
This produces the following button:
LinkedIN (docs):
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script> <script type="IN/Share" data-counter="top"></script>
This produces the following button:
DISCOVERY
Twitter (docs):
Tweet <script type="text/javascript">//
This produces the following button:
Tweet
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 = 'https://platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();
</script>
This produces the following button:
SOCIAL BOOKMARKING
Reddit (docs):
<script type="text/javascript">// <script type="text/javascript" src="http://www.reddit.com/static/button/button3.js"></script>
This produces the following button:
Digg (docs):
<script type="text/javascript">//
This produces the following button:
Delicious (docs):
This produces the following button:
VIDEOS
*YouTube offers two methods:
- Using a YouTube-provided private email/MMS address: 012356789@mms.youtube.com (could be used in mailto: link but can only be visible to that user or falls outside of YouTube’s usage terms)
- API-based Authentication, using one of YouTube’s several video upload API methods
Tumblr (docs):
<script type="text/javascript" src="http://platform.tumblr.com/v1/share.js"></script>
<span id="tumblr_button_abc123"></span>
<script type="text/javascript">
var tumblr_video_embed_code = "";
var tumblr_video_caption = "";
</script>
<script type="text/javascript">
var tumblr_button = document.createElement("a");
tumblr_button.setAttribute("href", "http://www.tumblr.com/share/video?embed=" + 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('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;");
tumblr_button.innerHTML = "Share on Tumblr";
document.getElementById("tumblr_button_abc123").appendChild(tumblr_button);
</script>
This produces the following button:
IMAGES
*Flickr offers two methods:
- Using a Flickr-provided private email address: private-email@flickr.com (could be used in mailto: link but can only be visible to that user or falls outside of Flickr’s usage terms)
- API-based Authentication, using flickr photo upload API method
Imgur (docs):
<script> function share(imgURL, title) { var canvas = document.getElementById('imgur'); var cxt = canvas.getContext('2d'); var img = new Image(); img.src = imgURL; cxt.drawImage(img,0,0); 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"); console.log('Uploading...'); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://api.imgur.com/2/upload.json"); xhr.onload = function() { document.getElementById('imgur_page') = 'Image uploaded to: ' + JSON.parse(xhr.responseText).upload.links.imgur_page; } xhr.send(fd); } </script>
This produces the following button:
MUSIC
*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).
-OR-
Embed it as follows:
<iframe src="http://bcmoney-mobiletv.com/widgets/share/" frameborder="0" scrolling="no"> <script src="http://bcmoney-mobiletv.com/widgets/share/share.js"></script> </iframe>
You can pass in the following parameters:
| Name | Description | Example |
|---|---|---|
| url | URL of the item being shared | ?url=http://example.com/articles/how-to-be-cool |
| 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=http://example.com/images/1.jpg |
| audio | Audio file URL to pass to SoundCloud or other Sound-sharing service | &audio=http://example.com/sounds/interview1.wav |
| 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%22http://example.com/clips/howtocool-promo.mp4%22%3E%3C%2Fiframe%3E |
(*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.
Related Articles
- Apture sale (bumblebeelabs.com)
- Americans Spend 23% of Internet Time on Social Networks [STUDY] (mashable.com)
- More Time Than Ever Spent on Facebook, Watching TV & Video (ooyala.com)
- Social Media Digest: McFail, Snickers Own Goal & More (umpf.co.uk)
- Google buys two Bay Area startups — Katango and Apture (mercurynews.com)
- Got a Social Media personality? Are you a ! or . or 🙂 or LMAO kind of poster…? (bizcommunicator.wordpress.com)
- Want to Sell with Social Media? Get Back to Basics (revenews.com)
