¿Cómo agregar el botón para compartir de Facebook en mi sitio web?

99

Tengo este código que se supone que funciona, pero no funciona. Si esto te ayuda de todos modos, sería genial.

<script src='http://connect.facebook.net/en_US/all.js'></script>
    <p><a onclick='postToFeed(); return false;'><img src="images/fb.png" /></a></p>
    <p id='msg'></p>

    <script> 
      FB.init({appId: "338334836292077", status: true, cookie: 

true});

      function postToFeed() {

        // calling the API ...
        var obj = {
          method: 'feed',
          redirect_uri:'https://www.facebook.com/cryswashington?fref=ts',
          link:'https://developers.facebook.com/docs/reference/dialogs/',
          picture: 'http://fbrell.com/f8.jpg',
          name: 'Facebook Dialogs',
          caption: 'Reference Documentation',
          description: 'Using Dialogs to interact with users.'
        };

        function callback(response) {

        document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }

    </script>

Quiero agregar el botón para compartir de Facebook en mi sitio web, que debería publicar el contenido de mi sitio web en la pared. que quieran compartirlo.

He investigado mucho pero no he obtenido nada. Por favor, ayúdame en esto.

Gracias por adelantado.

javascript facebook facebook-javascript-sdk share facebook-social-plugins Sahibjot Singh
fuente
2
sharelinkgenerator.com
Ronnie Royston

Respuestas:

252

No necesitas todo ese código. Todo lo que necesita son las siguientes líneas:

<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
  Share on Facebook
</a>

La documentación se puede encontrar en https://developers.facebook.com/docs/reference/plugins/share-links/

asifrc
fuente
7
Realmente no me gusta esta opción ... desearía que hubiera un enlace con estilo, como el botón de tweet
Serj Sagan
104
Entonces, ¿por qué no le das estilo al enlace? Definitivamente prefiero esta opción. Me gusta tener el control de cómo se ven mis diseños.
sheriffderek
6
Además, esta manera no agrega el código basura de Facebook, que ralentizaría su página. Consulte el complemento jquery de sharrre.com, que facilita la personalización de la apariencia y agrupa varios botones sociales "Me gusta" en uno.
pixeline
3
Sí, aún puede usar enlaces simples para compartir. Además, consulte esta página sencilla para obtener ayuda sobre la creación de enlaces sencillos para todos sus sitios populares de redes sociales: sharelinkgenerator.com
pistol-pete
1
Nota importante: esta idea en el móvil abre el sitio web de Facebook (no la aplicación FB). Estafa pequeña (o grande).
Ezra Siton
26

Puede hacer esto utilizando el SDK de JavaScript asíncrono proporcionado por Facebook

Eche un vistazo al siguiente código

Inicialización del SDK de FB Javascript

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

Nota: Recuerde reemplazar SU ID de APLICACIÓN con su AppId de Facebook. Si no tiene Facebook AppId y no sabe cómo crear, por favor marque esto

Agregue la biblioteca JQuery, preferiría la biblioteca de Google

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Agregar cuadro de diálogo para compartir (puede personalizar este cuadro de diálogo configurando parámetros

<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: "What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…",
message: ""
});
});
});
</script>

Ahora finalmente agregue el botón de imagen

<img src = "share_button.png" id = "share_button">

Para obtener información más detallada. por favor haga clic aquí

Virat Gaywala - CSM
fuente
7
... compare esto con la inicialización del equivalente de Twitter. Nueces.
Michael
6
Su enfoque requiere una identificación de aplicación, eso es un maldito dolor.
Horseyguy
¡Este todavía funciona como un encanto! ¡Excelente trabajo!
Coding Freak
¡¡Agradable!! fácil de comprender. Pero, ¿cómo sabemos si el usuario realmente ha compartido nuestro contenido? PD: response.error_message aparecerá solo si alguien que usa su aplicación ha autorizado su aplicación
Pearl
14

Puede leer más sobre el botón compartir aquí en el sitio web de desarrolladores de Facebook

JSFIDDLE de trabajo

También eche un vistazo al botón personalizado de Facebook Share JSFIDDLE

Incluya el código SDK de JavaScript de Facebook justo después de la <body>etiqueta de apertura

<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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Y coloque debajo del código donde quiera que se muestre el botón Compartir de Facebook

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>

ingrese la descripción de la imagen aquí

Compruebe JSFIDDLE en funcionamiento

Subodh Ghulaxe
fuente
8
¿Es posible que este código ya no funcione? Ni siquiera en jsfiddle
erdomester
8
Sí, tengo serios problemas para que esto funcione yo mismo ... Acabo de terminar con un div en blanco.
Michael
@erdomester El violín no se mostrará en Chrome o Firefox. Se debe a que la seguridad de los navegadores evita los iframes en espacio aislado. La apertura de jsfiddle en Safari debería mostrarse y una vez que lo implementes fuera de un jsfiddle, debería aparecer en los otros navegadores.
JisuKim82
4

Para compartir en Facebook con una imagen sin una API y usar un #enlace profundo en una subpágina, el truco consistía en compartir la imagen como picture=

la variable mainUrlseríahttp://yoururl.com/ 

var d1 = $('.targ .t1').text();
var d2 = $('.targ .t2').text();
var d3 = $('.targ .t3').text();
var d4 = $('.targ .t4').text();
var descript_ = d1 + ' ' + d2 + ' ' + d3 + ' ' + d4;
var descript = encodeURIComponent(descript_);

var imgUrl_ = 'path/to/mypic_'+id+'.jpg';
var imgUrl = mainUrl + encodeURIComponent(imgUrl_);

var shareLink = mainUrl + encodeURIComponent('mypage.html#' + id);

var fbShareLink = shareLink + '&picture=' + imgUrl + '&description=' + descript;
var twShareLink = 'text=' + descript + '&url=' + shareLink;

// facebook
$(".my-btn .facebook").off("tap click").on("tap click",function(){
  var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + fbShareLink, "pop", "width=600, height=400, scrollbars=no");
  return false;
});

// twitter
$(".my-btn .twitter").off("tap click").on("tap click",function(){
  var twpopup = window.open("http://twitter.com/intent/tweet?" + twShareLink , "pop", "width=600, height=400, scrollbars=no");
  return false;
});
tq
fuente
2

Compartir diálogo sin necesidad de iniciar sesión en Facebook

Puede activar un cuadro de diálogo para compartir utilizando la función FB.ui con el parámetro del método de compartir para compartir un enlace. Este cuadro de diálogo está disponible en los SDK de Facebook para JavaScript, iOS y Android al realizar un redireccionamiento completo a una URL.

Puede activar esta llamada:

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/', // Link to share
}, function(response){});

También puede incluir metaetiquetas de gráfico abierto en la página en esta URL para personalizar la historia que se comparte en Facebook.

Tenga en cuenta que response.error_message aparecerá solo si alguien que usa su aplicación ha autenticado su aplicación con Facebook Login.

También puede compartir directamente el enlace con la llamada al tener Javascript Facebook SDK.

https://www.facebook.com/dialog/share&app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

https://www.facebook.com/dialog/share&app_id={APP_ID}&display=popup&href={LINK_TO_SHARE}&redirect_uri={REDIRECT_AFTER_SHARE}

  • app_id => Identificador único de tu aplicación. (Necesario.)

  • redirect_uri => La URL a la que se redirecciona después de que una persona hace clic en un botón del cuadro de diálogo. Obligatorio cuando se utiliza la redirección de URL.

  • display => Determina cómo se representa el diálogo.

Si está utilizando la implementación del diálogo de redireccionamiento de URL, esta será una pantalla de página completa, que se muestra dentro de Facebook.com. Este tipo de visualización se llama página. Si está utilizando uno de nuestros SDK de iOS o Android para invocar el cuadro de diálogo, este se especifica automáticamente y elige un tipo de pantalla apropiado para el dispositivo. Si está utilizando el SDK de Facebook para JavaScript, este se establecerá de forma predeterminada en un tipo de iframe modal para las personas que hayan iniciado sesión en su aplicación o asíncrono cuando se use dentro de un juego en Facebook.com, y una ventana emergente para todos los demás. También puede forzar los tipos de páginas o ventanas emergentes al usar el SDK de Facebook para JavaScript, si es necesario. Las aplicaciones web móviles siempre estarán predeterminadas en el tipo de pantalla táctil. compartir parámetros

  • href => El enlace adjunto a esta publicación. Requerido cuando se usa el método compartido. Incluya metaetiquetas de gráfico abierto en la página en esta URL para personalizar la historia que se comparte.
Somnath Muluk
fuente
1

Para su propio servidor específico o diferentes páginas y botones de imagen, puede usar algo como esto (solo PHP)

<a href="http://www.facebook.com/sharer/sharer.php?u=http://'.$_SERVER['SERVER_NAME'].'" target="_blank"><img src="http://i.stack.imgur.com/rffGp.png" /></a>

No puedo compartir el fragmento con esto, pero entenderás la idea ...

DagicCross
fuente