Free Light weight Social media sharing javascript for Facebook, Twitter, Stumble Upon, Digg and Reddit

Social Media Buttons or buttons that help you share the content on bookmarking websites such as Stumble Upon, Reddit or Digg or social networking Websites such as Facebook or Twitter. Adding the buttons helps you to expose your content to a broader audience.

There are lots of social media button providers such as AddThis or ShareThis. I think it is overloaded with features that makes your page load slow as well as bring in unintentional 3rd party javascript code ( or flash tracker ) which runs on your blog.

So it is always safe to use your own script or scripts which you can read understand and verify it just does what it is suppose to do. :)

Javascript Object for Social Media Sharing

var share = { fb:function(title,url) { this.share('http://www.facebook.com/sharer.php?u=##URL##&t=##TITLE##',title,url); }, tw:function(title,url) { this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url); }, su:function(title,url){ this.share('http://www.stumbleupon.com/submit?url=##URL##',title,url); }, reddit:function(title,url){ this.share('http://www.reddit.com/submit?url=##URL##',title,url); }, digg:function(title,url){ this.share('http://digg.com/submit?phase=2&url=##URL##&title=##TITLE##',title,url); }, share:function(tpl,title,url) { if(!url) url = encodeURIComponent(window.location); if(!title) title = encodeURIComponent(document.title); tpl = tpl.replace("##URL##",url); tpl = tpl.replace("##TITLE##",title); window.open(tpl,"sharewindow"+tpl.substr(6,15),"width=640,height=480"); } };

The share javascript object is used for social media sharing. In its simplest usage all you have to do is call share.tw(), to open a popup that shows twitter page.

Documentation

Functions

share.tw(); for posting to Twitter share.fb(); for posting to Facebook share.su(); for posting Stumble Upom share.digg(); for posting to Digg share.reddit(); for posting to Reddit.

By default the title of the current page and url of the current page are passed as arguments if you dont specify any.

Minified Code and Installation

var share={fb:function(a,b){this.share("http://www.facebook.com/sharer.php?u=##URL##&t=##TITLE##",a,b)},tw:function(a,b){this.share("http://twitter.com/home?status=##URL##+##TITLE##",a,b)},su:function(a,b){this.share("http://www.stumbleupon.com/submit?url=##URL##",a,b)},reddit:function(a,b){this.share("http://www.reddit.com/submit?url=##URL##",a,b)},digg:function(a,b){this.share("http://digg.com/submit?phase=2&url=##URL##&title=##TITLE##",a,b)},share:function(a,b,c){c||(c=encodeURIComponent(window.location)); b||(b=encodeURIComponent(document.title));a=a.replace("##URL##",c);a=a.replace("##TITLE##",b);window.open(a,"sharewindow"+a.substr(6,15),"width=640,height=480")}};

Copy paste the above code to any of your javascript files or add a new file or include it in your html source. ( <script> //The above code here. </script> )

Use onclick events of Buttons or Images to fire the functions. :)

For more check out the buttons below ...

25 Mar, 2010
Comments (1)
  • Creating Windows Media Skins

    I read your article, instructions and code for how to create new wmp skins, it's a great article. It's the only one I found and I've been searching for days, looking for books on the subject but can not find.

    I followed your sample and instructions, but It's not working quite right.
    The image I use for the background does not show up and instead it shows like the file does not exist. Two questions regarding this background image. Does it have to be a specific size WidthXHeight? what is the limit. Secondly, can it be with the rest of the files, such as the javascript and images? or does it have to be in a different folder. Mine are in the same folder but the image does not appear on
    the newly creates skin selection. Lastly, what utility do I use to compress the files into a .wmz file. I'm assuring in order for this to work, these files must be zipped into a .wmz file but don't know what tool to use to do that?

    Can I change the background image of a skin during a session, after a certain period of time? Are there functions where I can set timers and change the image after lets say 3 minutes or some other condition?

    Where can I learn more about this stuff? Where did you get your knowledge about this.

    Finally, do you have similar articles and instruction on creating "visualization"?
    Where and how can I find them.

    Thank you so much.

    Jesse

    By Jesse on 19 Apr, 2011
You may also like
Tags
On Facebook
Email Newsletter