Jump to content

Crear botón compartir facebook en smartblog

guelu

By guelu
in Discusión general

 Share

Recommended Posts

guelu Newbie

guelu

Posted
Posted

Hola amigos,

 

Como muchos de vosotros he instalado el módulo gratuito Smart Blog que sin ser la panacea, es una gran paso para integrar fácilmente un blog en nuestro prestashop. El problema viene, al menos para mí, cuando intento instalar el módulo de Addthisbuttom ya que me salen los diferentes botones de compartir cada uno a una altura diferente con lo que estéticamente es un caos...

 

Como no he sido capaz de alinearlos todos a una misma altura, he decidido desinstalar el módulo en cuestión y insertar los botones de compartir a pelo!!

 

Cómo?

 

Pues en raiz/modules/smartblog/views/templates/front dentro del archivo post.tpl he insertado estas líneas:

<button type="button" class="btn btn-default btn-twitter" onclick="window.open('https://twitter.com/share')" target="_blank" data-via="Naturaonline1"> <i class="icon-twitter"></i> Tweet </button>
<button type="button" class="btn btn-default btn-facebook" onclick="window.open('http://www.facebook.com/sharer.php?s=100&p[url]=url_contenido&p[title]=titulo_compartido&p[summary]=descripcion&p[images][1]=thumbnail_image_url')" target="_blank"> <i class="icon-facebook"></i> Facebook </button>

Como se aprecia he puesto dos botones, twitter y facebook. Ambos abren una pestaña nueva y nos permiten compartir el artículo en cuestión pero me surgen dos dudas/problemas...

 

1.- En twitter, como puedo añadir al compartir la foto de la cabecera del artículo?

 

2.- En facebook, consigo que aparezca la foto en el thumbnail, pero al compartir el artículo la foto que aparece es la que tengo primera en el slider del home...

 

Os dejo el link a mi web a ver si podeis echarme una mano

 

naturaonline.es

 

Muchas gracias y Feliz año nuevo!!!

Link to comment
Share on other sites
guelu Newbie

guelu

Posted
  • Author
Posted (edited)

Sigo investigando y ya he conseguido poner dos botones, twitter y facebook, os dejo el código:

 

{literal}
<a href="https://twitter.com/share" class="twitter-share-button" data-via="Naturaonline1">Tweet</a>





<div class="fb-share-button"  data-layout="button_count"></div>
<div id="fb-root"></div>
<script>
document.write("<div class='fb-comments' data-href='" + window.location.href + "' data-num-posts='2' data-width='400'></div>");
</script>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


{/literal}

 

Este código está en el archivo post.ptl

 

Funciona perfectamente a excepción de que en facebook al compartir la minifoto está bien pero lo foto que comparte es la primera de mi slider... he puesto el código:

	{*Invisible RDA data for Facebook*}
{if isset($have_image)}
{if $have_image}<meta name="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}" />{/if}
<meta name="og:type" content="og:product" />
{else}
<meta name="og:image" content="{$logo_url}" />
<meta name="og:type" content="og:website" />
{/if}
<meta name="og:title" content="{$meta_title}" />
<meta name="og:description" content="{$meta_description}" />

en el header.tpl de mi tema y he conseguido que al compartir un artículo de la tienda lo haga correctamente pero no me coge la foto del post del blog ( smart blog)

 

A ver si alguien arroja algo de luz...

Edited by guelu (see edit history)
Link to comment
Share on other sites
guelu Newbie

guelu

Posted
  • Author
Posted

Sigo investigando a ver si podemos hacer que cuando se comparte el post de smartblog, la imagen sea la que tiene el artículo en cuestión. Por ahora la mini-imagen que aparece en el popup es la correcta pero luego, en facebook aparece otra, en mi caso la primera imagen del slider.

 

he estado probando incluir esto en los meta del header.tpl ya que estoy casi seguro que debemos decirle al facebook que cuando la página sea la de smartblog, coja esa imagen.

{if $name_pages== ‘module-smartblog-details’}<meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.post_images, 'single_default' )}" />

pero no funciona... algo está mal.... a ver si alguien puede echarle un vistazo.

 

Gracias!

Link to comment
Share on other sites
guelu Newbie

guelu

Posted
  • Author
Posted

Hola amigos,

 

Llevo ya varios días dándole vueltas a un problema que tengo. En mi tienda tenemos un blog montado sobre Smartblog. Hemos insertado un par de botones para compartir con twitter y facebook que aparecen al final de cada post. Ambos funcionan, pero el de facebook presenta un error y es que cuando abre el popup, la miniatura, el título y la descripción del artículo que se va a compartir son correctos pero cuando se comparte, en el muro de facebook la imagen es otra. En mi caso esa imagen la coge del slider del home!!

 

Se que debe de haber un error en los meta og:image, pero no se como solucionarlo. Actualmente los meta que tengo en el header.tpl son estos:


		{*Invisible RDA data for Facebook*}
	{if isset($have_image)}
	{if $have_image}<meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default' )}" />{/if}
	<meta property="og:type" content="og:product" />
{else}
	<meta property="og:image" content="{$logo_url}" />
	<meta property="og:type" content="og:website" />
{/if}
	<meta property="og:title" content="{$meta_title}" />
	<meta property="og:description" content="{$meta_description}" />

Con los productos de la tienda, funciona perfectamente pero con los post no.

 

A ver si alguien puede ayudarnos ya que por lo que llevo leído le pasa a mucha gente.

 

Por cierto, mi versión de prestashop es 1.6.0.9 y la web donde podéis ver el problema es naturaonline.es

 

Gracias!

Link to comment
Share on other sites
galindogadea Newbie

galindogadea

Posted
Posted

Hola amigos,
 
Llevo ya varios días dándole vueltas a un problema que tengo. En mi tienda tenemos un blog montado sobre Smartblog. Hemos insertado un par de botones para compartir con twitter y facebook que aparecen al final de cada post. Ambos funcionan, pero el de facebook presenta un error y es que cuando abre el popup, la miniatura, el título y la descripción del artículo que se va a compartir son correctos pero cuando se comparte, en el muro de facebook la imagen es otra. En mi caso esa imagen la coge del slider del home!!
 
Se que debe de haber un error en los meta og:image, pero no se como solucionarlo. Actualmente los meta que tengo en el header.tpl son estos:
{*Invisible RDA data for Facebook*}
{if isset($have_image)}
{if $have_image}<meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default' )}" />{/if}
<meta property="og:type" content="og:product" />
{else}
<meta property="og:image" content="{$logo_url}" />
<meta property="og:type" content="og:website" />
{/if}
<meta property="og:title" content="{$meta_title}" />
<meta property="og:description" content="{$meta_description}" />
 
Con los productos de la tienda, funciona perfectamente pero con los post no.
 
A ver si alguien puede ayudarnos ya que por lo que llevo leído le pasa a mucha gente.
 
Por cierto, mi versión de prestashop es 1.6.0.9 y la web donde podéis ver el problema es naturaonline.es
 
Gracias!
 
Aquí:
 
 <meta property="og:image" content="{$logo_url}" />
 
Creo que aqui habria que cambiar la variable cuando estas en esa sección por la variable de que usa el modulo para mostrar la imagen principal, es decir cambiar esto:
 
{$logo_url}
por la variable que usa el modulo para mostrar la imagen principal del post. (Como no he tocado el codigo del modulo, no puedo decirte de memoria la variable que usara el modulo)
Link to comment
Share on other sites
galindogadea Newbie

galindogadea

Posted
Posted

Sigo investigando a ver si podemos hacer que cuando se comparte el post de smartblog, la imagen sea la que tiene el artículo en cuestión. Por ahora la mini-imagen que aparece en el popup es la correcta pero luego, en facebook aparece otra, en mi caso la primera imagen del slider.

 

he estado probando incluir esto en los meta del header.tpl ya que estoy casi seguro que debemos decirle al facebook que cuando la página sea la de smartblog, coja esa imagen.

{if $name_pages== ‘module-smartblog-details’}<meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.post_images, 'single_default' )}" />
pero no funciona... algo está mal.... a ver si alguien puede echarle un vistazo.

 

Gracias!

 

 

 

Y:

 

{if $page_name="module-smartblog-details"} 
<meta property="og:image" content="$variablequeuseelmoduloparaimprimirlacoverdelpost"  />{/if}
¿?

 

¿Hablamos (sabiendo por otros temas que esta es tu web: http://naturaonline.es/BlogNaturaonline/14_Granzima-B-piel-joven.html (De esa seccion, de cuando estas ciendo el blog) ¿no? ?

Link to comment
Share on other sites
galindogadea Newbie

galindogadea

Posted
Posted

 

 

Y:

 

{if $page_name="module-smartblog-details"} 
<meta property="og:image" content="$variablequeuseelmoduloparaimprimirlacoverdelpost"  />{/if}
¿?

 

¿Hablamos (sabiendo por otros temas que esta es tu web: http://naturaonline.es/BlogNaturaonline/14_Granzima-B-piel-joven.html (De esa seccion, de cuando estas ciendo el blog) ¿no? ?

 

 

He intentando ver el modulo, creo que usa la variable:

{$modules_dir}/smartblog/images/{$post_img}-single-default.jpg

para imprimir la imagen principal del post... (Pero no estoy seguro, ya que me he quedo sin batería y no puedo verlo con tranquilidad)

  • Like 1
Link to comment
Share on other sites
guelu Newbie

guelu

Posted
  • Author
Posted

Muchas gracias a ambos

 

El módulo ese que indica rafaelamargo añade botones de me gusta pero no de compartir.

En cuanto a lo que comentas Galindogadea, coincido contigo, el problema está en {$logo_url}

 

Pero lo que entiendo del código es que mira si hay una imagen de producto, si la hay, es la que pone y si no pone {$logo_url}

Como ya comenté este código está en el header y con los productos de la tienda funciona perfectamente.

 

Lo que no se como hacer es que cuando esté en la página del blog mire si hay imagen y si la hay que la añada. El id de la página de cada post es :module-smartblog-details, por eso pensé que el código podría completar se con un condicional del tipo : 

{if $name_pages== ‘module-smartblog-details’}
<meta property="og:image" content="{$modules_dir}/smartblog/images/{$post_img}-single-default.jpg
" />{/if}

no se si es correcto, si está bien escrito?!

Podeis mirarlo?

 

Gracias!

Link to comment
Share on other sites
rafaelamargo Newbie

rafaelamargo

Posted
Posted

He intentando ver el modulo, creo que usa la variable:

{$modules_dir}/smartblog/images/{$post_img}-single-default.jpg
para imprimir la imagen principal del post... (Pero no estoy seguro, ya que me he quedo sin batería y no puedo verlo con tranquilidad)

 

Me cuelo..

 

Prueba colocarlo casi:

 

if $page_name="module-smartblog-details"} 
<meta property="og:image" content="{$base_dir}{$modules_dir}smartblog/images/{$post_img}-single-default.jpg"  />{/if}
Al pasar la url del post de tu web, en la herramienta developer de facebook: https://developers.facebook.com/tools/debug/og/object?q= que te dice la herramienta ¿?
Link to comment
Share on other sites
guelu Newbie

guelu

Posted
  • Author
Posted (edited)

voy a poner todo el código completo ya que me da un pantallazo blanco la web y es que debe haber un </if> mal o algo de eso...

	{*Invisible RDA data for Facebook*}
	{if isset($have_image)}
	{if $have_image}<meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default' )}" />{/if}
	<meta property="og:type" content="og:product" />
{else}
	<meta property="og:image" content="{$logo_url}" />
	<meta property="og:type" content="og:website" />
{/if}
	<meta property="og:title" content="{$meta_title}" />
	<meta property="og:description" content="{$meta_description}" />
	{if $name_page="module-smartblog-details"} 
<meta property="og:image" content="{$base_dir}{$modules_dir}smartblog/images/{$post_img}-single-default.jpg"  />{/if}

Edito, faltaba un corchete en el if, ya lo he resulto, ahora carga la web pero cuando pruebo el compartir desde el blog, ocurre igual que antes, realiza el share pero con la imagen mal.....

Edited by guelu (see edit history)
Link to comment
Share on other sites
guelu Newbie

guelu

Posted
  • Author
Posted

El modulo tiene que tener una variable para las imagenes de los post (mira en el .tpl) añadela al condicional del header

Hola ventura, entiendo que la variable es $post_img

el código de post.tpl es:

<div itemprop="articleBody">
            <div id="lipsum" class="articleContent">
                    {assign var="activeimgincat" value='0'}
                    {$activeimgincat = $smartshownoimg} 
                    {if ($post_img != "no" && $activeimgincat == 0) || $activeimgincat == 1}
                        <a id="post_images" href="{$modules_dir}/smartblog/images/{$post_img}-single-default.jpg"><img src="{$modules_dir}/smartblog/images/{$post_img}-single-default.jpg" alt="{$meta_title}"></a>
                    {/if}
             </div>
            <div class="sdsarticle-des">
               {$content}
            </div>
Link to comment
Share on other sites
galindogadea Newbie

galindogadea

Posted
Posted

Edito, faltaba un corchete en el if, ya lo he resulto, ahora carga la web pero cuando pruebo el compartir desde el blog, ocurre igual que antes, realiza el share pero con la imagen mal.....

Este fin de semana prueba el smartblog, y lo del boton de facebook, y en caso de que consiga solucionarlo o que me funcione te comento. (Es que no he instalado realmente antes el modulo)

 

Saludos,

Link to comment
Share on other sites
  • 1 month later...
Jessy Newbie

Jessy

Posted
Posted

A mi me pasa algo parecido, no sé si es cosa del blog o no.

 

Cuando le doy al botón de compartir en facebook cualquier post de mi blog, no aparece imagen, sólo texto. Si la comparto, me voy a facebook y lo que sale es el texto y la imagen, pero la imagen es "No imagen available"

 

Sabéis a qué se debe?

Link to comment
Share on other sites
  • 2 months later...
gamali Newbie

gamali

Posted
Posted

hola yo tengo este mismo problema, al compartir no me muestra la imagen del blog sino otra que no tiene nada que ver, que es la de una categoría, alguien tiene alguna solución? me gustaría saberla porque no he encontrado nada que me sirva. saludos y gracias

Link to comment
Share on other sites
  • 2 months later...
Zuzoto Newbie

Zuzoto

Posted
Posted

Me pasa lo mismo, al compartir un post de smartblog en facebook, me coge una imagen de un producto que no tiene nada que ver. ¿Se consiguió solucionar? Veo que el usuario que reportaba el problema lo tiene ya arreglado, al menos en su facebook la imagen que le sale al compartir sus posts de smartblog es la correcta.

 

Gracias!

Link to comment
Share on other sites
guelu Newbie

guelu

Posted
  • Author
Posted

Hola a todos,

Ante diversos email que he recibido sobre cómo solucioné este tema solo decir que no lo he solucionado, las publicaciones que veis en el facebook de  los artículos del blog de naturaonline los hago a mano ya que si los comparto automáticamente sigue poniendo la imagen que le parece.... Espero que haya otros usuarios que puedan echarnos una mano ya que en este momento estamos en un callejón sin salida.

Un saludo!

Link to comment
Share on other sites
  • 6 months later...
lafactoriadidees Newbie

lafactoriadidees

Posted
Posted

Sobre los tags para Facebook en header.tpl...

Antes del </head>:

 
{if $page_name == "module-smartblog-details"} 
<meta property="og:title" content="{$meta_title}" />
<meta property="og:description" content="{$content|strip_tags|truncate:100}" />
<meta property="og:image" content="{$base_dir}{$modules_dir}smartblog/images/{$post_img}-single-default.jpg"  />
{/if}
 
y todo lo que queráis agregarle...
Luego usad el depurador de facebook para verificar la info y veréis como funciona: https://developers.facebook.com/tools/debug/og/object/
 
Yo acabo de hacer esta corrección para el blog de un cliente, y ningún problema.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...