añadir botones de redes sociales - Solucionado

[Nareta1]

Buenos días, me gustaría añadir a mi pagina los botones de redes sociales, me ha gustado el de esta página http://www.simplesharebuttons.com/html-share-buttons/ pero ni idea de en que carpeta poner cada cosa.

 

Podría alguien ayudarme paso a paso a instalarlo en mi tienda prestashop 1.5.3 ?

 

Saludos,

Merche

Edited November 8, 2013 by Nareta1 (see edit history)

[yesiam]

Hola Merche, el primer recuadro de código lo copiarás en global.css que se encuentra en la carpeta css de tu theme:

 

#share-buttons img {

width: 35px;

padding: 5px;

border: 0;

box-shadow: 0;

display: inline;

}

 

 

 

El segundo recuadro del código lo tienes que copiar en la parte donde quieres que aparezca en tu web:

 

<div id="share-buttons">

 

<!-- Facebook -->

<a href="http://www.facebook.com/sharer.php?u=http://www.simplesharebuttons.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" /></a>

 

<!-- Twitter -->

<a href="http://twitter.com/share?url=http://www.simplesharebuttons.com&text=Simple Share Buttons" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" /></a>

 

<!-- Google+ -->

<a href="https://plus.google.com/share?url=http://www.simplesharebuttons.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/google.png" alt="Google" /></a>

 

<!-- Digg -->

<a href="http://www.digg.com/submit?url=http://www.simplesharebuttons.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/diggit.png" alt="Digg" /></a>

 

<!-- Reddit -->

<a href="http://reddit.com/submit?url=http://www.simplesharebuttons.com&title=Simple Share Buttons" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/reddit.png" alt="Reddit" /></a>

 

<!-- LinkedIn -->

<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.simplesharebuttons.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" /></a>

 

<!-- Pinterest -->

<a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"><img src="http://www.simplesharebuttons.com/images/somacro/pinterest.png" alt="Pinterest" /></a>

 

<!-- StumbleUpon-->

<a href="http://www.stumbleupon.com/submit?url=http://www.simplesharebuttons.com&title=Simple Share Buttons" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/stumbleupon.png" alt="StumbleUpon" /></a>

 

<!-- Email -->

<a href="mailto:?Subject=Simple Share Buttons&Body=I%20saw%20this%20and%20thought%20of%20you!%20 http://www.simplesharebuttons.com"><img src="http://www.simplesharebuttons.com/images/somacro/email.png" alt="Email" /></a>

 

</div>

 

 

Ejemplo:

 

Si lo copias en footer.tpl que se encuentra dentro de tu carpeta de themes,los botones de redes te aparecerán en la parte inferior de tu web.

 

Espero haberte ayudado, un saludo y gracias.

[Nareta1]

edito: solucionada esta parte, aunque no me ha salido donde yo quería, pero ya lo arreglaré más adelante...

 

Gracias por tu respuesta yesiam, en que parte del footer puedo insertar esas lineas? lo tengo así:

 

 

*}

 

{if !$content_only}

</div>

 

<!-- Right -->

<div id="right_column" class="column grid_2 omega">

{$HOOK_RIGHT_COLUMN}

</div>

</div>

 

 

 

<!-- Footer -->

<div id="footer" class="grid_9 alpha omega clearfix">

{$HOOK_FOOTER}

{if $PS_ALLOW_MOBILE_DEVICE}

<p class="center clearBoth"><a href="{$link->getPageLink('index', true)}?mobile_theme_ok">{l s='Browse the mobile site'}</a></p>

{/if}

</div>

</div>

{/if}

</body>

</html>

Edited November 7, 2013 by Nareta1 (see edit history)

[Sergio Ruiz]

Me gusta mas esto: http://mypresta.eu/en/art/tips-and-tricks/prestashop-social-share-buttons.html

[Nareta1]

Gracias por tu aporte Sergio, también lo probaré a ver cual queda mejor.

 

Ya lo tengo colocado aunque no en el sitio que me gustaría, pero por el momento me sirve, como continuo?

 

 

That will get your share buttons up and running! You’ll be sharing this website though, so there’s still more to be done…

Start by changing all instances of ‘http://www.simplesharebuttons.com’ with the URL of the site/page you wish the buttons to act for.

Next, change the four instances of ‘Simple Share Buttons’ to the title of the page or website that the buttons will be displayed. These are present for the following share buttons:

• Twitter
• Reddit
• StumbleUpon
• Email

[yesiam]

Puedes insertar el código después de <div id="footer" class="grid_9 alpha omega clearfix">

[Nareta1]

Que se tiene que hacer con esta parte?

 

changing all instances of ‘http://www.simplesharebuttons.com’ with the URL of the site/page you wish the buttons to act for.

 

Next, change the four instances of ‘Simple Share Buttons’ to the title of the page or website that the buttons will be displayed. These are present for the following share buttons:

• Twitter
• Reddit
• StumbleUpon
• Email

[yesiam]

Muy sencillo, ahí lo que te dicen es que para estos botones debes cambiar la dirección de ellos por la de tu web,

 

• Twitter
• Reddit
• StumbleUpon
• Email
•  

Ejermplo:

 

Este enlace es el original de ellos:

 

<a href="http://www.facebook....harebuttons.com" target="_blank"><img src="http://www.simplesha...ro/facebook.png"alt="Facebook" /></a>

 

Enlace corregido:

 

<a href="https://www.facebook.com/sharer/sharer.php?u=http://www.TUWEB.AQUI" target="_blank"><img src="http://www.simplesha...ro/facebook.png"alt="Facebook" /></a>

•  

Si descargas o insertas tus propias imágenes de los botones, debes cambiar la ruta de las mismas, ejemplo:

 

Actual Imagen Facebook:

 

http://www.simplesharebuttons.com/images/somacro/facebook.png

 

Modificado sería:

 

http://www.tuweb.com/ruta-donde-hayas-copiado-la-imagen/facebook.png

 

 

 

Un saludo.

Edited November 8, 2013 by yesiam (see edit history)

[Nareta1]

Muchas gracias, ya solo me falta hacer lo de modificar el enlace ! doy el post por solucionado.

 

Un millón de gracias por vuestra paciencia.