Social Sharing Links without Widgets

By  on  

Social sharing sites like Facebook, Twitter, and Google Plus are essential for people who blog like myself.  Why write about something you're passionate about if no one can find the article (purposely or by chance?)  People share enough of your posts and you get noticed and get a sweet job at Mozilla...in my case.

What I don't like about the social sharing sites are their widgets:  they load very slowly, you can't customize how they look, and they allow social sites to track which sites you're viewing.  Slow, ugly, and invasive -- yuck.  You can, however, create social sharing links of your own, making sure to open the sharing window using some custom JavaScript.  Here's how!

The JavaScript

I've separated each major share site into it's own function:

function shareTwitter(url, text) {
  open('http://twitter.com/share?url=' + url + '&text=' + text, 'tshare', 'height=400,width=550,resizable=1,toolbar=0,menubar=0,status=0,location=0');  
}

function shareFacebook(url, text, image) {
  open('http://facebook.com/sharer.php?s=100&p[url]=' + url + '&p[images][0]=' + image + '&p[title]=' + text, 'fbshare', 'height=380,width=660,resizable=0,toolbar=0,menubar=0,status=0,location=0,scrollbars=0');
}

function shareGooglePlus(url) {
  open('https://plus.google.com/share?url=' + url, 'gshare', 'height=270,width=630,resizable=0,toolbar=0,menubar=0,status=0,location=0,scrollbars=0');
}

You can add click listeners or use event delegation to call each function when a share button is clicked.  If you want to display the share count for each service, I've got a recipe for getting Twitter and Facebook share counts via JSONP.

Using your own custom styles and the functions above, you can create elegant social sharing buttons without using each service's widget.  Your site becomes faster, more stylish, and respects your user's privacy.  Score!

Recent Features

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

  • By
    Create a Spinning, Zooming Effect with CSS3

    In case you weren't aware, CSS animations are awesome.  They're smooth, less taxing than JavaScript, and are the future of node animation within browsers.  Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects...

  • By
    Create a Dynamic Flickr Image Search with the Dojo Toolkit

    The Dojo Toolkit is a treasure chest of great JavaScript classes.  You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo.  You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within...

Discussion

  1. I’ve been working on something similar, and I started off looking for this very post… But that was a couple of weeks ago. I guess your blog is just what comes to mind first when I’m trying to think of helpful JavaScript.

    What I came up with was similar, but involved URL & URLSearchParams. Unfortunately, those are not supported so well. Even Chrome doesn’t have URL.SearchParams

  2. It is returning me Twitter API error. Any guess?

    • Works well for me. Which browser/device?

    • Chrome on Windows8

  3. Hey, you should be using https:// links to Twitter and Facebook. They work too, and are better for user privacy.

    I use slightly different links within my own website for Twitter and Facebook as well – the Twitter one uses an intent link, the Facebook one has a different thing too. https://media.info/radio – the ‘share’ links are on the right-hand side.

  4. Great post!

    I tried using these links on my iPhone, but the Facebook one didn’t quite work as expected. It loads in a new page/tab, but none of the information is carried over. Any ideas?

  5. Aicke Schulz

    I’m not sure if I get it right, but custom sharing plugins, which prevent the initial widget loading, are out there a long time, so this tip feels a bit oldschool. Sorry, if I’m wrong.
    One example is “SocialSharePrivacy” initially from a german tech news page, with forks like https://github.com/patrickheck/socialshareprivacy/ or with lot more options https://github.com/panzi/SocialSharePrivacy.

    Second, maybe for your interest, the mentioned (unofficial) sharing count api for twitter, will be removed next month, see https://twittercommunity.com/t/a-new-design-for-tweet-and-follow-buttons/52791.
    “The Tweet button has displayed share count over the last five years by querying a JSON endpoint hosted on various domains. These private JSON endpoints have been used by third-party developers over the years to retrieve a simple share count of any URL. These endpoints will be shut down next month when the Tweet button removes its share count feature.”

  6. It is returning me Twitter API error. Any guess?

  7. Jai

    Hey, the Facebook share in this example and on the site doesn’t work on mobile Safari, iOS

    • Jai

      This is the workaround I found that works for sharing to Facebook on mobile

      open('https://m.facebook.com/sharer/sharer.php?u=' + urlLocation + '&picture=' + image + '&description=' + text, 'facebookshare');
      

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!