it-swarm-es.com

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

Tengo este código que se supone que funciona, pero no funciona. Si esto te ayuda de cualquier manera, 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 de compartir de Facebook en mi sitio web, que solo debería publicar el contenido de mi sitio web en la pared. Quien quiera compartirlo.

He investigado mucho pero no conseguí nada. Por favor ayúdame en esto.

Gracias por adelantado.

83
Sahibjot Singh

No necesitas todo ese código. Todo lo que necesitas 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/

206
asifrc

Puede hacerlo utilizando el SDK de Javascript asíncrono proporcionado por facebook

Echa un vistazo al siguiente código

FB Javascript SDK inicialización

<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 la ID DE SU APLICACIÓN con su ID de Facebook. Si no tiene un ID de aplicación de Facebook y no sabe cómo crearlo, por favor verifique esto

Agregar JQuery Library, preferiría Google Library

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

Agregar cuadro de diálogo Compartir (Puede personalizar este cuadro de diálogo configurando los 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 agrega el botón de imagen

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

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

24
Virat Gaywala

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

Trabajando JSFIDDLE

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

Incluya el código de Facebook JavaScript SDK justo después de la etiqueta de apertura <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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Y coloque el código debajo de 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>

enter image description here

Compruebe el funcionamiento JSFIDDLE

13
Subodh Ghulaxe

Para compartir en Facebook con una imagen sin unAPIy usar un # para un enlace profundo en una subpágina, el truco fue compartir la imagen como picture=

La variable mainUrl sería http://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;
});
4
t q

Compartir Diálogo sin requerir el inicio de sesión de Facebook

Puede activar un diálogo de compartir usando la función FB.ui con el parámetro del método de compartir para compartir un enlace. Este diálogo está disponible en los SDK de Facebook para JavaScript, iOS y Android realizando una redirección completa 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 meta etiquetas de gráficos abiertos en la página de esta URL para personalizar la historia que se comparte de nuevo 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 puedes compartir directamente el enlace con la llamada si tienes 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 => El identificador único de tu aplicación. (Necesario.)

  • redirect_uri => La URL a la que se redirecciona después de que una persona haga clic en un botón del cuadro de diálogo. Requerido 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 visualización de página completa, que se muestra en 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 diálogo, esto se especifica automáticamente y elige un tipo de pantalla apropiado para el dispositivo. Si está utilizando el SDK de Facebook para JavaScript, este será el predeterminado para un tipo de iframe modal para las personas que inician sesión en su aplicación o async al usar dentro de un juego en Facebook.com, y una ventana emergente para todos los demás. También puede forzar la ventana emergente o los tipos de página al usar el SDK de Facebook para JavaScript, si es necesario. Las aplicaciones web móviles siempre se ajustarán de forma predeterminada al tipo de pantalla táctil. compartir Parámetros

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

Para su propio servidor específico o para 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 obtendrás la idea ...

1
DagicCross