Create your own social share buttons in JavaScript & HTML – sharer.js

Sharer.js is a very tiny js lib to create custom social share components on DOM elements for your website. No dependencies. All the parameters can be passed via HTML5 data attributes.

Sharer.js currently supports more than 20 social media sites.

• Twitter
• Facebook
• Linkedin
• Google Plus
• Email
• Whatsapp
• Telegram
• Viber
• Pinterest
• Tumblr
• Hackernews
• Reddit
• VK.com
• Buffer
• Xing
• Line
• Instapaper
• Pocket
• Digg
• StumbleUpon
• Flipboard
• Weibo
• Renren
• Myspace
• Blogger
• Baidu
• Ok.ru

Libraries

Load the sharer.min.js minified library.

<script src="sharer.min.js">script>

HTML

Add the required CSS class ‘sharer’ to your element and create a custom Facebook, twitter etc buttons.

<button class="sharer"
        data-sharer="twitter" 
        data-url="http://iamrohit.in">
        Share on Twitter
>
 
<button class="sharer"
        data-sharer="facebook" 
        data-url="http://iamrohit.in">
        Share on Facebook
>

Here are the list of data attribute you can use to customize your social share buttons.

• data-width: width of popup
• data-height: height of popup
• data-title
• data-url
• data-via: for Twitter and Buffer
• data-hashtags: for Twitter
• data-to: for email
• data-subject: for email
• data-image: for Pinterest, Weibo, and VK
• data-description: for Pinterest, Instapaper, Blogger, and Myspace
• data-caption: for Tumblr and VK
• data-tags: for Tumblr
• data-picture: for Butter
• data-appkey: for Weibo
• data-ralateuid: for Weibo

See live demo and download source code.

This awesome plugin is developed by ellisonleao. Visit their official github repository for more information and follow for future updates.

Related