Social Media Share Buttons – Dynamic JS Widget

We are presenting a simple jQuery solution to implement social media share buttons for the current page, with svg icons. Our example includes the most popular sites: Facebook, Twitter, LinkedIn, Digg, Blogger, Reddit, Delicious and “email to friend”. You can add new sites tweaking the code a little. Sharablility is a crucial SEO factor so make sure to add this simple widget to your pages.

social media share buttons jquery

Live Demo

HTML

The HTML consists of a link list containing svg images. The link ahref parameters pass the [ARTICLELINK] to the social media platforms. This parateter is adjusted later with jQuery.

<ul class="socialShareLinks">
    <li>
        <a class="facebook" href="https://www.facebook.com/sharer.php?u=[ARTICLELINK]" target="_blank" rel="nofollow">
            <img src="social/fb.svg" alt="Facebook">
        </a>
    </li>
    <li>
        <a class="twitter" href="https://twitter.com/intent/tweet?url=[ARTICLELINK]&text=Check%20this%20out:" target="_blank" rel="nofollow">
            <img src="social/twitter.svg" alt="Twitter">
        </a>
    </li>
    <li>
        <a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=[ARTICLELINK]&title=Check%20this%20out&summary=An amazing article!&source=" target="_blank" rel="nofollow">
            <img src="social/linkedin.svg" alt="Linkedin">
        </a>
    </li>
    <li>
        <a class="digg" href="http://digg.com/submit?url=[ARTICLELINK]" target="_blank" rel="nofollow">
            <img src="social/digg.svg" alt="Digg">
        </a>
    </li>
    <li>
        <a class="blogger" href="https://www.blogger.com/blog-this.g?n=[ARTICLELINK]" target="_blank" rel="nofollow">
            <img src="social/blogger.svg" alt="Blogger">
        </a>
    </li>
    <li>
        <a class="reddit" href="http://reddit.com/submit?url=[ARTICLELINK]&title=Check%20this%20out" target="_blank" rel="nofollow">
            <img src="social/reddit.svg" alt="Reddit">
        </a>
    </li>
    <li>
        <a class="mail" href="mailto:?subject=Check out this website&body=Thought you might like this: [ARTICLELINK]" target="_blank">
            <img src="social/mail.svg" alt="Email to a friend">
        </a>
    </li>
</ul>

CSS

Use the CSS below to style the unordered list, showing the icons next to each other.

.socialShareLinks li {
    float: left;
    margin: 2px;
}
.socialShareLinks {
    list-style: none;
}
.socialShareLinks li a {
    display: block;
    height: 30px;
    overflow: hidden;
    width: 30px;
    background-color: #eee;
    border-radius: 10px;
}
.socialShareLinks li a:hover {
    background-color: #fff;
}
.socialShareLinks li a img{
    width: 100%;    
}

JavaScript

Include the short JavaScript below to rewrite every instance of [ARTICLELINK] to the current URL. We used jQuery to perform this.

$( document ).ready(function() {
    $('.socialShareLinks a').each(function() {
      var value = $(this).attr('href');
      console.log(value);
      $(this).attr('href', value.replace('[ARTICLELINK]',$(location).attr('href')));
    });
});

Download the vector icons in a zip file: zip