Crear social share popup Box con Pure JavaScript-needShareButton

Vista prévia

Descripción

Un widget social de JavaScript/HTML5 puro para su sitio web que muestra una ventana emergente de social Share para compartir su contenido web en 21 redes sociales populares y enlaces mailto.

Funcionamiento

Cargue el needsharebutton. min. CSS requerido en la sección head del documento.

<link rel="stylesheet" href="dist/needsharebutton.min.css">

Agregue un botón de social share predeterminado en su página web.

<div id="demo" class="need-share-button-default"></div>

Puede personalizar el widget de recurso compartido de redes sociales mediante HTML5 Data-OptionName atributos en el elemento Button.

<div id="demo"



class="need-share-button-default"



data-share-icon-style="box"



data-share-networks="Mailto,Twitter,Pinterest,Facebook">
</div>

Inicialización.

new needShareDropdown(document.getElementById('demo'));

También puede personalizar el widget de compartir en redes sociales mediante el objeto de opción durante la inicialización.

new needShareDropdown(document.getElementById('demo'), {


// child selector of custom share button

shareButtonClass: false,


 // default or box

iconStyle: 'default',


 // horizontal or vertical

boxForm: 'horizontal',


 // top / middle / bottom + Left / Center / Right

position: 'bottomCenter',


 // text for trigger button

buttonText: 'Share',


// http or https

protocol: ['http', 'https'].indexOf(window.location.href.split(':')[0]) === -1 ? 'https://' : '//',


// url to share

url: window.location.href,


// title to share

title: root.getTitle(),


// image to share

image: root.getImage(),


// description to share

description: root.getDescription(),


// social networks

networks: 'Mailto,Twitter,Pinterest,Facebook,GooglePlus,Reddit,Delicious,Tapiture,StumbleUpon,Linkedin,Slashdot,Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,Pingfm,Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru'


});

Registro de cambios

07/30/2018

• actualizar Facebook share enlace