Making social buttons in three steps

Hi, Habr!

Today, Dmitry Kabakov, Senior DataArt front-end developer, will share with us a small but useful tutorial.
')
In the modern “Google World”, the social component of the site is becoming increasingly important. But ordinary social widgets / codes do not always almost never fit into the design of the site.

What to do? Need to make out!

For the tutorial you will need:

• jQuery sharrre plugin;
• FontAwesome icons;
• HTML / CSS3 knowledge;
• 10 minutes of your time

Step 1. Creating a structure

I think the best option would be a list of the main social networks.

<ul class="socials"> <li id=”twitter” class="social"></li> <li id=”facebook” class="social"></li> <li id=”linkedin” class="social"></li> <li id=”pinterest” class="social"></li> </ul> 

I guess that's enough. The insides are specified in the Sharrre script. If we don’t need a custom template, we can omit the structure, but this is not the case now.

The templates are almost identical, we change only the FontAwesome -class of icons (set the icon class corresponding to the social network).

 <span class="fa fa-twitter"></span> <a class="box" href="#"> <div class="count" href="#">{total}</div> </a> 

Step 2. Connecting the Sharrre plugin

With the structure sorted out, we connect the plugin.

 $('#twitter').sharrre({ share: { twitter: true }, template: '<span class="fa fa-twitter"></span><a class="box" href="#"><div class="count" href="#">{total}</div></a>', enableHover: false, buttons: { twitter: { via: 'your_account' } }, click: function (api, options) { api.simulateClick(); api.openPopup('twitter'); } }); 

In short, we ask the script:

• show only one social network;
• apply custom template;
• hide basic network functionality;
• per click to perform the functionality of the social button.

Similarly, for each network (for google + you need to also connect a PHP script).

Step 3. Design

It all depends on your imagination and, of course, skills. Below I suggest a design option:


codepen.io/Dmitriy-ateo/pen/JdYbYQ

Total

As a result, the plugin takes over the functionality, and appearance design leaves us. Thanks to the ease of connection, the plugin can be used on various pages. By connecting the lazy-load-scripts social buttons can be loaded as they appear on the page.

What's the catch?

Using the plug-in greatly simplifies life, but, of course, there are downsides to this approach. First, this plugin does not support all social networks, but only the basic ones. Secondly, for Google+ you need to additionally connect a PHP script, which adds some difficulties to the implementation.

Author: Dmitry Kabakov, Senior Front End Developer.