Facebook Like, Google +1 e Twitter nei post di WordPress

Siccome i social network hanno un grande impatto nelle visite ai blog, è importante avere dei pulsanti di condivisione per ciascuno di essi, in modo che i post abbiano la massima visibilità possibile. Per questo motivo, oggi condivido il codice della barra di condivisione che compare prima del contenuto dei post su questo blog e che ho inserito nell’ultimo aggiornamento del tema Daily Food.

Aggiornamento (07/09/2011): il codice è stato integrato nel nuovo plugin WordPress Social Ring.

[banner336]

Come prima cosa, seguendo quanto scritto nel post relativo a Google +1, si deve inserire prima della chiusura del tag body il codice javascript di Google oltre al codice di Facebook. Per questo motivo si deve aggiungere un’azione in corrispondenza della chiamata wp-footer, che viene utilizzata da tutti i plugin che necessitano di aggiungere del codice in fondo alla pagina.

function add_google_fb_api() {
  if(is_single() || is_page()) {
  ?>
    <script type='text/javascript' src='https://apis.google.com/js/plusone.js'>
    </script>
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
  <?php
  }
}
add_action('wp_footer', 'add_google_fb_api');

A questo punto dobbiamo aggiungere il codice necessario a modificare il contenuto del post. Per farlo si deve aggiungere un filtro in corrispondenza del contenuto del post, utilizzando la seguente chiamata:

add_filter('the_content', 'add_social_sharing');

In questo modo si dice a WordPress di richiamare la funzione add_social_sharing ogni volta che il contenuto di un post viene visualizzato. Vediamo ora come è composta tale funzione:

function add_social_sharing($content) {
    if(is_single()) {

Questo controllo serve a stampare il codice solamente se la pagina visitata è un singolo post. Mentre il codice qui sotto serve a mostrare il pulsante Facebook like con di fianco il numero di like ottenuti:

$facebook = '<div style="float:left;">';
$url = get_permalink(get_the_ID());
$facebook .= '<fb:like href="'.$url.'" send="true" layout="button_count" ';
$facebook .= 'width="120" show_faces="false" font=""></fb:like></div>';

Il prossimo passo è aggiungere il pulsante di twitter:

$twitter = '<div style="float:left;">';
$twitter .= '<a href="http://twitter.com/share" data-count="horizontal" ';
$twitter .= 'data-lang="it">Tweet</a><script type="text/javascript" ';
$twitter .= 'src="http://platform.twitter.com/widgets.js">';
$twitter .= '</script></div>';

E infine il pulsante di Google:

$google = '<div style="float:left;">';
$google .= '<g:plusone size="medium" href="'
$google .= get_permalink(get_the_ID()).'"></g:plusone>';
$google .= '</div>';

A questo punto uniamo il tutto, aggiungendo un div con del margine che separi i pulsanti dal titolo e dal contenuto del post. Siccome i pulsanti sono affiancati mediante l’uso della direttiva CSS float:left, inseriamo anche un div con clear:both per evitare che gli elementi successivi (il testo del post) finiscano a destra dei pulsanti.

$html = '<div style="margin: 4px 0 10px 0;">';
$html .= $facebook.$twitter.$google;
$html .= '<div style="clear:both" ></div></div>';

Infine chiudiamo le varie parentesi graffe e inseriamo il codice prima del contenuto:

    $content = $html.$content;
  }
  return $content;
}
Precedente Aggiungere il pulsante Google +1 a WordPress Successivo WordPress 3.1.4 aggiornamento di sicurezza
  • Fabio Cruciani

    …altrimenti c’è anche il plugin “Tweet, Like, Google +1 and Share”! Lo sto provando e sembra funzionare abbastanza bene! 😉

    • Ormai questi “pulsantini” spopolano. Nemmeno il blog che gestisco ha saputo resistere al loro fascino.

  • ahhhhhh io ho il daily food e non finirò mai di ringraziarti per averlo reso disponibile, mi trovo magnificamente bene! Come faccio ad avere l’ultima versione? basta che lo carico di nuovo?

    • basta cancellarlo e reinstallarlo, ma devi aspettare che venga resa disponibile su AlterVista. Prima delle ferie aggiungeremo nuovi temi e aggiorniamo anche questo.

  • Il plugin sembra dare problemi con la visualizzazione della barra di amministrazione di WordPress. Inoltre lo stesso problema lo da anche il plugin “Altervisa Mobile”.

    • Il problema di AlterVista Mobile verrà risolto con il prossimo aggiornamento a WordPress 3.2, che è quasi pronto.

      Per quanto riguarda il plugin dell’articolo, non ho visto alcun problema con l’admin bar. A cosa ti riferisci?

  • Mi riferisco proprio all’admin bar. infatti ho notato che attivando questo plugin delle volte sparisce, mentre altre no.

    • L’ho testato più volte ma non ho mai avuto problemi con l’admin bar. Per capire meglio, in che senso a volte sparisce, altre no? a seconda della pagina che visiti? la vedi nella home, ma non nei post?

  • Allora, prima ho letto questo post e visto il tuo plugin e così ho pensato di provarlo. E fin qua tutto ok. Installo il plugin e infine lo attivo. Vado alla home page del mio blog per verificare il corretto funzionamento del plugin, quando noto che l’admin bar è sparita. Dopo di che, ho provato a disattivare il plugin e il tutto è tornato visibile.

    • Ho fatto più prove con Versioni di WordPress dalla 3.1.2 alla 3.2 e non ho riscontrato questo problema, l’admin bar si vede sempre correttamente. Inoltre nel codice non c’è nulla che possa entrare in conflitto… Sei sicuro che non sia dovuto ad AV Mobile?

  • No, perchè attualmente ho quel plugin disattivato … quindi non saprei.

    Comunque, c’è un modo per visualizzare questo plugin alla fine di un contenuto di un post, anzi che prima del post?

    Grazie.

    • A breve su AlterVista arriverà il nuovo AlterVista Optimizer che integrerà questo plugin con un apposito pannello di amministrazione per scegliere il posizionamento. Nel frattempo puoi andare su Plugin->Editor, scegliere Social Share e modificare più o meno verso metà
      $content = $html.$content;
      in
      $content = $content.$html;

  • Perfetto, grazie.

  • HO installato il plugin su un blog wordpress ma il pulsante like di facebook non funziona mentre il pulsante send mi restituisce questo errore: “we encountered the following error when sending your message: Argument 1 passed to externalnodefetcher::needsUpdate()must be an instance of entopengraphobject, null given.
    Prima di installare il plugin ho provato a scrivere il codice e ad installare i pulsanti manualmente con gli stessi problemi.
    Qualche soluzione?
    Grazie

    • In questi giorni Facebook è un disastro. A me i like funzionano a singhiozzo: a volte viene chiesta la conferma, altre volte clicco e non succede nulla, altre volte ancora viene fuori un messaggio di errore sconosciuto. Sembra essere una situazione abbastanza generalizzata, spero solo che risolvano in fretta…

  • Ho disinstallato il plugin e scritto il codce direttamente sul file single.php e ora sembra funzionare.

    L’unica cosa è che prende una foto a caso e non l’immagine in evidenza del post.
    Anche io ho riscontrato problemi con facebook. speriamo risolvano in fretta.

    Grazie e buona serata

    • Ma infatti non ha senso che il codice fuori dal plugin funzioni… è una disgrazia, si vede che stanno effettuando qualche aggiornamento lato Facebook.

      Per l’immagine puoi usare WordPress SEO by Yoast. Nella sezione SEO->Indexation ti consente di aggiungere i meta tag di facebook nell’head dell’html, in modo da indicare la foto ed il testo giusti al like.

  • Ok proverò così. Vi tengo informati
    Grazie per ora

  • Nulla da fare. Ho installato WP Seo ho configurato i metatag di facebook ma se clicco mi piace l’immagine viene pescata a caso.

    • Ho dato un’occhiata al tuo sito e nei meta di facebook c’è l’immagine corretta. Non sono riuscito a fare un like sul primo articolo: dopo una frazione di secondo mi veniva annullato (!!!), mentre sul secondo articolo effettivamente ha preso l’immagine errata. Al momento direi che Facebook ha grossi problemi e conviene aspettare qualche giorno che la situazione si stabilizzi, altrimenti non si riesce a capire dove stia il problema…

  • Bah!! tutto molto strano. Aspetterò. Non vorrei che fosse un problema legato a wordpress. Ho lo stesso pulsante su un sito con joomla e virtuemart e prende l’immagine corretta. E non ci sono nemmeno i metatag di fb! Anche se su alcuni prodotti il like non funziona come è successo a te.
    Comunque grazie per il supporto.

  • nuala

    ciao,
    ho installato il plugin ma se io volessi le iconcine di condivisione sono nel dettaglio articolo e NON anche nel template category ?
    Esempio: http://www.digitalrelations.it/category/fashion/
    in questa pagina io non vorrei i bottoni dei social networks… come faccio?

    grazie mille

  • Ciao, ho installato il tuo plugin ma non riesco a far comparire i pulsanti dopo il contenuto del post e non subito all’inizio. Riesci a spiegarmi come fare?

    Grazie!

    • puoi andare su Plugin->Editor, scegliere Social Share e modificare più o meno verso metà
      $content = $html.$content;
      in
      $content = $content.$html;
      Visto il successo, mi sa che prossimamente aggiungerò un pannello di controllo per modificare facilmente il posizionamento…

  • Complimenti Niccolò, davvero un buon plugin semplice ed efficace. Confermo che dovresti dare la possibilità di inserire il plugin non solo all’inizio degli articoli ma anche alla fine, dopo il contenuto.

    Inoltre mostra il bottone “Like” anzichè il “Mi Piace” e non ho visto nel .php opzioni per modificare la lingua (le prende in automatico)?

    Se poi posso far notare ancora qualcosa, lascia uno spazio vuoto dopo il like (che sarebbe per lo share, che viene mostrato, se non sbaglio, solo dopo che uno clicca su “like”), meglio se venisse mostrato da subito.

    Uno dei plugin migliori comunque per inserire al meglio la condivisione su wordpress 😉

    Buon lavoro =)

    • La lingua viene presa in automatico da Facebook, infatti non c’è modo di passargliela. Nei prossimi giorni dovrei riuscire a concludere una parte del lavoro sul pannello di amminstrazione e ci saranno nuove opzioni per il posizionamento.

      Lo spazio dopo il like dovrebbe essere occupato dal bottone send. Non capisco però per quale motivo in alcuni casi non venga visualizzato. Cercherò di approfondire…

  • Ciao, abbiamo installato il tuo plugin, che è ottimo. Una sola domanda: nelle pagine single.php compare anche un pulsante Send che vorremmo togliere e c’è Like invece di “Mi piace”… ci puoi dar euna mano?
    Grazie!

    • Sto terminando il plugin con pannello di amministrazione che consentirà di effettuare queste personalizzazioni. Questione di giorni e lo rendo disponibile. Iscriviti al feed per restare aggiornato!

  • ziion

    Ciao Niccolò. Ho provato il tuo plug-in, però per il pulsante mi piace, occorre cliccare due volte per vederlo sulla propria bacheca. Ho visto che alcuni blog, invece hanno un pulsante “mi piace” diverso, che con un clik condivide già il post. Confido in un tuo aiuto. Grazie Paolo

    • Fosse un problema del plugin l’avrei già corretto. Il problema è di Facebook e sul forum di AlterVista trovi lunghe discussioni a riguardo.

  • Ciao Noccolò. Il tuo plugin mi ha molto incuriosito pero, pur comparendo tutti i pulsanti correttamente nei vari post, sulle varie Pagine compare solo il pulzante di facebook (share). Il tema che utilizzo è fastfood. Come risolvere il problema? Monkey

    • Hai controllato se nel footer del tema c’è la chiamata a wp_footer?

  • Si, verso la fine di footer.php c’è il seguente:

    Hai qualche idea per correggere il problema.

    Nel mio blog parlo di plugin e dopo averli provati li consiglio ai miei utenti….il tuo è MOLTO INTERESSANTE se riesco a risolvere il problema posso scrivere un articolo esaustivo.

    Monley

    • Avrei però bisogno che lo lasciassi attivo sul tuo blog così più tardi do un’occhiata, altrimenti non riesco a capire quale sia il problema. Sicuramente non vanno usati più plugin dil like/+1/retweet contemporaneamente, altrimenti si rischiano incompatibilità.

      Al momento c’è un problema noto che devo sistemare nella prossima versione, ma non è quella la causa.

  • xzed_netclick

    Ciao,

    ho installato il plugin sul mio sito e funziona alla perfezione.Solo che se inserisco i pulsanti nella homepage sotto il titolo di ogni articolo, il +1 condivide la pagina e non l’articolo, mentre fb e twitter funzionano bene.Se non sbaglio basterebbe inserire nel pulsante +1 il campo “href: ma non si può fare tramite le opzioni.Puoi dirmi come fare o aggiustare il plugin?

  • Infatti, anche a me pubblicizza il sito, cioè, la home e non l’articolo..inoltre il counter di Twitter mi rimane sempre a 0

  • anarcomarco

    xzed_netclick credo di aver capito l’origine del problema.

    In pratica a me il problema capitava quando volevo condividere i post dai pulsanti presenti nel post e dalla home page, ovvero dalla schermata principale del blog.

    andando nelle configurazioni del plugin dove c’è scritto “Mostra su” togli Home e metti la spunta solo a Post, in questa maniera i bottoni social inerenti all’articolo si vedranno solo nell’articolo e non nella home page (inoltre se si lascia l’opzione Home e ci sono 5 o più post nella home del sito verranno caricati molti bottoni tanti quanti gli articoli appesantendo di conseguenza la paginetta)

    Se ti rechi nella paginetta dedicata all’articolo e premi un bottone viene condiviso l’articolo…evidentemente ci sarà un bug perchè è strano che dalla home premendo i pulsanti nell’articolo viene pubblicizzata la home e non l’articolo (correggimi se sbaglio Niccolò)