Mostrar recuentos de acciones sociales mediante Socialight. js

Vista prévia

Descripción

Socialight. js es un plugin Vanilla JS utilizado para mostrar los recuentos de acciones de los principales servicios de redes sociales. Totalmente personalizable a través de CSS.

Supported social media:

• Facebook
• Twitter
• Google Plus (Plus. php es necesario)
• Pinterest
• Linkedin
• Buff

Funcionamiento

Cargue el Socialight. js al final de su página web.

<script src="socialight.min.js"></script>

Cree un elemento DIV y use el atributo Data-URL para especificar la dirección URL.

<div class="social" data-url="https://wikicss.com/"></div>

El JavaScript.

(function(window, document, undefined) {

"use strict";


function SocialightFacade ($element) {



var socialight = new Socialight({




container: $element,




url: $element.getAttribute("data-url")



});




socialight.add(new Twitter());



socialight.add(new Facebook());



socialight.add(new GooglePlus());



socialight.add(new LinkedIn());



socialight.add(new Buffer());



socialight.add(new Pinterest());




socialight.draw();

}


var el = document.querySelectorAll(".social"), i, len;


for (i = 0, len = el.length; i < len; i++) {



SocialightFacade(el[i]);

}

}(window, document));

El CSS de ejemplo para personalizar los contadores y los iconos sociales.

.social {

margin-bottom: 35px;

text-align: center;
}

.social .shares {

background-position: center top;

background-repeat: no-repeat;

display: inline-block;

min-width: 60px;

padding: 32px 16px;

text-align: center;
}

.share-buffer { background-image: url('img/buffer.png'); }

.share-twitter { background-image: url('img/twitter.png'); }

.share-facebook { background-image: url('img/facebook.png'); }

.share-linkedin { background-image: url('img/linkedin.png'); }

.share-gplus { background-image: url('img/googleplus.png'); }

.share-pinterest { background-image: url('img/pinterest.png'); }

Registro de cambios

02/16/2016

• Quite los encabezados no seguros