Create Static Social-Media “Share” Buttons without Javascript

Social-Media Share Buttons are everywhere, but most of them are working with external hosted javascript resources which are loaded on each page request. Depending on the servers cache settings this can cause multiple additional http request for your visitors. Additionally it can raise some privacy issues becaue of the possibility that your users can be tracked by such services.

Static Buttons#

As an alternative, most social networks provides a link based sharing service which works completely without javascript – it only requires a link including the text/url to share – that’s it. Please refer to the specific developer docs (e.g. Twitter Web Intents).

How it will look like#

The working example can be found at the bottom of this page.

HTML Style Buttons#

Some Buttons/Links from selected social networks.

<a href="https://twitter.com/intent/tweet?text=Test&url=http%3A%2F%2Fandidittrich.de%2F%3Fp%3D1127" class="social-button twitter-button"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fandidittrich.de%2F%3Fp%3D1127" class="social-button facebook-button"></a>
<a href="https://plus.google.com/share?url=http%3A%2F%2Fandidittrich.de%2F%3Fp%3D1127" class="social-button googleplus-button"></a>
<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fandidittrich.de%2F%3Fp%3D1127&description=Test" class="social-button pinterest-button"></a>
<a href="mailto:test" class="social-button email-button" title="Send an E-Mail"></a>

To customize the links/transform them into buttons you can use Less mixins to generate the required styles. You can also use the official logos or custom text.

LESS based styles#

Precompiled CSS Version is available on GitHub Gist

// Social Network Color Codes
@twitter-color: #4099ff;
@facebook-color: #3b5998;
@google-plus-color: #dd4b39;
@pinterest-color: #c8232c;
@email-color: #35c05f;

// Generator Mixin
.button-generator(@color, @label){
    &:before{
        content: @label;
    }

    &:hover{
        background-color: #303030;
    }

    background-color: @color;
}

// The Social Button
a.social-button{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    line-height: 30px;
    margin: 4px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #f0f0f0;
    overflow: hidden;
    padding: 0px;

    &:hover{
        text-decoration: none;
    }

    // Create Button Classes using Mixin
    &.twitter-button{
        .button-generator(@twitter-color, 't');
    }
    &.facebook-button{
        .button-generator(@facebook-color, 'f');
    }
    &.googleplus-button{
        .button-generator(@google-plus-color, 'g+');
    }
    &.pinterest-button{
        .button-generator(@pinterest-color, 'p');
    }
    &.email-button{
        .button-generator(@email-color, 'mail');
        font-size: 10px;
    }
}

And of course, this will work as excepted. But maybe you want to open the “Share Window” as an Pop-Up window – this can be achieved by some lines of Javascript – ok it’s js again but hosted by yourself without any privacy issues!

Open Share Window as PopUp#

// share buttons => new window
document.getElements('a.social-button').addEvent('click', function(evt){
    // get link
    var link = this.get('href');

    // mail ?
    if (link.substr(0, 6) != 'mailto') {
        evt.preventDefault();
        window.open(link, '', 'width=850, height=470');
    }
});

WordPress Integration#

Finally you can integrate it in your webpage/cms system. If you’re using WordPress here is the out-of-the-box example for your theme’s functions.php file. And don’t forget to include the CSS!

functions.php code#

function social_share_buttons(){
 // clean wordpress page titles
  $title = preg_replace('/&#?[a-z0-9]{2,8};/i', '', get_the_title());

  // social media links
  $twitterLink = 'https://twitter.com/intent/tweet?text='.urlencode($title).'&url='.urlencode(get_permalink());
  $facebookLink = 'https://www.facebook.com/sharer/sharer.php?u='.urlencode(get_permalink());
  $googleLink = 'https://plus.google.com/share?url='.urlencode(get_permalink());
  $pinterestLink = 'http://pinterest.com/pin/create/button/?url='.urlencode(get_permalink()).'&description='.urlencode($title);
  $emailLink = 'mailto:?body='.rawurlencode(get_permalink()).'&subject='.rawurlencode($title);

  // social
  echo '<div class="social-share">';
  echo '<a href="'.$twitterLink.'" class="social-button twitter-button" title="Tweet it"></a>';
  echo '<a href="'.$facebookLink.'" class="social-button facebook-button" title="Share on Facebook"></a>';
  echo '<a href="'.$googleLink.'" class="social-button googleplus-button" title="Share on Google+"></a>';
  echo '<a href="'.$pinterestLink.'" class="social-button pinterest-button" title="Pin it"></a>';
  echo '<a href="'.$emailLink.'" class="social-button email-button" title="Send an E-Mail"></a>';
  echo '</div>';
}

On the bottom of your article/page template you have only to call the new social_share_buttons() function to display the ready to use buttons.

Changelog#

• Update: Added E-Mail Button
• Update: Added precompiled CSS files as Gist