Share div content on Facebook

Question

Share div content on Facebook

Navigation

#1 by (7 votes)

3

I would like to share the content of a div in Facebook, the div is within a cycle for of PHP, therefore various information is loaded in a table. What I would like to know is how to share the content of each of the div that are generated.

With the Facebook plugin, you share a random image with a random description and the title of my page.

This is the code that I would like to share. That would be row->imagen , row->descripcion and row->titulo .

Does anyone have an idea of how it can be done?

<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>

html5 php facebook

asked by Agustin Acosta 12.02.2016 в 21:29

source

1 answer

Import modules in JavaScript Error refreshing table in XHTML (Primefaces JavaWeb)

score 7 · Accepted Answer

Here I leave a couple of options of how it could be done, although there must be some more.

Option 1: Using the feed API

You can use the Facebook API to share in the feed . In this way you could create a link of your own like this:

Note: everything should be followed and no line breaks or it will fail. I put it like this so that each one of the fields can be seen better.

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

and open it in a window / pop-up for users to share.

The fields that interest you for your particular case are:

name : the name of the link that is shared (its value would be row->titulo )
caption : the description of the link that is shared (its value would be row->descripcion )
picture : the image you want to accompany the link (its value would be row->imagen ). It must have a width of at least 200 pixels.
link : The link to be shared (it should be the URL of the page).

Option 2: Using iframes

I have seen this method on the Internet, although I do not know if it is highly recommended. The idea is to use iframe s, put the share button on the page that loads and let Facebook take the information directly from the metadata of the iframe page (metadata that will be generated dynamically depending on the values to be passed in src ).

This way you would have a new page that for example would take as parameters the name, the description and the url of the image, and would use those values in the metadata fields that Facebook reads:

og:title : the title you want to read.
og:image : the image.
og:url : the link to share.
og:description : the description that will accompany the link.

For example, the metadata code:

<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" />