I
infrases
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Si en algún momento has querido personalizar el Plugin Social de Addthis, de manera que se pueda reemplazar los botones tradicionales por una imágen, has encontrado la solución. Para ver el ejemplo, tan solo basta mirar mi blog Enlace eliminado el botón que se usa para compartir el contenido (final de cada post) o podemos visitar la página Enlace eliminado, quienes también implementan este método.
TUTORIAL
Para implementar la personalización debemos implementar el siguiente código:
<!-- Botón Addthis -->
<a class='addthis_button' href='http://www.addthis.com/bookmark.php'>
<img alt='Compartir Publicación' border='1' height='32' src='URL-IMAGEN' width='200'/></a>
<script type='text/javascript'>var addthis_config = {"data_track_addressbar":true};</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID-PERFIL-ADDTHIS' type='text/javascript'/>
<!-- Botón Addthis END -->
Configurar Código
URL-IMAGEN: sólo basta con insertar la ubicación de la imágen estilo "botón compartir".
ID-PERFIL-ADDTHIS: cuando alguien se da de alta en el servicio Addthis cuenta con un serial ID único que es usado por el servicio para el seguimiento estadístico de las acciones en el sitio que implemente el Plugin. Para consultarlo deben seguir la siguiente ruta luego de iniciar sesión con la cuenta propia: Enlace eliminado
height='32': el número a digitar en este campo debe ser la altura exacta que tiene la imagen que se va a usar, si se usa otro valor la imagen se redimensionará tomando un aspecto poco estético para mi gusto.
width='200': el número a digitar en este campo debe el ancho exacto que tiene la imagen que se va a usar, si se usa otro valor la imagen se redimensionará tomando un aspecto poco estético para mi gusto.
¿CUÁL ES EL TRUCO?
Para explicar cuál es el procedimiento que se lleva a cabo para implementar la imágen en reemplazo de los botones sociales, voy a relacionar el código original (generado por Addthis) y luego lo vamos a comparar con el código personalizado:
Código Addthis:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid= ID-PERFIL-ADDTHIS "></script>
<!-- AddThis Button END -->
Código Personalizado:
Lo único que se hace es reemplazar la sección verde del código anterior (el original) por la sección de color azul que se visualiza en el siguiente:
<!-- Botón Addthis -->
<a class='addthis_button' href='http://www.addthis.com/bookmark.php'>
<img alt='Compartir Publicación' border='1' height='32' src='URL-IMAGEN' width='200'/></a><img alt='Compartir Publicación' border='1' height='32' src='URL-IMAGEN' width='200'/></a><script type='text/javascript'>var addthis_config = {"data_track_addressbar":true};</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID-PERFIL-ADDTHIS' type='text/javascript'/>
<!-- Botón Addthis END -->
Eso es todo, espero sea útil para quienes deseen modificar sus plantillas, de antemano aclaro que no soy programador html, sólo un Fanático Web.
Publicado en mi sitio: Enlace eliminado
---
TUTORIAL
Para implementar la personalización debemos implementar el siguiente código:
<!-- Botón Addthis -->
<a class='addthis_button' href='http://www.addthis.com/bookmark.php'>
<img alt='Compartir Publicación' border='1' height='32' src='URL-IMAGEN' width='200'/></a>
<script type='text/javascript'>var addthis_config = {"data_track_addressbar":true};</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID-PERFIL-ADDTHIS' type='text/javascript'/>
<!-- Botón Addthis END -->
Configurar Código
URL-IMAGEN: sólo basta con insertar la ubicación de la imágen estilo "botón compartir".
ID-PERFIL-ADDTHIS: cuando alguien se da de alta en el servicio Addthis cuenta con un serial ID único que es usado por el servicio para el seguimiento estadístico de las acciones en el sitio que implemente el Plugin. Para consultarlo deben seguir la siguiente ruta luego de iniciar sesión con la cuenta propia: Enlace eliminado
height='32': el número a digitar en este campo debe ser la altura exacta que tiene la imagen que se va a usar, si se usa otro valor la imagen se redimensionará tomando un aspecto poco estético para mi gusto.
width='200': el número a digitar en este campo debe el ancho exacto que tiene la imagen que se va a usar, si se usa otro valor la imagen se redimensionará tomando un aspecto poco estético para mi gusto.
¿CUÁL ES EL TRUCO?
Para explicar cuál es el procedimiento que se lleva a cabo para implementar la imágen en reemplazo de los botones sociales, voy a relacionar el código original (generado por Addthis) y luego lo vamos a comparar con el código personalizado:
Código Addthis:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid= ID-PERFIL-ADDTHIS "></script>
<!-- AddThis Button END -->
Código Personalizado:
Lo único que se hace es reemplazar la sección verde del código anterior (el original) por la sección de color azul que se visualiza en el siguiente:
<!-- Botón Addthis -->
<a class='addthis_button' href='http://www.addthis.com/bookmark.php'>
<img alt='Compartir Publicación' border='1' height='32' src='URL-IMAGEN' width='200'/></a><img alt='Compartir Publicación' border='1' height='32' src='URL-IMAGEN' width='200'/></a><script type='text/javascript'>var addthis_config = {"data_track_addressbar":true};</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID-PERFIL-ADDTHIS' type='text/javascript'/>
<!-- Botón Addthis END -->
Eso es todo, espero sea útil para quienes deseen modificar sus plantillas, de antemano aclaro que no soy programador html, sólo un Fanático Web.
Publicado en mi sitio: Enlace eliminado
---
