Cómo crear Botones de comaprtir Personalizados

¿Preferirías diseñar tus propios botones de acciones pero quieres aprovechar nuestra plataforma para rastrear el compromiso social? 

Los editores a menudo diseñan sus botones de compartir desde cero cuando quieren que los iconos se alineen mejor con su marca y su paleta de colores o que se adapten las configuraciones de los botones a las diferentes páginas. Entonces, aprovecharán nuestra plataforma de análisis gratuita para profundizar en sus páginas principales, canales sociales y referencias sociales.

Algunas de las cosas que puede hacer con nuestro Botones de comaprtir Personalizados son:

  • Modifica su forma y color usando CSS de la manera que quieras para reflejar tu marca.
  • Escribe el texto que quieras en los botones, ¡útil para las llamadas a la acción personalizadas!
  • Mostrar varios conjuntos/instancias de botones en diferentes secciones de la misma página.

Para que las herramientas de ShareThis funcionen en su sitio web, siga los pasos que se indican a continuación para agregar su código exclusivo de ShareThis a la sección de encabezado de su sitio web: 

  1. Acceda a su cuenta de la plataforma ShareThis. Si no tienes una cuenta de ShareThis, regístrate gratis aquí.
  2. En el directorio de aplicaciones, seleccione Botones de comaprtir Personalizados
  3. Seleccione el botón Activar código en la esquina superior derecha. En la ventana emergente, haz clic en el botón Copiar código .
  4. Ingresa a tu sitio web HTML.
  5. Pegue el código ShareThis único que ha copiado del paso 3 en el campo de encabezado y haga clic en Guardar.
  6. Crea el HTML y el CSS para tu Botones de comaprtir Personalizados. La configuración del botón personalizado para Facebook y Twitter debería ser similar a esto:  
  • HTML: 

share
tweet

  • CSS: 

.st-custom-button[data-network] {
background-color: #0ADEFF;
display: inline-block;
padding: 5px 10px;
cursor: pointer;
font-weight: bold;
color: #fff;
}
.st-custom-button[data-network]:hover,
.st-custom-button[data-network]:focus {
text-decoration: none;
background-color: #00C7FF;
}

Por ejemplo, si quieres cambiar específicamente el aspecto del botón de Facebook, la clase CSS en tu archivo CSS debe ser .st-custom-button[data-network="facebook"].

  1. Añade atributos de datos a la división específica de cada canal social para especificar lo que quieres que nuestro código central haga cuando un usuario haga clic o toque los botones de tu sitio web. 

Los canales sociales apoyados incluyen: 

Servicio socialCódigo de la red de datos
Las Vidas Negras Importanblm
BloggerBlogger
Búferbuffer
Copiar enlacecopia
Diásporadiáspora
DiggDigg
Doubandouban
EmailCorreo electrónico
Evernoteevernote
FacebookFacebook
FlipboardFlipboard
Gmailgmail
Marcadores de Googlegooglebookmarks
Noticias Hackerhackernews
Papel Instapaperinstapaper
iOrbixiorbix
Kakaokakao
Aplicación Kookooapp
Línealínea
LinkedinLinkedin
LiveJournalLivejournal
Mail.rumailru
MenéameMeneame
Mensajeromensajero
OdnoklassnikiOdnoklassniki
Outlookoutlook
PinterestPinterest
Bolsillogetpocket
PrintImprimir
Empujar a Kindlekindleit
Qzoneqzone
RedditReddit
Volver a encontrarrefind
Renrenrenren
Skypeskype
Surfingbirdsurfingbird
Telegramatelegrama
Tencent QQtencentqq
Threemathreema
Trellotrello
TumblrTumblr
TwitterTwitter
Viberviber
VKVk
WeChatwechat
ShareThisShareThis
Sina WeiboWeibo
SMSSms
Snapchatsnapchat
WhatsAppWhatsapp
Wordpresswordpress
XingXing
Correo Yahooyahoomail
Yummlyyummly

Los atributos de los datos incluyen: 

red de datosEspecifica en qué plataforma social se compartirá el contenido
Data-URLEspecifica la URL (se puede acortar la URL) que le gustaría compartir
datos-Short-URLEspecifica una URL abreviada que se puede utilizar junto con la URL de datos
Data-titleEspecifica el título que deseas compartir (el asunto del correo electrónico en algunos canales de correo electrónico)
imagen de datosEspecifica un enlace a la imagen que deseas mostrar en el contenido compartido
datos-DescripciónEspecifica texto de Resumen/Descripción que desea compartir
Data-usernameEspecifica tu nombre de usuario de Twitter
mensaje de datosEspecifica la copia corporal de las acciones de correo electrónico
data-email-subjectEspecifica el asunto del correo electrónico
  1. Navegue hasta una página de su sitio web (por ejemplo, un blog, un producto, etc.) y pegue el código de colocación que ha copiado de la plataforma ShareThis, donde quiera que aparezca la herramienta ShareThis.

Nota

  • ShareThis will look for the <div> code of the buttons along with its data attributes and ShareThis classes on your website’s code, so if you have a custom icon or image you want to set for the buttons, you will have to wrap it inside the <div> mentioned above, like this:
  • One way to display the share count for each social platform is adding a span code with the <em>count</em> class<em><strong> </strong></em><strong><em>inside</em></strong> the <div> code for the buttons: