web-dev-qa-db-de.com

Wie füge ich den Facebook Share Button auf meiner Webseite hinzu?

Ich habe diesen Code, der vermutlich funktioniert, 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-Freigabeknopf auf meiner Website hinzufügen, der nur den Inhalt meiner Website an die Pinnwand bringt. wer will es teilen.

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

Danke im Voraus.

84
Sahibjot Singh

Sie brauchen nicht den ganzen Code. Alles was Sie brauchen sind die folgenden 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/

214
asifrc

Verwenden Sie dazu das asynchrone Javascript SDK von Facebook

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

JQuery-Bibliothek hinzufügen, ich würde Google-Bibliothek vorziehen

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

Jetzt endlich Bild hinzufügen

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

Für detailliertere Informationen. bitte hier klicken

24
Virat Gaywala

Sie können mehr über den Share-Button lesen hier auf der Facebook-Entwickler-Website

Arbeiten [~ # ~] jsfiddle [~ # ~]

Schauen Sie sich auch den benutzerdefinierten Facebook Share-Button an JSFIDDLE

Fügen Sie den Facebook JavaScript SDK-Code direkt nach der Eröffnung hinzu <body> Etikett

<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 den Code unter der Stelle, an der 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>

enter image description here

Überprüfen Sie die Funktion [~ # ~] jsfiddle [~ # ~]

13
Subodh Ghulaxe

Für Facebook teilen mit einem Bild ohne ein [~ # ~] API [~ # ~] und mit einem # Um einen Deep Link zu einer Unterseite zu erstellen, bestand der Trick darin, das Bild als picture=

Die Variable mainUrl wäre 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

Share-Dialog ohne Facebook-Login

Mit der Funktion FB.ui und dem Parameter share method können Sie einen Share-Dialog auslösen, um einen Link freizugeben. Dieses Dialogfeld ist in den Facebook SDKs für JavaScript, iOS und Android durch Ausführen einer vollständigen Weiterleitung zu einer URL verfügbar.

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 Metatags für geöffnete Diagramme hinzufügen, um die für Facebook freigegebene Story anzupassen.

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

Sie können den Link auch direkt mit Anrufen teilen, indem Sie 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 im Dialogfeld auf eine Schaltfläche geklickt hat. Erforderlich bei Verwendung der URL-Umleitung.

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

Wenn Sie die Implementierung des URL-Weiterleitungsdialogs verwenden, wird diese Seite vollständig auf Facebook.com angezeigt. Diese Darstellungsart heißt Seite. Wenn Sie eines unserer iOS- oder Android SDKs zum Aufrufen des Dialogfelds verwenden, wird dies automatisch angegeben und ein geeigneter Anzeigetyp für das Gerät ausgewählt. Wenn Sie das Facebook-SDK für JavaScript verwenden, geschieht dies Standardmäßig wird ein modaler Iframe-Typ für Personen verwendet, die bei der Verwendung in einem Spiel auf Facebook.com in Ihrer App angemeldet oder asynchron sind, und ein Popup-Fenster für alle anderen. Sie können den Popup- oder Seitentyp auch erzwingen, wenn Sie das Facebook SDK für JavaScript verwenden. Bei Bedarf verwenden mobile Web-Apps standardmäßig den Touch-Display-Typ

  • href => Der an diesen Beitrag angehängte Link. Erforderlich bei Verwendung der Methodenfreigabe. Fügen Sie der Seite unter dieser URL Metatags für geöffnete Diagramme hinzu, um die freigegebene Story anzupassen.
1
Somnath Muluk

Für Ihren eigenen Server oder verschiedene Seiten & Bild-Buttons 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 ...

1
DagicCross