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:
- Acceda a su cuenta de la plataforma ShareThis. Si no tienes una cuenta de ShareThis, regístrate gratis aquí.
- Go to your Profile (top right corner) and select Settings › Setup in the Platform and click Copy code under Copy your head code.
- Ingresa a tu sitio web HTML.
- Paste the unique ShareThis code that you copied from step 2 into the <strong><head></strong> of your website and <strong>Save</strong>.
- 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:
- 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"].
- 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 social | Código de la red de datos |
| Las Vidas Negras Importan | blm |
| Blogger | Blogger |
| Búfer | buffer |
| Copiar enlace | copia |
| Diáspora | diáspora |
| Digg | Digg |
| Douban | douban |
| Correo electrónico | |
| Evernote | evernote |
| Gmail | gmail |
| Marcadores de Google | googlebookmarks |
| Noticias Hacker | hackernews |
| Papel Instapaper | instapaper |
| iOrbix | iorbix |
| Kakao | kakao |
| Aplicación Koo | kooapp |
| Línea | línea |
| LiveJournal | Livejournal |
| Mail.ru | mailru |
| Menéame | Meneame |
| Mensajero | mensajero |
| Odnoklassniki | Odnoklassniki |
| Outlook | outlook |
| Bolsillo | getpocket |
| Imprimir | |
| Empujar a Kindle | kindleit |
| Qzone | qzone |
| Volver a encontrar | refind |
| Renren | renren |
| Skype | skype |
| Surfingbird | surfingbird |
| Telegrama | telegrama |
| Tencent QQ | tencentqq |
| Threema | threema |
| Trello | trello |
| Tumblr | Tumblr |
| Viber | viber |
| VK | Vk |
| ShareThis | ShareThis |
| Sina Weibo | |
| SMS | Sms |
| Snapchat | snapchat |
| Wordpress | wordpress |
| Correo Yahoo | yahoomail |
| Yummly | yummly |
Los atributos de los datos incluyen:
| red de datos | Especifica en qué plataforma social se compartirá el contenido |
| Data-URL | Especifica la URL (se puede acortar la URL) que le gustaría compartir |
| datos-Short-URL | Especifica una URL abreviada que se puede utilizar junto con la URL de datos |
| Data-title | Especifica el título que deseas compartir (el asunto del correo electrónico en algunos canales de correo electrónico) |
| imagen de datos | Especifica un enlace a la imagen que deseas mostrar en el contenido compartido |
| datos-Descripción | Especifica texto de Resumen/Descripción que desea compartir |
| Data-username | Especifica tu nombre de usuario de Twitter |
| mensaje de datos | Especifica la copia corporal de las acciones de correo electrónico |
| data-email-subject | Especifica el asunto del correo electrónico |
- 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
- Si necesitas ver un ejemplo trabajado de Botones de comaprtir Personalizados, puedes verlo aquí: https://codesandbox.io/s/amazing-sun-0rrb2?file=/index.html
- 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: