Comment ajouter un bouton de partage Facebook sur mon site Web?

100

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

<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, qui devrait simplement publier le contenu de mon site Web sur le mur. qui veulent le partager.

J'ai beaucoup recherché mais je n'ai rien obtenu. Merci de m'aider.

Merci d'avance.

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

Réponses:

254

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 sur https://developers.facebook.com/docs/reference/plugins/share-links/

asifrc
la source
7
Je n'aime pas vraiment cette option ... j'aurais aimé qu'il y ait un lien stylé, un peu comme le bouton tweet
Serj Sagan
104
Pourquoi ne pas styliser le lien alors? Je préfère définitivement cette option. J'aime avoir le contrôle de l'apparence de mes créations.
sheriffderek
6
De plus, cette manière n'ajoute pas le code indésirable de Facebook, ce qui ralentirait votre page. Voir le plugin jquery sharrre.com, il permet de personnaliser facilement l'apparence et de regrouper plusieurs boutons sociaux "comme" en un seul.
pixeline
3
Oui, vous pouvez toujours utiliser de simples liens de partage. Consultez également cette page simple pour obtenir de l'aide pour créer des liens simples vers tous vos sites de médias sociaux populaires: sharelinkgenerator.com
pistol-pete
1
Remarque importante: cette idée sur mobile ouvre le site Web de Facebook (pas d'application FB). Petit (ou gros) con.
Ezra Siton le
26

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

Jetez un œil au code suivant

Initialisation du SDK Javascript FB

<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 vérifier ceci

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

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

Maintenant, ajoutez enfin le bouton d'image

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

Pour des informations plus détaillées. veuillez cliquer ici

Virat Gaywala - CSM
la source
7
... comparez cela à l'initialisation de l'équivalent Twitter. Des noisettes.
Michael
6
Votre approche nécessite un identifiant d'application, c'est une sacrée douleur.
horseyguy
Celui-ci fonctionne toujours comme un charme! Excellent travail!
Coding Freak
Agréable!! facile à comprendre. Mais comment savoir si l'utilisateur a réellement partagé notre contenu? PS: response.error_message n'apparaîtra que si quelqu'un utilisant votre application a authentifié votre application
Pearl
14

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

JSFIDDLE de travail

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

Incluez le code du SDK JavaScript Facebook juste après la <body>balise d' ouverture

<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 où vous voulez afficher le bouton Partager Facebook

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

entrez la description de l'image ici

Vérifier le fonctionnement de JSFIDDLE

Subodh Ghulaxe
la source
8
Est-il possible que ce code ne fonctionne plus? Pas même dans jsfiddle
erdomester
8
Oui, j'ai de sérieux problèmes pour que cela fonctionne moi-même ... Je me retrouve avec un div vide.
Michael
@erdomester Le violon n'apparaîtra pas dans Chrome ou Firefox. Cela est dû à la sécurité des navigateurs qui empêche les iframes en bac à sable. L'ouverture de jsfiddle dans Safari devrait s'afficher et une fois que vous avez implémenté en dehors d'un jsfiddle, il devrait s'afficher dans les autres navigateurs.
JisuKim82
4

Pour partager Facebook avec une image sans API et en utilisant un #lien profond dans une sous-page, l'astuce consistait à partager l'image comme picture=

la variable mainUrlseraithttp://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
la source
2

Partager la boîte de dialogue sans nécessiter de connexion Facebook

Vous pouvez déclencher une boîte de dialogue de partage à l'aide de la fonction FB.ui avec le paramètre de méthode de partage pour partager un lien. Cette boîte de dialogue est disponible dans les 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 à cette URL pour personnaliser l'histoire qui est partagée sur Facebook.

Notez que response.error_message n'apparaîtra que si quelqu'un utilisant votre application a authentifié votre application avec Facebook Login.

Vous pouvez également partager directement le lien avec l'appel en utilisant le SDK Javascript 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. (Obligatoire.)

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

  • display => Détermine le rendu du dialogue.

Si vous utilisez l'implémentation de la boîte de dialogue de redirection d'URL, il s'agira d'un affichage d'une page complète, affiché dans Facebook.com. Ce type d'affichage est appelé page. Si vous utilisez l'un de nos SDK iOS ou Android pour appeler la boîte de dialogue, cela est automatiquement spécifié et choisit un type d'affichage approprié pour l'appareil. Si vous utilisez le SDK Facebook pour JavaScript, ce sera par défaut un type iframe modal pour les personnes connectées à votre application ou asynchrone lors de l'utilisation dans un jeu sur Facebook.com, et une fenêtre contextuelle pour tous les autres. Vous pouvez également forcer les types de popup ou de page lors de l'utilisation du SDK 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 attaché à ce message. Requis lors de l'utilisation du partage de méthode. Incluez des balises Meta graphiques ouvertes dans la page à cette URL pour personnaliser l'histoire partagée.
Somnath Muluk
la source
1

Pour votre propre serveur spécifique ou différentes pages et bouton d'image, vous pouvez utiliser quelque chose comme ça (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 de code avec cela, mais vous aurez l'idée ...

DagicCross
la source