Pulsante di condivisione di Facebook e testo personalizzato [chiuso]


93

C'è un modo per rendere il pulsante di condivisione di Facebook che pubblica testo personalizzato sul muro o sul feed di notizie?


Risposte:


94

Usiamo qualcosa del genere [usa in una riga]:

<a title="send to Facebook" 
  href="http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT"
  target="_blank">
  <span>
    <img width="14" height="14" src="'icons/fb.gif" alt="Facebook" /> Facebook 
  </span>
</a>

4
Sai come aprire questo collegamento in una finestra popup o modale? Non riesco a trovare un metodo che funzioni, non è così semplice come usare un codice generico per finestre popup ...
tvgemert

1
Più efficace quindi la risposta in alto.
Mateng

29
@tvgemert: prova <a class="facebook" target="_blank" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer/sharer.php?u=YOUR_URL">Facebook</a>ecc.
Mateng

Perfetto, funziona anche per gli URL hashbang!
dvtoever

73
Non funziona più.
Chuck Le Butt

30

Per dare parametri personalizzati alla condivisione di Facebook è meglio dare solo il collegamento e Facebook ottiene automaticamente il suo Titolo + Descrizione + Immagine dalla pagina che stai condividendo. Per "aiutare" l'API di Facebook a trovare quelle cose puoi inserire le seguenti cose nell'intestazione della pagina che stai condividendo:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

Controlla qui

Se la pagina non è sotto il tuo controllo, utilizza ciò che AllisonC ha condiviso sopra.

Per il comportamento di tipo modalview popup:

Usa il tuo pulsante / link / testo e poi puoi usare un tipo di popup di visualizzazione modale in questo modo:

<script type= 'text/javascript'>
$('#twitterbtn-link,#facebookbtn-link').click(function(event) {
var width  = 575,
    height = 400,
    left   = ($(window).width()  - width)  / 2,
    top    = ($(window).height() - height) / 2,
    url    = this.href,
    opts   = 'status=1' +
             ',width='  + width  +
             ',height=' + height +
             ',top='    + top    +
             ',left='   + left;

window.open(url, 'twitter', opts);

return false;
});
</script>

dove twitterbtn-link e facebookbtn-link sono entrambi gli ID degli ancoraggi.


Se gli URL sono identici, i dati delle meta proprietà vengono memorizzati nella cache da Facebook? Oppure posso inserire, ad esempio, dati POST individuali con ogni visualizzazione di pagina?
Mateng

Non ho capito cosa intendi con questo.
ShayanK

Mi sono appena imbattuto in questo. Ho un codice Mi piace / condividi sulla mia home page che è impostato per mettere mi piace / condividere la pagina Facebook associata alla mia attività. Sembra che stia ignorando i meta tag di Facebook che ho sulla pagina. Qualcuno ha riscontrato questo problema?
Chris Hawkins

1
Questo metodo sembra non funzionare più. Penso che l'unico modo per ottenere un pulsante di condivisione Facebook personalizzato (con il tuo testo, titolo e immagine) sia utilizzare l'SDK di Facebook.
Ryan Coolwebs

Ottima soluzione, per renderlo anche moderno fai if( window.open(.....) ) event.preventDefault();invece di semplicemente `return false; ˙! - in questo modo impedisce solo il comportamento predefinito (collegamento aperto) quando la finestra è stata aperta - fornisce il fallback quando non era ...
jave.web

12

utilizzare questa funzione derivata dal collegamento fornito da IJas

function openFbPopUp() {
    var fburl = '';
    var fbimgurl = 'http://';
    var fbtitle = 'Your title';
    var fbsummary = "your description";
    var sharerURL = "http://www.facebook.com/sharer/sharer.php?s=100&p[url]=" + encodeURI(fburl) + "&p[images][0]=" + encodeURI(fbimgurl) + "&p[title]=" + encodeURI(fbtitle) + "&p[summary]=" + encodeURI(fbsummary);
    window.open(
      sharerURL,
      'facebook-share-dialog', 
      'width=626,height=436'); 
    return  false;
}

Oppure puoi anche utilizzare l'ultima funzione FB.ui se usi FB JavaScript SDK per una funzione di callback più controllata.

riferimento: FB.ui

    function openFbPopUp() {
        FB.ui(
          {
            method: 'feed',
            name: 'Facebook Dialogs',
            link: 'https://developers.facebook.com/docs/dialogs/',
            picture: 'http://fbrell.com/f8.jpg',
            caption: 'Reference Documentation',
            description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
          },
          function(response) {
            if (response && response.post_id) {
              alert('Post was published.');
            } else {
              alert('Post was not published.');
            }
          }
        );
    }

questo FB.ui è forse l'approccio più affidabile, inoltre puoi caricare questo script in fondo alla pagina con il resto del tuo javascript e caricare le variabili / selettori jquery come valori. Grazie per aver postato questo.
klewis

@blackhawk ... ma FB.ui richiede anche app_id - che non è sempre un'opzione ... :)
jave.web

@ Bravesh B Cercando nella documentazione relativa a FB.ui che hai collegato non sono riuscito a trovare i parametri che passi a FB.ui come immagine, didascalia, descrizione. Potresti dirmi dove li hai trovati?
Ferex


1
A partire dal 18 aprile 2017, i seguenti parametri non sono più supportati dalle versioni 2.9 e successive dell'API Graph. Per le versioni 2.8 e precedenti, i parametri continueranno a funzionare fino al 17 luglio 2017.
Goran Jakovljevic

9

Hai diverse opzioni:

  1. Usa il pulsante di condivisione FB standard e imposta il testo tramite Open Graph API e meta tag sulla tua pagina.
  2. Invece di Condividi, usa FB.ui metodo stream.publish s', che ti permette di controllare l'URL, il titolo, la didascalia, la descrizione e miniature in fase di esecuzione.
  3. Oppure usa http://www.facebook.com/sharer.php con i parametri appropriati.

2
Puoi approfondire quest'ultimo? Quali sono questi parametri?
Jeroen Vannevel

6

È possibile personalizzare la finestra di dialogo di condivisione di Facebook utilizzando l'SDK JavaScript asincrono fornito da Facebook e impostando i valori dei parametri

Dai un'occhiata al seguente codice:

<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: 'URL which you would like to share ',
          picture: ‘URL of the image which is going to appear as thumbnail image in share dialogbox’,
          caption: 'Caption like which appear as title of the dialog box',
          description: 'Small description of the post',
          message: ''
        }
      );
    });
  });
</script>

Prima di copiare e incollare il codice seguente, devi prima inizializzare l'SDK e configurare la libreria jQuery. Fare clic qui per conoscere passo passo come impostare le informazioni sullo stesso.


3

Questa è la soluzione attuale (dicembre 2014) e funziona abbastanza bene. È dotato di

  • apri una finestra popup
  • snippet autonomo, non richiede nient'altro
  • funziona con o senza JS. Se JS è disabilitato, la finestra di condivisione si apre comunque, anche se non come un piccolo popup.

<a onclick="return !window.open(this.href, 'Share on Facebook', 'width=640, height=536')" href="https://www.facebook.com/sharer/sharer.php?u=href=$url&display=popup&ref=plugin" target="_window"><img src='/_img/icons/facebook.png' /></a>

$ url var dovrebbe essere definito come l'URL da condividere.


non funziona nel mio caso in cui la mia pagina inizia con https ...?
d4v1dv00

1
Questa risposta non è valida ora, poiché Facebook ha smesso di supportare altri parametri in Sharer
Vikrant


-2

potresti combinare l'idea di AllisonC con la window.openfunzione: http://www.w3schools.com/jsref/met_win_open.asp

function openWin(url) {
    myWindow = window.open(url, '', 'width=800,height=400');
    myWindow.focus();
}

E poi su ogni link chiami la funzione openWin con il giusto social net url.


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.