Wie füge ich einen Facebook-Share-Button auf meiner Website hinzu?

98

Ich habe diesen Code, der funktionieren soll, aber nicht funktioniert. Wenn dir das trotzdem hilft, wäre das großartig.

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

Ich möchte einen Facebook-Share-Button auf meiner Website hinzufügen, der nur den Inhalt meiner Website an der Wand veröffentlicht. wer will es teilen.

Ich habe viel recherchiert, aber nichts bekommen. Bitte helfen Sie mir dabei.

Danke im Voraus.

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

Antworten:

251

Sie brauchen nicht den ganzen Code. Sie benötigen lediglich folgende Zeilen:

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

Die Dokumentation finden Sie unter https://developers.facebook.com/docs/reference/plugins/share-links/

asifrc
quelle
7
Mag diese Option nicht wirklich ... wünschte, es gäbe einen gestalteten Link, ähnlich dem Tweet-Button
Serj Sagan
104
Warum gestaltest du den Link dann nicht? Ich bevorzuge definitiv diese Option. Ich möchte die Kontrolle darüber haben, wie meine Designs aussehen.
Sheriffderek
6
Auf diese Weise wird auch kein Facebook-Junk-Code hinzugefügt, der Ihre Seite verlangsamen würde. Sehen Sie sich das jquery-Plugin von sharrre.com an. Es macht es einfach, das Aussehen anzupassen und mehrere soziale "Gefällt mir" -Schaltflächen in einer zu bündeln.
Pixeline
3
Ja, Sie können weiterhin einfache Freigabelinks verwenden. Schauen
-pete
1
Wichtiger Hinweis: Diese Idee auf dem Handy öffnet die Facebook-Website (Not FB App). Kleiner (oder großer) Betrug.
Ezra Siton
26

Sie können dies tun, indem Sie das von Facebook bereitgestellte asynchrone Javascript SDK verwenden

Schauen Sie sich den folgenden Code an

FB Javascript SDK-Initialisierung

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

Hinweis: Denken Sie daran, IHRE APP-ID durch Ihre Facebook-AppId zu ersetzen. Wenn Sie keine Facebook-AppId haben und nicht wissen, wie Sie sie erstellen sollen, überprüfen Sie dies bitte

Fügen Sie JQuery Library hinzu, ich würde Google Library bevorzugen

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

Dialogfeld "Freigabe hinzufügen" (Sie können dieses Dialogfeld anpassen, indem Sie Parameter einrichten

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

Fügen Sie nun endlich die Bildschaltfläche hinzu

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

Für detailliertere Informationen. Bitte klicken Sie hier

Virat Gaywala - CSM
quelle
7
... vergleichen Sie dies mit der Initialisierung des Twitter-Äquivalents. Nüsse.
Michael
6
Ihr Ansatz erfordert eine App-ID, das ist ein verdammter Schmerz.
Horseyguy
Dieser arbeitet immer noch wie ein Zauber! Hervorragende Arbeit!
Coding Freak
Nett!! einfach zu verstehen. Aber woher wissen wir, ob der Benutzer unsere Inhalte tatsächlich geteilt hat? PS: response.error_message wird nur angezeigt, wenn jemand, der Ihre App verwendet, Ihre App authentifiziert hat
Pearl
14

Weitere Informationen zum Teilen-Button finden Sie hier auf der Facebook-Entwickler-Website

Arbeits JSFIDDLE

Schauen Sie sich auch die benutzerdefinierte Facebook Share-Schaltfläche JSFIDDLE an

Fügen Sie Facebook JavaScript SDK - Code direkt nach dem Öffnen <body>Tag

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

Und platzieren Sie unter dem Code, wo immer Sie den Facebook Share-Button anzeigen möchten

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

Geben Sie hier die Bildbeschreibung ein

Überprüfen Sie das funktionierende JSFIDDLE

Subodh Ghulaxe
quelle
8
Ist es möglich, dass dieser Code nicht mehr funktioniert? Nicht einmal in jsfiddle
erdomester
8
Ja, ich habe ernsthafte Probleme damit, das selbst zum Laufen zu bringen ... Ich habe nur eine leere Div.
Michael
@erdomester Die Geige wird in Chrome oder Firefox nicht angezeigt. Dies liegt an der Sicherheit des Browsers, die iframes mit Sandbox verhindert. Das Öffnen der jsfiddle in Safari sollte angezeigt werden, und sobald Sie sie außerhalb einer jsfiddle implementieren, sollte sie in den anderen Browsern angezeigt werden.
JisuKim82
4

Für die Facebook-Freigabe mit einem Bild ohne API und die Verwendung eines #zu tiefen Links in eine Unterseite bestand der Trick darin, das Bild so zu teilen, wie es picture=

die Variable sein mainUrlwürdehttp://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
quelle
2

Dialog teilen ohne Facebook-Login

Sie können einen Freigabedialog mithilfe der Funktion FB.ui mit dem Parameter der Freigabemethode auslösen, um einen Link freizugeben. Dieser Dialog ist in den Facebook-SDKs für JavaScript, iOS und Android verfügbar, indem eine vollständige Umleitung zu einer URL durchgeführt wird.

Sie können diesen Anruf auslösen:

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

Sie können der Seite unter dieser URL auch Meta-Tags für offene Grafiken hinzufügen, um die Story anzupassen, die wieder für Facebook freigegeben wird.

Beachten Sie, dass response.error_message nur angezeigt wird, wenn jemand, der Ihre App verwendet, Ihre App mit Facebook Login authentifiziert hat.

Sie können den Link auch direkt mit dem Anruf teilen, indem Sie das Javascript Facebook SDK verwenden.

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 => Die eindeutige Kennung Ihrer App. (Erforderlich.)

  • redirect_uri => Die URL, zu der umgeleitet werden soll, nachdem eine Person auf eine Schaltfläche im Dialogfeld geklickt hat. Erforderlich bei Verwendung der URL-Umleitung.

  • display => Legt fest, wie der Dialog gerendert wird.

Wenn Sie die Implementierung des URL-Umleitungsdialogs verwenden, wird dies eine ganzseitige Anzeige sein, die auf Facebook.com angezeigt wird. Dieser Anzeigetyp wird als Seite bezeichnet. Wenn Sie eines unserer iOS- oder Android-SDKs zum Aufrufen des Dialogfelds verwenden, wird dieses automatisch angegeben und ein geeigneter Anzeigetyp für das Gerät ausgewählt. Wenn Sie das Facebook SDK für JavaScript verwenden, wird standardmäßig ein modaler Iframe-Typ für Personen verwendet, die in Ihrer App angemeldet sind oder bei Verwendung in einem Spiel auf Facebook.com asynchron sind, und ein Popup-Fenster für alle anderen. Bei Bedarf können Sie auch die Popup- oder Seitentypen erzwingen, wenn Sie das Facebook SDK für JavaScript verwenden. Mobile Web-Apps verwenden standardmäßig immer den Touch-Display-Typ. Parameter teilen

  • href => Der Link zu diesem Beitrag. Erforderlich bei Verwendung der Methodenfreigabe. Fügen Sie unter dieser URL Meta-Tags für offene Diagramme in die Seite ein, um die freigegebene Story anzupassen.
Somnath Muluk
quelle
1

Für Ihren eigenen Server oder eine andere Seiten- und Bildschaltfläche können Sie so etwas verwenden (nur 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>

Ich kann das Snippet damit nicht teilen, aber Sie werden auf die Idee kommen ...

DagicCross
quelle