Pequeños botones para compartir en redes sociales con vanilla JavaScript-JS-share

Vista prévia

Descripción

La biblioteca JS-share de vainilla para compartir facilita la creación de botones de redes sociales utilizando los atributos data HTML.

Actualmente es compatible con VK.com, ok.ru, facebook.com, Pinterest, livejournal.com, Reddit, Twitter, Google +, GoogleBookmarks, Tumblr, Weibo, Baidu, Mail.ru, WhatsApp, Telegram, Viber, Skype, correo electrónico.

Funcionamiento

Descargue y coloque el archivo JavaScript jsshare. js al final del documento.

<script src="jsshare.js"></script>

Cree botones de compartir en redes sociales y especifique las plataformas de redes sociales en el atributo data-type como estos:

<button class="social_share" data-type="vk">ВКонтакте</button>
<button class="social_share" data-type="fb">Facebook</button>
<button class="social_share" data-type="tw">Twitter</button>
<button class="social_share" data-type="lj">LiveJournal</button>
<button class="social_share" data-type="ok">Одноклассники</button>
<button class="social_share" data-type="mailru">Mail.Ru</button>
<button class="social_share" data-type="gplus">Google+</button>
<button class="social_share" data-type="telegram">Telegram</button>
<button class="social_share" data-type="whatsapp">Whatsapp</button>
<button class="social_share" data-type="viber">Viber</button>
<button class="social_share" data-type="email">Email</button>

Inicializar JS-share y listo.

document.addEventListener("DOMContentLoaded", function(event) {

var buttons = document.querySelectorAll(".social_share");

for(var i = 0; i < buttons.length; i++){


buttons[i].addEventListener('click', function() {




return JSShare.go(this);


}, false);

}
});

Ejemplo en línea:

<a href="#" onclick="return JSShare.go(this)" data-type="fb" data-fb-api-id="123">I like it</a>

Todas las opciones posibles que se pueden pasar a través de datos-opción atributos:

{

type:



'vk',




 // share type

fb_api_id:
 '',





 // Facebook API id

url:



 '',





 // url to share

title:


 document.title, // title to share

image:


 '',





 // image to share

text:



'',





 // text to share

utm_source:
'',

utm_medium:
'',

utm_campaign:'',

popup_width: 626,

popup_height:436
};

Registro de cambios

10/31/2018

• Nuevas plataformas añadidas, correcciones de errores