Sticky social share widget en Vanilla JavaScript-Sticky-social-links

Vista prévia

Descripción

La biblioteca Sticky-social-links le ayuda a crear un panel de compartir social flotante que contiene enlaces de redes sociales que siempre se corregiré en el lado izquierdo o derecho de la Página Web.

Social networks supported:

• Blogger
• Facebook
• Google Plus
• Instagram
• Linkedin
• Twitter
• Youtube
• Fácil de extender para añadir más redes sociales

Funcionamiento

Agregue la versión minimizada de la biblioteca Sticky-social-links a la página HTML.

<script src="dist/sticky-social.min.js"></script>

Cree una nueva instancia de stickySocial y especifique las redes sociales y la carpeta de iconos.

new stickySocial(


{




'facebook': 'https://www.facebook.com/jqueryscript',




'twitter': 'https://twitter.com/jqueryscript',




'linkedin': 'https://www.linkedin.com',




'google-plus': 'https://plus.google.com/+JqueryscriptNet',




'instagram': 'https://www.instagram.com',




'blogger': 'https://www.blogger.com',




'youtube': 'https://www.youtube.com'


},


{




iconsPath: 'resources/social-icons'


}
);

Cambie la posición del widget de compartir en redes sociales.

new stickySocial(


{




'facebook': 'https://www.facebook.com/jqueryscript',




'twitter': 'https://twitter.com/jqueryscript',




'linkedin': 'https://www.linkedin.com',




'google-plus': 'https://plus.google.com/+JqueryscriptNet',




'instagram': 'https://www.instagram.com',




'blogger': 'https://www.blogger.com',




'youtube': 'https://www.youtube.com'


},


{




iconsPath: 'resources/social-icons',




yAxix: '20%', // default: '30%'




position: 'right' // default: 'left'


}
);

Establezca el ancho de los iconos sociales.

new stickySocial(


{




'facebook': 'https://www.facebook.com/jqueryscript',




'twitter': 'https://twitter.com/jqueryscript',




'linkedin': 'https://www.linkedin.com',




'google-plus': 'https://plus.google.com/+JqueryscriptNet',




'instagram': 'https://www.instagram.com',




'blogger': 'https://www.blogger.com',




'youtube': 'https://www.youtube.com'


},


{




iconsPath: 'resources/social-icons',




iconWidth: 20 // default: 30


}
);

Establezca el atributo target de los enlaces sociales.

new stickySocial(


{




'facebook': 'https://www.facebook.com/jqueryscript',




'twitter': 'https://twitter.com/jqueryscript',




'linkedin': 'https://www.linkedin.com',




'google-plus': 'https://plus.google.com/+JqueryscriptNet',




'instagram': 'https://www.instagram.com',




'blogger': 'https://www.blogger.com',




'youtube': 'https://www.youtube.com'


},


{




iconsPath: 'resources/social-icons',




linkTarget: '_top' // default: '_blank'


}
);

Utilice iconos sociales redondeados o no.

new stickySocial(


{




'facebook': 'https://www.facebook.com/jqueryscript',




'twitter': 'https://twitter.com/jqueryscript',




'linkedin': 'https://www.linkedin.com',




'google-plus': 'https://plus.google.com/+JqueryscriptNet',




'instagram': 'https://www.instagram.com',




'blogger': 'https://www.blogger.com',




'youtube': 'https://www.youtube.com'


},


{




iconsPath: 'resources/social-icons',




roundedIcons: true // default: false


}
);