Come Mettere il Mi Piace su WordPress

Pubblicato da Yuri Carlenzoli | 26 luglio 2011

Ecco come mettere senza plugin il pulsante mi piace di Facebook su wordpress e farlo diventare un oggetto sociale grazie al Open Graph protocol.

Come-Inserire-Mi-Piace-Wordpress

Prima che pensiate che sia un argomento scontato come si potrebbe immaginare, dico che inserire il like come spiegherò di seguito vari vantaggi, non utilizzare plugin per wordpress che influirebbero sulle prestazioni che il sito sfrutta dall'hosting o server porta il possibile risparmio del costo dell'hosting, fare codice più possibile valido ed anche utilizzare nel modo adeguato l'Open Graph protocol non è assolutamente scontato, è molto che esiste il "like button" o "pulsante mi piace" ma molti non lo usano correttamente.

Detto questo ora dico che l'implementazione del pulsante "mi piace" per facebook che dirò è pensata per inserire il bottone mi piace di Facebook in tutti i post di un blog wordpress ed in homepage del blog opzionalmente, cominciamo dai singoli post, in pratica, la prima cosa da fare è crearvi da Facebook come volete il bottone mi piace tramite questa pagina, inserite qualsiasi indirizzo internet.

Il codice che dovrete inserire in ogni post del blog però andrà modificato, ovvero andrà cambiato il link di condivisione, quindi, fate il bottone come preferite, e, per identificare meglio il codice da cambiare al posto dell'indirizzo internet scrivete ad esempio "LIKE", identificherete che li dovrete mettere il link, per i post del blog lo modificate in href="<?php the_permalink() ?>", per inserire il bottone nel post del un blog wordpress dovrete inserirlo nel file single.php, precisamente sotto il codice <?php the_content(); ?> all'interno del loop di default praticamente in tutti i template, se volete visualizzarlo sotto il post oppure sopra se lo volete visualizzare sopra.

Ora il bottone like è messo se verrà cliccato però non si creerà la "pagina virtuale" su facebook, ovvero non sarà un elemento sociale facente parte dell'Open Graph protocol, per farlo diventare cominciate a scaricare il file header.php del vostro blog, leggete la pagina che vi ho poco fa linkato e cominciate ad inserire questo xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" nella dichiarazione dell'HTML che segue il DOCTYPE, fin qui però è scontato e non mi piacciono le cose scontate.

Il bottone nella homepage e nelle altre pagine potete metterlo all'inizio della sidebar (file sidebar.php o dove volete.

Ora, visto che molto probabilmente con wordpress avrete un blog, nell'header, prima di </head> e prima degli script incollate quanto segue:

<?php if(is_home()) {
?><meta property="og:type" content="blog" />
<meta property="og:title" content="TITOLO HOME O NOME SITO" />
<meta property="og:url" content="URL HOME PAGE" /><?php
} else {
?><meta property="og:type" content="article" />
<meta property="og:title" content="<?php the_title_attribute( $args ); ?>" />
<meta property="og:url" content="<?php the_permalink() ?>" /><?php
}
?>
<meta property="og:image" content="LINK ALL'IMMAGINE" />
<meta property="og:site_name" content="NOME DEL SITO" />
<meta property="fb:admins" content="VOSTRO CODICE" />

Questi sono i meta necessari per l'Open Graph protocol ma ottimizzati per un blog ed adattati per wordpress, ovviamente dove io ho scritto in maiuscolo dovrete immettere i dati del vostro sito, più che ottimizzati però questi sono negli standard di Facebook, ovvero:

Use article for any URL that represents transient content - such as a news article, blog post, photo, video, etc. Do not use website for this purpose. website and blog are designed to represent an entire site

Le pagine singole o post infatti non devono essere identificate come un un blog ma come un'articolo, e, per trovare il vostro codice di amministrazione andate su Facebook Insight, premete il bottone verde che dice "Insight per il tuo sito web" e se collegherete il sito con voi su facebook dovrete solamente copiare il codice <meta property="fb:admins" content="XXXXXXX" /> presente nella finestra ed incollarlo nell'header del template.

Dico infine che potrebbe essere stata una guida più completa (dettagliata) e me ne dispiaccio per questo comunque c'è tutto, codice e tool di Facebook da utilizzare.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Moderazione dei commenti attiva. Il tuo commento non apparirà immediatamente.