We optimize the page with our own social buttons

Hello,



The benefits of allowing users to share your link on social networks is obvious. However, don’t want to sacrifice performance and page load time either.





')

The article discusses the available, ready-to-use social buttons, the problems we encountered when using them, and describes a simple way to make your buttons for several popular social networks.

Ready solutions of social buttons

When we started to make our product, we didn’t seriously think about sharing buttons on the site. Just took ready services and added to the pages:

• pluso.ru - for the Russian version
• addthis.com - for the English version

But over time, we noticed that not everything is so smooth with them. Namely:

• excess traffic
• does not always work correctly through ajax
• advertising
• long loaded or not loaded at all
• eat browser memory, especially when content is constantly updated via ajax

Therefore, we began to look for other options for providing users to share our link on social networks.



There are many ready-made solutions on github, for example:

• github.com/Julienh/Sharrre
• github.com/carrot/share-button
• github.com/kni-labs/rrssb
• github.com/sapegin/social-likes
• github.com/mattberridge/Simple-Social-Sharing-Buttons
• and so on

In fact, we could stop at this, but it was decided to make our own version, since we just need 5 different sharing buttons (VK, Facebook, Twitter, Google+, LinkedIn + sending by email) without any frills. As you know, you want to do well - do it yourself.

Creating your own buttons

Since we have already used fonts with social icons on the site (for authorization buttons through the social network and for links to groups), we simply took them - no additional memory is required for them.



You can also use ready-made elements, for example for bootstrap - lipis.imtqy.com/bootstrap-social that uses Font Awesome (Font Awesome itself is very large, so if you only need certain icons, then we advise you to select only those that are needed through fontello.com )



Consider the code on JS (the part for Vkontakte is given, at the end of the article there is a link to the full example with all the social buttons we needed).



So, first create an object and add an initialization function, in which we specify the object classes to trigger the event and data to be shared and add the eventListener to each object on the page:

var cubeShare = { title: 'CubeCamp.ru', width: 600, height: 400, init: function() { var share = document.querySelectorAll('.share-btn'); for(var i = 0, l = share.length; i < l; i++) { var url = share[i].getAttribute('data-url') || location.href, title = share[i].getAttribute('data-title') || '', desc = share[i].getAttribute('data-desc') || '', el = share[i].querySelectorAll('a'); for(var a = 0, al = el.length; a < al; a++) { var id = el[a].getAttribute('data-id'); if(id) this.addEventListener(el[a], 'click', {id: id, url: url, title: title, desc: desc}); } } } }; 

Next, we describe eventListener, adding it to the already created class:

  addEventListener: function(el, eventName, opt) { var _this = this, handler = function() { _this.share(opt.id, opt.url, opt.title, opt.desc); }; if(el.addEventListener) { el.addEventListener(eventName, handler); } else { el.attachEvent('on' + eventName, function() { handler.call(el); }); } } 

Finally, let's finish the opening of the popup window, into which we will load the actual page, which social networks provide us for sharing in them. To add other networks, you need to add a switch to the appropriate page we need:

  share: function(id, url, title, desc) { url = encodeURIComponent(url); desc = encodeURIComponent(desc); title = encodeURIComponent(title); switch(id) { case 'vk': this.popupCenter('https://vk.com/share.php?url=' + url + '&description=' + title + '. ' + desc, this.title, this.width, this.height); break; default: break; }; }, popupCenter: function(url, title, w, h) { var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left; var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top; var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width; var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height; var left = ((width / 2) - (w / 2)) + dualScreenLeft; var top = ((height / 3) - (h / 3)) + dualScreenTop; var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); if (window.focus) { newWindow.focus(); } } 

If you use jQuery, you can initialize it like this:

 $('.share-btn a').on('click', function() { var id = $(this).data('id'); if(id) { var data = $(this).parent('.share-btn'); var url = data.data('url') || location.href, title = data.data('title') || '', desc = data.data('desc') || ''; cubeShare.share(id, url, title, desc); } }); 

or without jQuery:

 cubeShare.init(); 

You can also call the sharing button in this way:

 cubeShare.share(id, url, title, desc); 

Where:

• id - one of the values ​​of fb, vk, gb, tw, in, mail
• url - full link
• title - title
• desc - description

Sample HTML code for the Vkontakte button:

 <div class="share-btn" data-url="http://www.cubecamp.ru" data-title="" data-desc="  "> <a class="btn btn-social-icon btn-sm btn-vk" data-id="vk"><i class="ccon-vkontakte"></i></a> </div> 

Values ​​in block:

• Class share-btn
• The data-url attribute is the full link. If not, it takes a value from the browser (location.href)
• Data-title attribute - title (optional)
• Data-desc attribute - description (optional)

Full example

Statistics and conclusions

• Addthis - about 11 service requests and about 200kb of traffic (with a cache of about 2.6kb)
• Pluso - about 9 requests for service and about 45kb of traffic (with a cache of about 1.4kb)
• The solution considered in the article is the 3.5kb script itself (with a cache of approximately 200b) + icons at your discretion.

Even such a trifle as social buttons can seriously affect the page loading speed, especially if the user uses data through a mobile network. Spending a little time creating your own buttons will increase your speed, you will be able to create your own design and use additional functionality, such as statistics. And no extra requests for third-party services + do not worry if they suddenly do not boot.