read

A big part of social marketing is giving users an easy way to share content they enjoy. This should be easy, but as there is no standard API for share buttons, it become a bit time consuming.

You could use a service like ShareThis, but then you lose control over your own styles and data. You could also company specific icons provided by Twitter or Facebook, but then your site might start to look like a row of billboards.


I like to consider websites as 'modern' art. Maintaining consistency can go a long way towards a sites' look and feel.

These social buttons should be able to work on any site. No jQuery required. As such, we'll stick to vanilla JavaScript, just plain old library-free JS without the bells and whistles.

Somehow this article became longer than expected, so I'll break it into three parts.

Part 1: Custom Buttons

  • Setup Button Styles with Font Awesome
  • Open Share/Tweet Windows

Part 2: Adding Counts

  • Display Share/Tweet Counts
  • Animate the count

Part 3: Making Components

  • Creating a Meteor Package
  • Optional Configurations

Let's get started.


Social Button Styles

Choose an icon set. I went with Font Awesome. Because . And .

<head>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"/>
</head>  
<body>  
  <section>
    <div class="social-icon-group">
      <a>
        <i class="fa fa-facebook"></i>
      </a>
    </div>
    <div class="social-icon-group">
      <a>
        <i class="fa fa-twitter"></i>
      </a>
    </div>
  </section>
</body>  

Add some styles, either as an attached .css file or within a <style> code block. Nothing fancy here.

.social-icon-group {
  display: inline-block;
  margin: 0 15px;
}

.social-icon-group a {
  text-decoration: none;
  color: grey;
}

.social-icon-group a:hover {
  color: black;
}

The result should look something like this:

That was easy enough. Now let's make the buttons do something.


Open Share/Tweet Windows

Facebook & Twitter have APIs that can be accessed with the following paths:

Try it. Paste the above paths into your browser url bar. They connect you directly to a sharing form, but without the values passed in.

Social API Parameters

We just have to pass in the parameters we want. These might include:

  • the url
  • selected text
  • a referrer

Replace {{url}} & {{text}} with your site & site information.

<section class="social-icons">  
  <a href="//www.facebook.com/sharer/sharer.php?u={{url}}&t={{text}}" target="_blank">
    <i class="fa fa-facebook"></i>
  </a>
  <a href="//twitter.com/share?text={{text}}" rel="canonical" target="_blank">
    <i class="fa fa-twitter"></i>
  </a>
</section>  

rel="canonical" indicates the intended url is the site we are linking from.

target="blank" tells the browser to open a new window rather than redirecting away from your site.

Adding this information, our buttons now look like this:

<section class="social-icons">  
  <a href="//www.facebook.com/sharer/sharer.php?u={{url}}&t={{text}}" target="_blank">
    <i class="fa fa-facebook"></i>
  </a>
  <a href="//twitter.com/share?text={{text}}" rel="canonical" target="_blank">
    <i class="fa fa-twitter"></i>
  </a>
</section>  
Creating a Popup Window

But why open a fullscreen window, wouldn't a popup be better? Luckily, the browser offers an easy way to trigger popup windows through the event handler onClick & the browser event window.open.

<a href="shmck.com" onClick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"></a>  

Here the parameters are:

  • the url of the new window, likely the same as this.href
  • don't worry about the second parameter
  • parameters for the new window
  • return false cancels the href link action & overrides it with the onClick action.

Notice we can & should specify the new windows height & width. An oversized Twitter window would would look odd.

Now our buttons are getting a bit longer.

<section>  
<div class="social-icon-group">  
    <a href="//www.facebook.com/sharer/sharer.php?u=www.shmck.com&t=Some%20Title"
       onClick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
      <i class="fa fa-facebook"></i>
    </a>
  </div>
  <div class="social-icon-group">
    <a href="//twitter.com/share?text=Some%20Title" rel="canonical"
       onClick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=255, width=550');return false;">
      <i class="fa fa-twitter"></i>
    </a>
  </div>
</section>  

Use '%20' in your titles to indicate spaces. For example, 'This%20%is%20a%20title' will create 'This is a title'. We'll look at any easy way to handle HTML URL Encoding a little later.

These buttons should have some working functionality now. Try them below.

Auto-filling Parameters

If you're using these social buttons on multiple pages, you likely want to automate the URL & text information. That's grab the URL & Title and use them to supply the information.

Document.location or window.location can help you get a more specific path. In modern browsers, these are the same thing. It returns an object as follows:

window.location {  
  protocol: 'http:',
  origin: 'http://shmck.com',
  pathName: '/the-article-name',
  host: 'shmck.com'
}

Type any of these in your browser console to see what they return.

Adding variables

Let's make our onClick event handlers call functions from an attached JavaScript file. At the bottom of the <body> add a <script> tag and put the following javascript inside:

var url = encodeURIComponent(document.URL);  
var text = encodeURIComponent(document.title);  

encodeURIComponent() makes strings URI compatible by escaping uncompatible characters with UTF-8 escape sequences. For example, as mentioned earlier, spaces in a string will become '%20'.

Now we can pass these values into our API call functions within the same script.

function callFacebookAPI() {  
  window.open('//www.facebook.com/sharer/sharer.php?u=' + url + '&t=' + text, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}

function callTwitterAPI() {  
  window.open('//twitter.com/share?text=' + text, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=255, width=550');
}

Time to clean up our html. Keep in mind the href links are disabled when clicked (return false;), but should still include some kind of target.

<section>  
  <div class="social-icon-group">
    <a href="//www.facebook.com/sharer/sharer.php"
       onClick="callFacebookAPI(); return false;">
      <i class="fa fa-facebook"></i>
    </a>
  </div>
  <div class="social-icon-group">
    <a href="twitter.com/share" rel="canonical"
       onClick="callTwitterAPI(); return false;">
      <i class="fa fa-twitter"></i>
    </a>
  </div>
</section>  

You should now have some working social buttons.


Example


Conclusion

Too often as developers we use libraries like jQuery that work on top of JavaScript. Unless your user is using a cached version of jQuery, this creates extra unnecessary bloat. If your project is simple enough, consider keeping things basic.

In part 2, we'll grab the count data from Facebook graph & the Twitter API in order to display the number of shares or tweets of the url. Then we'll cause the numbers to increment up, all in vanilla JavaScript.

Blog Logo

Shawn McKay

Published

Image

ShMcK

JavaScript Web Dev

Back Home