web-dev-qa-db-fra.com

Comment ajouter un bouton de partage facebook sur mon site?

J'ai ce code qui suppose de fonctionner, mais ne fonctionne pas. Si cela vous aide de toute façon, ce serait génial.

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

Je veux ajouter un bouton de partage facebook sur mon site Web. Cela devrait simplement afficher le contenu de mon site Web sur le mur. qui veulent le partager.

J'ai fait beaucoup de recherches mais je n'ai rien obtenu. Les aides m'aident dans ceci.

Merci d'avance.

javascriptfacebookfacebook-javascript-sdksharefacebook-social-plugins
84
Sahibjot Singh

Vous n'avez pas besoin de tout ce code. Tout ce dont vous avez besoin sont les lignes suivantes:

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

La documentation peut être trouvée à https://developers.facebook.com/docs/reference/plugins/share-links/

214
asifrc

Vous pouvez le faire en utilisant un SDK Javascript asynchrone fourni par facebook

Regardez le code suivant

Initialisation du FK Javascript SDK 

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

Remarque: N'oubliez pas de remplacer VOTRE ID APP par votre AppId facebook. Si vous n'avez pas Facebook AppId et que vous ne savez pas comment créer, veuillez cochez cette case

Ajouter la bibliothèque JQuery, je préférerais Google Library 

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

Boîte de dialogue Ajouter un partage (vous pouvez personnaliser cette boîte de dialogue en définissant des paramètres 

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

Ajoutez enfin le bouton image 

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

Pour des informations plus détaillées. s'il vous plaît cliquez ici

24
Virat Gaywala

Vous pouvez en savoir plus sur le bouton de partage ici sur le site Web des développeurs Facebook

Travailler JSFIDDLE

Jetez également un coup d'œil au bouton de partage Facebook personnalisé JSFIDDLE

Inclure le code du SDK JavaScript de Facebook juste après la balise d'ouverture <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>

Et placez le code ci-dessous à l'endroit où vous souhaitez afficher le bouton de partage 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

Vérifier le bon fonctionnement JSFIDDLE

13
Subodh Ghulaxe

Pour le partage Facebook avec une image sans un API et en utilisant un # pour lier en profondeur un sous page, le truc était de partager l'image en tant que picture=

La variable mainUrl serait 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

Dialogue de partage sans nécessiter de connexion à Facebook

Vous pouvez déclencher un dialogue de partage à l'aide de la fonction FB.ui avec le paramètre de méthode share pour partager un lien. Cette boîte de dialogue est disponible dans les kits de développement logiciel (SDK) Facebook pour JavaScript, iOS et Android en effectuant une redirection complète vers une URL.

Vous pouvez déclencher cet appel:

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

Vous pouvez également inclure des balises méta de graphique ouvert sur la page située à cette adresse URL pour personnaliser le récit partagé avec Facebook.

Notez que response.error_message apparaît uniquement si une personne utilisant votre application a authentifié votre application avec Facebook Login.

Aussi, vous pouvez directement partager le lien avec appel en ayant Javascript SDK Facebook.

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 => Identifiant unique de votre application. (Champs obligatoires.)

  • redirect_uri => L'URL vers laquelle rediriger une personne après avoir cliqué sur un bouton de la boîte de dialogue. Requis lors de l'utilisation de la redirection d'URL.

  • display => Détermine le rendu de la boîte de dialogue.

Si vous utilisez la mise en œuvre de la boîte de dialogue de redirection d'URL, il s'agira d'un affichage complet de la page, affiché sur Facebook.com. Ce type d'affichage s'appelle page. Si vous utilisez l'un de nos SDK iOS ou Android pour appeler la boîte de dialogue, cette option est automatiquement spécifiée et permet de choisir un type d'affichage approprié pour le périphérique. Si vous utilisez le kit de développement logiciel (SDK) pour JavaScript de Facebook, il utilisera par défaut un type d'iframe modal pour les personnes connectées à votre application ou asynchrone lors d'une utilisation dans un jeu sur Facebook.com, ainsi qu'une fenêtre contextuelle pour tous les autres. Vous pouvez également forcer le type de popup ou de page lorsque vous utilisez le SDK de Facebook pour JavaScript, si nécessaire. Les applications Web mobiles utiliseront toujours par défaut le type d'écran tactile. partager les paramètres

  • href => Le lien joint à ce message. Obligatoire lors de l'utilisation du partage de méthode. Incluez des balises méta de graphiques ouverts dans la page à cette URL pour personnaliser le récit partagé.
1
Somnath Muluk

Pour votre propre serveur spécifique ou différentes pages et bouton d'image, vous pouvez utiliser quelque chose comme ceci (PHP uniquement)

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

Je ne peux pas partager l'extrait avec cela, mais vous aurez l'idée ...

1
DagicCross