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
• title
• text
• via
• image

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 | | title | title | title | <title></title> | | | text | text | text | <meta name="description" | | | via | via | via | <meta name="twitter:site" | | | image | image | 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

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

Share me on FB

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.

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