Simple Fast Custom botones sociales con contadores-SHR. js

Vista prévia

Descripción

SHR. js es una biblioteca de JavaScript simple y ligera que se utiliza para generar botones de compartir social personalizables, semánticos, totalmente accesibles y basados en SVG en la Página Web.

Funcionamiento

Cargue los archivos JS y CSS requeridos en el documento.

<link href="dist/shr.css" rel="stylesheet">
<script src="dist/shr.js"></script>

<span class="button-addon">

<a href="https://wikicss.com" target="_blank" class="button button-github" data-shr-network="github">



<svg><use xlink:href="#shr-github"></use></svg>Star

</a>
</span>
<span class="button-addon">

<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwikicss.com" target="_blank" class="button button-facebook" data-shr-network="facebook">



<svg><use xlink:href="#shr-facebook"></use></svg>Share

</a>
</span>
<a href="https://twitter.com/intent/tweet?text=Simple+sharing+buttons+for+social+networks.&amp;url=https%3A%2F%2Fwikicss.com&amp;via=sam_potts" target="_blank" class="button button-twitter" data-shr-network="twitter">

<svg><use xlink:href="#shr-twitter"></use></svg>Tweet
</a>
<span class="button-addon">

<a href="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fwikicss.com&amp;media=http%3A%2F%2Fplacehold.it%2F500x500&amp;description=Simple+sharing+buttons+for+social+networks." target="_blank" class="button button-pinterest" data-shr-network="pinterest">



<svg><use xlink:href="#shr-pinterest"></use></svg>Pin it

</a>
</span>
<span class="button-addon">

<a href="https://plus.google.com/share?url=https%3A%2F%2Fwikicss.com" target="_blank" class="button button-google" data-shr-network="google">



<svg><use xlink:href="#shr-google"></use></svg>+1

</a>
</span>

Inicialice el SHR. js.

shr.setup();

Carga SVG defs.

(function(d, u){

var x = new XMLHttpRequest(),



b = d.body;


// Check for CORS support

// If you're loading from same domain, you can remove the if statement

// XHR for Chrome/Firefox/Opera/Safari

if ("withCredentials" in x) {



x.open("GET", u, true);

}

// XDomainRequest for older IE

else if(typeof XDomainRequest != "undefined") {



x = new XDomainRequest();



x.open("GET", u);

}

else {



return;

}


x.send();

x.onload = function(){



var c = d.createElement("div");



c.setAttribute("hidden", "");



c.innerHTML = x.responseText;



b.insertBefore(c, b.childNodes[0]);

}
})(document, "dist/sprite.svg");

Todos los config predeterminados.

selector: '[data-shr-network]', // Base selector for the share link
count: {


classname: 'share-count', // Classname for the share count


displayZero: false, // Display zero values


format: true, // Display 1000 as 1K, 1000000 as 1M, etc


position: 'after', // Inject the count before or after the link in the DOM


increment: true, // Increment the count on click?


html: function(count, classname, position) {




return '<span class="' + classname + ' ' + classname + '--' + position + '">' + count + '</span>';


},


value: {




facebook: 'share_count',




github: 'stargazers_count',


},


prefix: {




github: 'data',


},
},
urls: {


facebook: function(url) {




return 'https://graph.facebook.com/?id=' + url;


},


pinterest: function(url) {




return 'https://widgets.pinterest.com/v1/urls/count.json?url=' + url;


},


github: function(repo, token) {




return (






'https://api.github.com/repos' + repo + (typeof token === 'string' ? '?access_token=' + token : '')




);


},
},
popup: {


google: {




width: 500,




height: 500,


},


facebook: {




width: 640,




height: 270,


},


twitter: {




width: 640,




height: 240,


},


pinterest: {




width: 750,




height: 550,


},
},
storage: {


key: 'shr',


enabled: (function() {




// Try to use local storage (it might be disabled, e.g. user is in private mode)




try {






var key = '___test';






window.localStorage.setItem(key, key);






window.localStorage.removeItem(key);






return true;




} catch (e) {






return false;




}


})(),


ttl: 300000, // 5 minutes in milliseconds
},
tokens: {},

Registro de cambios

v1.1.0 (08/19/2018)

• Añadida la opción de incremento al hacer clic para añadir 1 al conteo (si es soportado). Esto asume que la parte fue exitosa por supuesto
• Limpiado el CSS por defecto para los botones, etc y refrescado los estilos ligeramente.
• Solucionado bug con la opción de conteo antes de no mostrar correctamente
• Se eliminó la necesidad de un contrador alrededor del botón y contar (cuidado, esto puede resultar en el envoltorio)
• Arreglo para el cambio de API de Facebook