Customization of social buttons

Many of us somehow faced the problem of customizing social network buttons, and many more will face it. Recently we had to solve a problem on Sports.ru, how not only to customize the appearance of “likes”, but also to place on the same page several blocks of social buttons related to different text blocks.

In this topic, we will tell you how you solved this problem in your special project (carefully, it’s advertising), and we’ll share a ready and, quite importantly, quite flexible solution.



A jQuery plugin was written that performs the following functions:

• Adding information to the message (title, description, picture and the actual link).
• Like counts.
• Placement on the page of several social blocks.
• Moving the user to zaikannogo material (social. Network cut hash in the URL).

At the moment, the plugin supports Facebook Share, Vkontakte Share and Twitter.
')

Known Issues

• Facebook sometimes does not immediately give the number of likes, and Twitter cheats with a very large delay.
• Due to misunderstanding of the callback parameter by Vkontakte, it is not recommended to use custom and native buttons (only Vkontakte) on one page.

By default, the plugin is sharpened to work with a certain html-structure, but I assure you that it can be simply reconfigured without writing crutches.
In the future, we plan to implement integration with other services.

How to use?

HTML

<div class="event-container" id="event_5"> <h2> </h2> <img src="image.png" alt="" /> <div class="summary"> <p>   </p> </div> <div class="likes-block"> <a href="?hash=event_5" class="like l-fb"> <i class="l-ico"></i> <span class="l-count"></span> </a> <a href="?hash=event_5" class="like l-vk"> <i class="l-ico"></i> <span class="l-count"></span> </a> <a href="?hash=event_5" class="like l-tw"> <i class="l-ico"></i> <span class="l-count"></span> </a> </div> </div> 

Javascript

  jQuery(document).ready(function($) { $('.like').socialButton(); $.scrollToButton('hash', 3000); }); 

Explanation

The plugin itself with the help of classes (l-fb, l-tw, l-vk) will determine which button is dealing with. As I already said, you can redefine the class names and key element selectors (for the default config, see the source). To do this, it is enough to pass a hash with overridden parameters to the socialButton () method.

Now, if you go to the address http://path.to/page.html?hash=news_123, the plugin will “scroll” you to the material with the id-schnick news_123 for 3 seconds.

By default, the plugin uses h2 as its title (if it does not find it, then document.title), as a description, the first p-shku, as a reference, the value of the href attribute of the link with the like class. By the way, both absolute and relative URLs are supported.

Eventually

Use the plugin wisely, do not sculpt on the page 100 blocks with social. buttons. Each button is a request to the API of the counter. If there are a lot of materials on the page, implement dynamic loading.

Where is the demo? Where are the sources?

Sources here: GitHub
Example here: Go

Thank you for your attention, and we are waiting for questions in the comments. I hope this article will be useful for you,%% username!