Tutorialdock | Free Web Resources

WordPress: creare una social bar con Google+

| di:

social bar Wordpress: creare una social bar con Google+
Da tempo ormai, molti blog hanno iniziato ad utilizzare il pulsante +1 per rendere la propria pagina più visibile nelle ricerche Google.

L’idea

Come possiamo inserirlo facilmente in tutti gli articoli senza modificare troppo il nostro tema WordPress?

La risposta è semplice: è sufficiente inserire il codice che ci fornisce Google nella pagina single.php di WordPress, ma sorge un altro dubbio:
Io ho già un plugin che mi permette di condividere su facebook, twitter e un’altra decina di social il mio articolo, ma non è ancora stato aggiornato così da avere anche il +1 di Google, come fare?

Qui la risposta è semplice: inserirlo manualmente nel plugin, ma è facile a dirsi e difficile a farsi.

Come fare allora?

Semplicemente, creando un nostro plugin.

Il plugin

La creazione di un plugin del genere è piuttosto semplice, perchè consiste in una semplice funzione php che mostra, nel nostro caso, gli script che permettono la condivisione in Twitter, Facebook, e Google +1.

Iniziamo con la creazione di una pagina php, che chiameremo, con molta fantasia ‘index.php‘ e, all’interno scriveremo, per definire il nome, la descrizione e altre informazioni sul plugin:

/*Plugin Name: Social Bar
Plugin URI:
Description: Description
Version: 0.0.1
Author:
Author URI:
License: http://www.unlicense.org*/

Ora, definiamo la funzione e quello che dovrà fare:

function social_bar(){

	echo '';
}

Non resta che creare i pulsanti di condivisione, semplicemente utilizzando i servizi che offrono i tre social.

Per Twitterhttp://twitter.com/goodies/tweetbutton;
Per Facebookhttps://developers.facebook.com/docs/reference/plugins/like/ (per generare il pulsante facebook, si deve avere un account facebook verificato, altrimenti utilizzate il codice che posto di seguito);
Per Google +1http://www.google.com/intl/it/webmasters/+1/button/index.html

Di seguito il codice che ho utilizzato:

'<div id="social-bar">
	<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=108089942626497&amp;xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="150" show_faces="false" action="like" font="lucida grande"></fb:like>
	<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="tutorialdocks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
	<g:plusone size="small"></g:plusone>
</div>'

Il tutto dovrebbe risultare più o meno così:

/*
Plugin Name: Social Bar
Plugin URI: http://www.tutorialdock.altervista.org
Description: Description
Version: 0.0.1
Author: Apra
Author URI: http://www.tutorialdock.altervista.org
License: http://www.unlicense.org .
*/

function social_bar(){
	
	echo '
	
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=108089942626497&amp;xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="150" show_faces="false" action="like" font="lucida grande"></fb:like> <g:plusone size="small"></g:plusone>
'; }

Per far si che venga visualizzato all’interno di ogni post è sufficiente inserire questo codice nella pagina single.php del vostro tema:

<?php social_bar(); ?>

In questo modo potrete scegliere il suo posizionamento, sia all’interno che all’esterno del loop e, se volete, lo potrete inserire anche nella sidebar o nel footer. Questo plugin, essendo molto semplice, è anche molto elastico, e quindi pronto a ricevere ogni sorta di modifica, aggiungendo dello stile CSS, personalizzando i bottoni o aggiungendone di nuovi.

Tags:


L'Autore

Co-fondatore ha realizzato personalmente il codice su cui si basa Tutorialdock. Ora si occupa di programmazione scrivendo articoli nella categoria tutorial. Sito web dell'autore

Tips: abilitare Airdrop sui mac non supportati ufficialmente