Standard Theme: spazio al bottone TweetButton ufficiale di Twitter!

Gioxx’s Wall veste Standard Theme da un paio di mesi circa (qui l’articolo riguardo lo switch) e –tra le diverse funzionalità messe a disposizione nativamente– riporta il pulsante per calcolare il numero di tweet salvati su Twitter per ciascun post pubblicato.

Fino ad oggi si è basato su TweetMeme, una sorta di raccoglitore globale di link in ingresso e uscita dal popolare social network che sta finalmente –anche se lentamente– conquistando anche gli utenti più impensabili. Da un paio di settimane però Twitter ha reso pubblici i nuovi bottoni ufficiali che permettono di fare lo stesso identico procedimento basato sulle API del loro sistema.

Avendo acquistato una licenza regolare di StandardTheme e non avendo accesso al supporto del forum con le novità riguardanti il tema, ho pensato bene di far da me, estirpare TweetMeme e inserire Twitter nei singoli post di questo blog. Vediamo come fare lo stesso dedicando l’articolo principalmente a chi utilizza il mio stesso tema ed in seconda battuta a tutti coloro che possiedono una funzionalità simile!

Se sei (in) Single si vede!

Trattandosi di una funzione che entra in azione nel singolo post letto, è chiaro che bisognerà andare a cercare nel codice di single.php, presente nella cartella principale del tema. Più precisamente bisognerà andare a commentare il codice:

<script type="text/javascript">
 tweetmeme_service = 'bit.ly';
 /* Change this from 'standardtheme' to whatever you'd like! */
 <?php
 if(get_option('stwp_twitter') == '') {
 $tweetmeme_source = 'standardtheme';
 } else {
 $tweetmeme_source = get_option('stwp_twitter').'';
 }
 ?>
 tweetmeme_source = <?php echo '\'' . $tweetmeme_source . '\'' ?>;
 </script>
 <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

e inserire in coda lo script proposto dalla pagina apposita di Twitter:

<a href="http://twitter.com/share" data-count="vertical" data-via="Gioxx">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Dovreste ottenere grosso modo qualcosa di simile (in realtà identico, a meno che non abbiate fatto ulteriori modifiche al file precedentemente):

<div>
 <!--<script type="text/javascript">
 tweetmeme_service = 'bit.ly';
 /* Change this from 'standardtheme' to whatever you'd like! */
 <?php
 //if(get_option('stwp_twitter') == '') {
 //    $tweetmeme_source = 'standardtheme';
 //} else {
 //    $tweetmeme_source = get_option('stwp_twitter').'';
 //}
 ?>
 tweetmeme_source = <?php //echo '\'' . $tweetmeme_source . '\'' ?>;
 </script>
 <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>    -->
 <a href="http://twitter.com/share" data-count="vertical" data-via="Gioxx">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 </div>

Occhio –anche se mi sembra scontato– al fatto che nel codice ci sia il richiamo al mio nome utente su Twitter. Per potervi permettere di capire al meglio il codice ho lasciato tutto invariato rispetto alla mia modifica. Nel vostro caso vi invito a visitare la pagina twitter.com/goodies/tweetbutton per ottenere il codice personalizzato da utilizzare (a patto che abbiate effettuato il login sul sito).

Tutta una questione di stile

Manca solo un piccolo dettaglio prima di poter caricare via FTP i file modificati e godersi il risultato: sarà necessario allargare (anche se di poco) lo spazio a disposizione dei bottoni (Twitter, Facebook, AddThis). Occorrerà andare a ritoccare questa porzione di CSS:

.sharer{ background:#FFF;  border:1px solid #B0B0B0; padding: 5px; margin: 0 0 5px 0; }

Per poterlo fare vi ricordo che StandardTheme carica –con maggiore priorità– il file custom.css contenente le vostre diversificazioni rispetto all’aspetto originale, presente anch’esso nella cartella principale del tema. Modificando questo potrete mantenere le vostre personalizzazioni immutate anche in caso di aggiornamento automatico del tema.

A me è bastato inserire questo piccolo richiamo:

/* Modifica bottoni sharing post - bottone Twitter ufficiale */
.sharer{ background:#FFF;  border:1px solid #B0B0B0; padding: 5px; margin: 0 0 5px 0; width: 55px; }

Quell’ultima costrizione ad allargare il box a 55px permette di ospitare correttamente il nuovo bottone e lasciare un po’ più di spazio a quelli già presenti e lasciati invariati.

Caricate quindi i file appena modificati (single.php, custom.css) e godetevi il risultato :-)