21 Social Networks Sharing Buttons with Counter

Juan Martín de CheckApps did meet a few days ago the existence of a free service that lets you create custom social buttons. So I said is not anything to write, but when we discovered that admits now 21 different networks, including accountants of times you have shared an address or followers you have a page and above all, how easy it is to add them to our website, things begin to get interesting.

The site in question is GetShares and has an installer to generate code for any button with three choices of style, but more interesting in my opinion is to use its API to create a barrage of buttons. It is what we see in this post.

On page getshar.es is the generator of buttons, a utility to view any web address counters in several networks at once and some notes on the API more intuitive than the project. The latter you can find it entirely on GitHub.

The service operates through a js file with jQuery develops the whole system of buttons and additionally there is a CSS to make it easy to set the style of them. Both files can download them and host them under your control respecting the license if the service were to saturate ever, which for the moment seems not occur.

On the contrary, the moment they go pretty fast. Yes, the JavaScript is not sufficient and if someday GetShar.es fails to deliver the service, even if you have code control buttons stop working.

How to add a Blogger is a little different from what was explained, because in order to use the buttons with dynamic addresses will have to dip into the variables data and so that they work as part of a JavaScript, we additionally make a chapucilla that is basically "half-turn" the code in plain text.

In this way, this is what you should put in your template, as such, within the area of generation of posts and perhaps the best sites would be inside the box post-header or post-footer. Although not very orthodox putting all this followed in the HTML part, I have done well to make it easier to add or remove once.

I also added a style rule that in any case the buttons are centered; like these that follow are as real and tangible demonstration of how they work.

<! - SOCIAL BUTTONS GETSHARES -> 
<b: if cond = 'data: blog.pageType == & quot; item & quot;'> 
<div id = 'buttons' /> 
<script src = "// cdnjs.cloudflare. com / ajax / libs / jquery / 2.0.3 / jquery.min.js' type = 'text / javascript' /> 
<script src = 'http: //cdn.getshar.es/lib/0.8.0.min. js' type = 'text / javascript' /> 
<link href = 'http: //cdn.getshar.es/lib/0.8.0.min.css' rel = 'stylesheet' type = 'text / css' /> 
<style> #buttons {text-align: center; margin: 10px auto; font-weight: normal;} </ style> 
<script type = 'text / javascript'> 
(function () { 
var settings, 
settings = { 
root: $ (& quot; # buttons & quot;) 
counter: { 
position: & quot; inside & quot; 
}, 
share: { 
url: & quot; <data: post.canonicalUrl /> & quot ;, 
imageUrl: & quot; <data: post.firstImageUrl /> & quot ;, 
message: & quot; <data: post .title /> & quot; + & quot; <data: post.canonicalUrl /> Via: @ Oloman & quot; 
} 
}; 
new GetShare ($ extend (settings, {network. & quot; googleplus & quot;})); 
new GetShare ($. extend (settings, {network: & quot; twitter & quot;})); 
new GetShare ($ extend (settings, {network: & quot; facebook & quot;}.)); 
new GetShare ($ extend (settings, {network. & quot; linkedin & quot ;})); 
new GetShare ($ extend (settings, {network. & quot; pinterest & quot;})); 
new GetShare ($ extend (settings, {network. & quot; pocket & quot;})); 
// More networks http://getshar.es/ 
.}) call (this); 
</ script> 
</ b: if>

In all this we only need to change is the section of the message if we want to leave something other title-address-path and evidently Twitter user because the set is mine.

To present them with another aspect much like really you can change the value of position by choosing from inside inside the key and split as added to the button. You can also add an additional parameter settings for the button to display a text to the right of the icon of the network.

For example: button: {text: 'Share'}. The last part of the code is that it generates each buttons new GetShare and that we should include as many lines as buttons, indicating network name the corresponding network. The full list is on this page GetShares. One drawback is that the buttons are added to an empty box with an ID (#buttons, in the example), which causes you can not place more than one batch of buttons per page.

For this reason I have added the conditional that you saw, that it not display more than pages of entries where the posts are unique.