Come aggiungere il pulsante di condivisione di Facebook sul mio sito web?

100

Ho questo codice che dovrebbe funzionare, ma non funziona. Se questo ti aiuta in ogni caso, sarebbe fantastico.

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

Voglio aggiungere il pulsante di condivisione di Facebook sul mio sito Web, che dovrebbe semplicemente pubblicare il contenuto del mio sito Web sul muro. che vogliono condividerlo.

Ho fatto molte ricerche ma non ho ottenuto nulla. Per favore aiutami in questo.

Grazie in anticipo.

javascript  facebook  facebook-javascript-sdk  share  facebook-social-plugins 
— Sahibjot Singh
fonte
2
— Ronnie Royston

Risposte:

254

Non hai bisogno di tutto quel codice. Tutto ciò di cui hai bisogno sono le seguenti righe:

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

La documentazione può essere trovata su https://developers.facebook.com/docs/reference/plugins/share-links/

— asifrc
fonte
7
Non mi piace molto questa opzione ... vorrei che ci fosse un collegamento in stile, un po 'come il pulsante tweet
— Serj Sagan
104
Perché allora non modifichi il collegamento? Preferisco decisamente questa opzione. Mi piace avere il controllo di come appaiono i miei progetti.
— sheriffderek
6
Inoltre, in questo modo non viene aggiunto il codice spazzatura di Facebook, che rallenterebbe la tua pagina. Vedi il plugin jquery di sharrre.com, rende facile personalizzare l'aspetto e raggruppare diversi pulsanti sociali "come" in uno solo.
— pixeline
3
Sì, puoi comunque utilizzare semplici link di condivisione. Inoltre, dai un'occhiata a questa semplice pagina per aiuto nella creazione di link semplici per tutti i tuoi popolari siti di social media: sharelinkgenerator.com
— pistol-pete
1
Nota importante: questa idea sul cellulare apre il sito Web di Facebook (non l'app FB). Piccolo (o grande) truffatore.
— Ezra Siton,
26

Puoi farlo utilizzando l'SDK Javascript asincrono fornito da Facebook

Dai un'occhiata al seguente codice

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

Nota: ricorda di sostituire l'ID APP con il tuo AppId di Facebook. Se non hai AppId di Facebook e non sai come creare, controlla questo

Aggiungi JQuery Library, preferirei Google Library

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

Aggiungi finestra di dialogo di condivisione (è possibile personalizzare questa finestra di dialogo impostando i parametri

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

Ora finalmente aggiungi il pulsante immagine

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

Per informazioni più dettagliate. per favore clicca qui

— Virat Gaywala - CSM
fonte
7
... confrontalo con l'inizializzazione dell'equivalente Twitter. Noccioline.
— Michael
6
Il tuo approccio richiede un ID app, è un vero dolore.
— horseyguy
Questo funziona ancora come un fascino! Ottimo pezzo di lavoro!
— Coding Freak
Bello!! facile da capire. Ma come facciamo a sapere se l'utente ha effettivamente condiviso i nostri contenuti? PS: response.error_message apparirà solo se qualcuno che utilizza la tua app ha autorizzato la tua app
— Pearl
14

Puoi leggere di più sul pulsante di condivisione qui sul sito Web degli sviluppatori di Facebook

JSFIDDLE funzionante

Dai anche un'occhiata al pulsante Condividi su Facebook personalizzato JSFIDDLE

Includi il codice SDK JavaScript di Facebook subito dopo il <body>tag di apertura

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

E posiziona sotto il codice dove vuoi mostrare il pulsante Condividi di Facebook

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

inserisci qui la descrizione dell'immagine

Controlla JSFIDDLE funzionante

— Subodh Ghulaxe
fonte
8
È possibile che questo codice non funzioni più? Nemmeno in jsfiddle
— erdomester
8
Sì, avendo seri problemi a far funzionare questo da solo ... finisco con un div vuoto.
— Michael
@erdomester Il violino non verrà visualizzato in Chrome o Firefox. È dovuto alla sicurezza del browser che impedisce gli iframe sandbox. L'apertura di jsfiddle in Safari dovrebbe essere visualizzata e una volta implementato al di fuori di un jsfiddle dovrebbe essere visualizzato negli altri browser.
— JisuKim82
4

Per Facebook condividi con un'immagine senza API e utilizzando un #collegamento diretto in una sottopagina, il trucco era condividere l'immagine come picture=

la variabile mainUrlsarebbehttp://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
fonte
2

Condividi la finestra di dialogo senza richiedere l'accesso a Facebook

È possibile attivare una finestra di dialogo di condivisione utilizzando la funzione FB.ui con il parametro del metodo di condivisione per condividere un collegamento. Questa finestra di dialogo è disponibile negli SDK di Facebook per JavaScript, iOS e Android eseguendo un reindirizzamento completo a un URL.

Puoi attivare questa chiamata:

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

Puoi anche includere meta tag open graph sulla pagina a questo URL per personalizzare la storia condivisa su Facebook.

Tieni presente che response.error_message verrà visualizzato solo se qualcuno che utilizza la tua app ha autenticato la tua app con l'accesso a Facebook.

Inoltre puoi condividere direttamente il collegamento con la chiamata avendo 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 => Identificatore univoco della tua app. (Necessario.)

  • redirect_uri => L'URL a cui reindirizzare dopo che una persona fa clic su un pulsante nella finestra di dialogo. Obbligatorio quando si utilizza il reindirizzamento URL.

  • display => Determina la modalità di rendering della finestra di dialogo.

Se stai utilizzando l'implementazione della finestra di dialogo di reindirizzamento URL, questa sarà una visualizzazione a pagina intera, mostrata all'interno di Facebook.com. Questo tipo di visualizzazione è chiamato pagina. Se utilizzi uno dei nostri SDK iOS o Android per richiamare la finestra di dialogo, questo viene specificato automaticamente e scegli un tipo di visualizzazione appropriato per il dispositivo. Se stai utilizzando l'SDK di Facebook per JavaScript, verrà impostato per impostazione predefinita un tipo di iframe modale per le persone che hanno effettuato l'accesso alla tua app o asincrono quando lo usi all'interno di un gioco su Facebook.com e una finestra popup per tutti gli altri. Se necessario, puoi anche forzare il popup o i tipi di pagina quando utilizzi l'SDK di Facebook per JavaScript. Le app Web mobili verranno sempre impostate sul tipo di display touch. condividere parametri

  • href => Il link allegato a questo post. Obbligatorio quando si utilizza la condivisione del metodo. Includere meta tag open graph nella pagina a questo URL per personalizzare la storia condivisa.
— Somnath Muluk
fonte
1

Per il tuo server specifico o per pagine e pulsanti immagine diversi potresti usare qualcosa di simile (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>

Non posso condividere lo snippet con questo, ma avrai l'idea ...

— DagicCross
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.