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.