OmbuShop Crea Tu Tienda Online

Integrar Redes Sociales en Tu Tienda Virtual

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

El carácter social que ha tomado la Web en el último tiempo implica una gran oportunidad. Permitir a los usuarios que compartan con sus amigos y conocidos los artículos que han encontrado en tu tienda será de gran ayuda para potenciar las ventas.

A continuación, explicaremos cómo agregar el código para compartir contenido en redes sociales a una tienda sobre Ombu Shop.

Utilizaremos el servicio que brinda el sitio AddThis.com, por su universalidad y la cantidad de redes sociales que incluye.

El código de AddThis

AddThis homepage

AddThis

Las opciones por default son muy fáciles de utilizar, y no requieren mayor esfuerzo. Desde la home de AddThis.com se puede elegir entre unas pocas opciones, y en seguida en la pantalla siguiente copiar y pegar el código.

AddThis copy screen

AddThis

Este código puede pegarse en cualquier parte de los templates generados en lenguaje Liquid de tu tienda Ombu Shop, por ejemplo en el template show.liquid.

El código puede lucir similar al siguiente (pero con otras variables, por lo que es importante que no se copie este ejemplo, sino el original otorgado por el sitio de 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" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ed540a009828b7d"></script>
<!-- AddThis Button END -->

Otra opción puede ser utilizar un método un tanto más personalizado. Ahondaremos en esto para poder generar nuestros propios íconos y permitir la opción de compartir el contenido de forma que esté en sintonía con la estética de tu tienda.

Método personalizado

Para poder decidir el tipo de diseño que incluirán los links para compartir el contenido con las diferentes redes sociales, primero habrá que subir las imágenes que harán las veces de botones o links. Puedes agregar imágenes, que estarán disponibles para el diseño de tu tienda, en la sección de Administración, dentro del ítem Diseño, en la subsección Archivos.

Upload Files

Panel de Administración OmbuShop

Una vez cargadas las imágenes, podrás modificar el código de AddThis de la siguiente manera:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox">
  <div class="custom_images">
    <a class="addthis_button_facebook"><img src="http://URL-DE-LA-IMAGEN-AQUI-FACEBOOK.gif" width="16" height="16" border="0" alt="Share to Facebook" /></a>
    <a class="addthis_button_twitter"><img src="http://URL-DE-LA-IMAGEN-AQUI-TWITTER.gif" width="16" height="16" border="0" alt="Share to Twitter" /></a>
    <a class="addthis_button_email"><img src="http://URL-DE-LA-IMAGEN-AQUI-EMAIL.gif" width="16" height="16" border="0" alt="Share to email" /></a>
    <a class="addthis_button_more"><img src="http://URL-DE-LA-IMAGEN-AQUI-MORE.gif" width="16" height="16" border="0" alt="More..." /></a>
  </div>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ec27ce840dd1dc2"></script>
<!-- AddThis Button END -->

Recuerda que debes ingresar el código de AddThis —ya sea el default, o el customizable— en alguno de tus templates. Por ejempo, puedes incluirlo en las páginas que muestran el detalle de los productos, si modificar el template llamado show.liquid.

Para modificar alguno de tus templates puedes ingresar al área de Administración, allí a la sección Diseño, en la subsección Templates.

Templates Ombushop

Panel de Administración OmbuShop

Tags: , , ,