imagenes - Múltiples botones para compartir Facebook, Twitter en una página con imagen personalizada y título

boton compartir facebook personalizado

Question

Estoy creando un blog en el que la página de destino mostrará 5 publicaciones más recientes de forma predeterminada y cada publicación tendrá botones para compartir en Facebook y Twitter.

Necesitaré cada uno de los botones compartir para tener un título predeterminado, una descripción y una imagen adjunta a ellos y estoy usando un gráfico abierto para anexar los datos.

El problema es cómo incluir múltiples datos de gráfico abierto para cada botón del recurso compartido. Escuché que hay una forma de usar iframe y otra forma es pasar los datos en la URL compartida.

Answer 1

Aquí esta lo que hice.

Este código es para Twitter. Se agregó una vez en la sección HEAD html:

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));</script>

Este código es para Facebook. Se agregó una vez en la parte superior de la sección html BODY.

<div id="fb-root"></div>
<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/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, ''script'', ''facebook-jssdk''));
</script>

El HTML para la lista de la página de inicio con cada elemento que tiene sus propios botones de Twitter y FB. Cada referencia a la página de publicación específica.

<ul>
  <li>
    <h3>Post #1</h3>
    <div class="fb-share-button" data-href="https://example.com/post/1" 
         data-layout="button"></div>  
    <a href="https://twitter.com/share" class="twitter-share-button" 
       data-url="https://example.com/post/1">Tweet</a>
  </li>
  <li>
    <h3>Post #2</h3>
    <div class="fb-share-button" data-href="https://example.com/post/2" 
         data-layout="button"></div>  
    <a href="https://twitter.com/share" class="twitter-share-button" 
       data-url="https://example.com/post/2">Tweet</a>
  </li>
</ul>

Answer 2

Es bastante fácil de hacer: solo asocia a cada uno de los botones la URL de la página de publicación en lugar de la URL de la página de destino.

La implementación debería ser similar a la siguiente (por supuesto, debe recorrer sus publicaciones en su lugar):

<ul>
    <li>
        <h3>Post #1</h3>
        <div class="fb-like" data-href="https://google.com" data-text="Check out Google!" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>        
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://google.com">Tweet</a>
    </li>      
    <li>
        <h3>Post #2</h3>
        <div class="fb-like" data-href="https://facebook.com" data-text="Check out Facebook!" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>  
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://facebook.com">Tweet</a>
    </li>     
    <li>
        <h3>Post #3</h3>
        <div class="fb-like" data-href="https://.com" data-text="Check out !" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>  
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://.com">Tweet</a>
    </li>     
</ul>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?''http'':''https'';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+''://platform.twitter.com/widgets.js'';fjs.parentNode.insertBefore(js,fjs);}}(document, ''script'', ''twitter-wjs'');</script>
<div id="fb-root"></div>
<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/en_GB/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, ''script'', ''facebook-jssdk''));</script>