@gfrmedia/social-shares

README

GFRM Social Share Library

This package provides the ability to share web links with relative ease, incorporating analytics reporting and hooks when a share is executed out of the box.

Examples at dist: index.html

Sharing options

This configuration options choul be passed via params using GfrmSocialShare.shareWithParamsOn or could be read from the data attributes of the DOM element that trigger the on click event when using GfrmSocialShare.shareWithClick

• shareUrl
• shareTitle
• shareText
• shareVia
• shareImage

Each can be collected usint the following fallback order from left to right

property	param	data-attribute	meta tag attribute
shareUrl	shareUrl	share-url	og:url	window.location.href
shareTitle	shareTitle	share-title	<title></title>
shareText	shareText	share-text	<meta name="description"
shareVia	shareVia	share-via	<meta name="twitter:site"
shareImage	shareImage	share-image	<meta name="og:image"	<meta name="twitter:image:src"

Adding on click behaviour to actions

A regular DOM with the ability to implement the onclick callback, should be able to use any of the onClick event handlers the library provides for any of the social networks

• onFacebook
• onTwitter
• onTumblr
• onEmail
• onPinterest
• onLinkedin
• onReddit
• onWhatsapp
• onTelegram
• onPrinter
• onCopylink

e.g: btn.onclick = GfrmSocialShare.shareWithClick.onFacebook

Auto rendering buttons with sharingbuttons.io icons

In order to generate sharing buttons with binded onClick actions by default an customized with buttons from sharingbuttons.io, a developer just needs to generate HTML tags with the following structure.

• <a class="gfr-social-share" data-social-network="printer" href="#" data-share-url="https://primerahora.com"></a>
• <a class="gfr-social-share" data-social-network="facebook" href="#" data-share-url="https://primerahora.com"></a>
• <a class="gfr-social-share" data-social-network="twitter" href="#" data-share-url="https://primerahora.com"></a>

Sharing with params

GfrmSocialShare.shareWithParamsOn(socialNetwork, {
  title: "Configured custom title",
  sharedUrl: "http://elnuevodia.com",
})(event);

Overwritting analytics hook

This is accomplished by creating a function named window.gfrmSocialShareAnalytics, this function will receive the values that are regulary passed to google analytics. If this function is defined, googla analytics won't be called after.

Building the library

In order to generate a production ready package for the library, this command needs to be executed:

• npm run build

This command generates two files:

• index.js: file that can be published to NPM, valid to be included in npm packages and nodeJS envs.
• index.min.js: file to be used by web applications, served via HTTP, could be hosted on a CDN.

Publishing package to NPM

The version in package.json needs to be bumped to a new one, after that, execute:

npm publish --access public

This publishes the package in NPM and makes the new version available to be installed via NPM.

go to https://www.npmjs.com/package/@gfrmedia/social-shares

Brainstorming Session 16-Nov-2020

• Estructurar el core functionality para que sea resistente al cambio
• Remover necesidad de tener interfaz grafica en librería, hacer paquete de node que solo provea la funcionalidad de hacer bind de los clicks events para compartir
• Agregar hooks a los eventos de onClick al momento de compartir
• Output de diferentes versiones
  • Core valido para ser utilizado en node
  • Lib que provea binding de clicks sin necesidad de incluir interfaz grafica
  • Una que incluya CSS/JS y funcione tipo gigya
• Analytics reporting optional, configurable
  • Implementar configuración de compatible con el formato de GNI
  • No hacer la importación, utilizar objeto de ga ya configurado en el site
  • Aceptar opción con nombre alterno de objeto para reportar a GA
• Capacidad de importar SVG/Styles solamente