5

Quisiera compartir el contenido de un div en Facebook, el div se encuentra dentro de un ciclo for de PHP, por lo tanto varia información es cargada en una tabla. Lo que quisiera saber es cómo compartir el contenido de cada uno de los div que se generan.

Con el plugin de Facebook me comparte una imagen aleatoria, con una descripción aleatoria y el titulo de mi pagina.

Este es el código que me gustaría compartir. Que sería row->imagen, row->descripcion y row->titulo.

¿Alguien tiene una idea de cómo puede hacerse?

<td id="compartir"><div class="row-same-height row-full-height">
  <div class="col-md-6 col-md-height col-full-height border-right">
    <div class="panel">
      <div class="col-md-5 blog-post-img">

        <!------------------------------------------------------------------------------------------------------------------------------->
        <?php if($row->imagen == ""){?>
        <center><img src="class/imagen.png" style="max-height:500px;" alt=""></center>
        <?php }else{ ?>
        <center><img src="class/<?php print($row->imagen);?>"  style="max-height:400px;" alt=""></center>    
        <?php } ?>
        <!-------------------------------------------------------------------------------------------------------------------------------->

        <div class="col-md-7 panel-body">
          <h4 id="hola"><?php print($row->titulo);?></h4> 
          <small style="font-size:20px;">Costo: $<?php print($row->costo);?><br><a href="#"><?php print($row->categoria);?></a></small>
          <p><?php print($row->descripcion);?></p><br>

          <!-- Boton de Compartir -->
          <div class="fb-share-button" data-href="http://pagina.com/asdf/asdfasdf.php" data-layout="button_count"></div>
          <br><br><br><br><br> 

        </div><!--/.panel-body--> 
      </div><!--/.panel-->
    </div><!--/.col-->

</td>
1

1 respuesta 1

7

Aquí dejo un par de opciones de cómo podría hacerse, aunque debe haber algunas más.

Opción 1: Usando la API del feed

Puedes usar la API de Facebook para compartir en el feed. De este modo podrías crear un enlace propio como éste:

Nota: todo debería estar seguido y sin saltos de línea o fallará. Lo pongo así para que se vean mejor cada uno de los campos.

https://www.facebook.com/dialog/feed?
  app_id=TU_APP_ID
  &amp;display=popup
  &amp;name=Titulo%20del%20post
  &amp;caption=Un%20texto%20de%20ejemplo 
  &amp;link=https%3A%2F%2Fmi.pagina.com%2F
  &amp;redirect_uri=https://mi.pagina.com/enlace/a/redirigir
  &amp;picture=https://mi.pagina.com/enlace/a/imagen

y abrirlo en una ventana/pop-up para que los usuarios compartan.

Los campos que te interesan para tu caso en particular son:

  • name: el nombre del enlace que se comparte (su valor sería row->titulo)
  • caption: la descripción del enlace que se comparte (su valor sería row->descripcion)
  • picture: la imagen que quieres que acompañe al enlace (su valor sería row->imagen). Debe tener un ancho de al menos 200 pixels.
  • link: El enlace que se compartirá (debería ser la URL de la página).

Opción 2: Usando iframes

He visto este método en Internet, aunque no sé si es muy recomendado. La idea es usar iframes, poner el botón de compartir en la página que se carga y dejar que Facebook tome la información directamente de la metadata de la página del iframe (metadata que se generará de manera dinámica dependiendo de los valores que se le pasen en el src).

Así tendrías una nueva página que por ejemplo tomaría como parámetros el nombre, la descripción y la url de la imagen, y usaría esos valores en los campos de metadata que lee Facebook:

  • og:title: el título que quieres que se lea.
  • og:image: la imagen.
  • og:url: el enlace a compartir.
  • og:description: la descripción que acompañará al enlace.

Por ejemplo el código de la metadata:

<meta property="og:type"   content="website" /> 
<meta property="og:url"    content="http://mi.pagina.com" /> 
<meta property="og:title"  content="Titulo de la pagina" /> 
<meta property="og:image"  content="http://mi.pagina.com/link/a/imagen.jpg" /> 
3
  • Muchas gracias probare las opciones y ojala funcione!! Commented el 15 feb. 2016 a las 15:00
  • Muchas gracias Alvaro Montoro, tuve dificultades pero con la opcion 1 me va de maravilla. Gracias :) Commented el 3 mar. 2016 a las 20:26
  • @AgustinAcosta, no olvides marcar la respuesta como correcta para puntuar a Alvaro y cerrar esta pregunta.
    – Muriano
    Commented el 23 jun. 2016 a las 11:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.