Archive - WP Hack RSS Feed

Integrare i commenti di Facebook negli articoli di WordPress

L’essere sempre più sociali porta troppo spesso a abbandonare lidi che un tempo erano decisamente più popolati e più curati, blog in primis. Il tempo che si investiva in questi era maggiore, lo erano anche le visite, i commenti, la partecipazione alla discussione nello stesso luogo comune. Negli ultimi anni però questa tendenza si è sempre più spostata verso i social network, principalmente Facebook per “popolosità” e facilità d’utilizzo.

Per questo motivo oggi voglio spiegarvi come integrare Facebook all’interno dei vostri commenti, affinché questi convivano tra blog e social network, l’ho fatto anche io su Gioxx’s Wall dopo diverso tempo, potete notarlo voi stessi al termine di questo articolo.

Crearsi un’applicazione su Facebook

Stavolta non vi parlerò di un plugin già pronto da scaricare, installare e attivare, sono andato a ritoccare il codice del tema che -rispetto ai componenti aggiuntivi standard- viene aggiornato molto meno spesso, permettendoci quindi di ricordarci che modifiche “trasportare” da una versione all’altra.

Prima di partire con la modifica del codice del proprio blog occorrerà però crearsi un’applicazione Facebook che possa permetterci di costruire un ponte tra le due piattaforme. La piattaforma di sviluppo di Facebook è aperta a tutti e basterà il proprio account per poter cominciare a costruire un’applicazione.

Tutto parte dall’indirizzo developers.facebook.com/apps, dove potrete cominciare a creare una nuova applicazione. Compilate i due campi richiesti immediatamente (Nome Visualizzato e App Namespace) accettando le condizioni poste da Facebook. Occhio all’App Namespace: non potrà contenere lettere maiuscole o spazi. Inserite il codice di sicurezza per poter proseguire.

Specificate ora l’indirizzo del vostro sito / blog all’interno del campo App Domain (esempio: gioxx.org, senza http://) e selezionate una delle voci disponibili sotto “Select how your app integrates with Facebook“, confermando l’URL principale del sito web (esempio: http://gioxx.org, stavolta completo ;-)).

Facebook Developers: Creare una nuova applicazione

Concludere l’operazione attraverso il pulsante Salva modifiche.

Andando ora all’indirizzo developers.facebook.com/apps dovreste poter vedere i dettagli della vostra applicazione, questa vi darà la possibilità di generare i codici dei plugin sociali di Facebook appoggiati alle vostre API, da aggiungere ai vostri siti web. Questa parte si conclude qui ;-)

Plugin sociale di Facebook (Commenti)

All’indirizzo developers.facebook.com/docs/plugins potrete scegliere uno o più tool sociali sviluppati da Facebook per il vostro sito. Tra questi c’è quello dedicato ai commenti (developers.facebook.com/docs/reference/plugins/comments). Compilate il campo URL (con l’indirizzo completo del vostro blog / sito), il numero di commenti massimi da mostrare, la larghezza del box e il set di colori predefinito.

L’anteprima live si caricherà mostrandovi il risultato, facendo clic sul pulsante “Get Code” sarà possibile ottenere il codice da modificare e incollare all’interno del vostro blog.

Cosa modificare in WordPress

ATTENZIONE: Prima di eseguire qualsiasi modifica ai vostri file e/o dispositivi siete pregati di effettuare un backup di questi. Solo così sarete capaci di tornare indietro ponendo rimedio ad eventuali errori di distrazione. L’articolo e l’autore non possono essere ritenuti responsabili di alcun danno subito dalla vostra strumentazione. Buon lavoro.

L’avviso appena letto è d’obbligo, soprattutto per coloro che hanno meno confidenza con il codice, se pensate che andare a modificare un file PHP del proprio WordPress non sia semplice, provate ad utilizzare un plugin che possa automatizzare le operazioni appena compiute e quelle che andrò a spiegare qui di seguito ;-)

Per integrare il codice all’interno dei commenti del vostro WordPress, sarà necessario andare a ritoccare il file comments.php contenuto all’interno della cartella del tema che state utilizzando, è quindi per me impossibile darvi il numero di riga esatto dove andare a incollare il codice, semplicemente -con un minimo di ragionamento logico- dovreste poter individuare il div che carica i commenti e il box libero per inserirne uno nuovo.

Modificando Standard Theme 2 ho preferito inserire i commenti di Facebook prima dei commenti lasciati fisicamente sul blog (spostando ciò che cominciava a riga 13 e inserendo il codice qui di seguito):


<!-- Hack: Facebook Comments Gioxx 02/02/2012 -->
<div id="comments">
<h2 style="padding-bottom: 8px;">I commenti da Facebook</h2>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1&appId=***************";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div data-href="<?php echo get_permalink($post->ID); ?>" data-num-posts="75" data-width="570"></div>
</div>
<!-- eof modifica -->

Gli asterischi occupano lo spazio del vostro token privato (generato insieme all’applicazione creata precedentemente). Ciò che andrà ulteriormente modificato è l’URL del blog, inserendo:


<?php echo get_permalink($post->ID); ?>

che sostituirà dinamicamente l’URL dato in pasto al plugin sociale di Facebook con l’indirizzo completo del post che l’utente sta visualizzando (e che potrebbe quindi commentare).

Il risultato? Presto detto, date un’occhiata proprio sotto questo articolo (ovviamente non funzionerà via RSS) :-)

Buon lavoro!

Jetpack: modificare il comportamento dello sharing su Twitter e Buffer

Venerdì scorso Donato mi ha chiesto se era possibile modificare il comportamento del bottone Twitter su Jetpack, un plugin nato per fungere da coltellino svizzero per le installazioni self-hosted di WordPress, come Gioxx’s Wall o -appunto- il blog di “Markingegno“. Avrò modo di parlare più approfonditamente di Jetpack in futuro, quello di oggi è un articolo relativamente breve che vi spiega dove mettere mano affinché anche voi possiate godere di Tweet come questo: https://twitter.com/#!/Gioxx/status/160280437762179072, che include “via @NOMEUTENTE” contrariamente a quanto previsto di default dal bottone di Twitter “fornito di serie” con Jetpack.

La modifica è davvero semplice e riguarda un solo file del plugin, da modificare manualmente, facendo attenzione a ricordarsi di ripristinare la modifica ogni qual volta Automattic deciderà di rilasciare una nuova versione del loro software.

Navigate il vostro spazio FTP fino a /wp-content/plugins/jetpack/modules/sharedaddy/ e aprite in modifica il file “sharing-sources.php“. A questo punto basterà scorrere il file fino alla riga 262:


return '<div><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url=' . rawurlencode( apply_filters( 'sharing_permalink', get_permalink( $post->ID ), $post->ID, $this->id ) ) . '&amp;counturl=' . rawurlencode( str_replace( 'https://', 'http://', get_permalink( $post->ID ) ) ) . '&amp;count=horizontal&amp;text=' . rawurlencode( apply_filters( 'sharing_post_title', $post->post_title, $post->ID, $this->id ) ) . ' :  " style="width:97px; height:20px;"></iframe></div>';

Per poi “iniettare” la semplice modifica tra il titolo del vostro articolo e il collegamento diretto:


return '<div><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url=' . rawurlencode( apply_filters( 'sharing_permalink', get_permalink( $post->ID ), $post->ID, $this->id ) ) . '&amp;counturl=' . rawurlencode( str_replace( 'https://', 'http://', get_permalink( $post->ID ) ) ) . '&amp;count=horizontal&amp;text=' . rawurlencode( apply_filters( 'sharing_post_title', $post->post_title, $post->ID, $this->id ) ) . ' via @gioxx: " style="width:97px; height:20px;"></iframe></div>';

Qui il particolare della modifica:

' via @gioxx: " style="width:97px; height:20px;"

E Buffer?

La richiesta di stamattina invece consisteva nell’integrare Buffer, ancora non presente su Jetpack, attualmente “non previsto” anche secondo il blog ufficiale del progetto. Fortunatamente Automattic ha previsto la possibilità di inserire servizi non integrati nativamente, attraverso il semplice passaggio di dati consentito dalla maggior parte dei servizi in stile Buffer.

Per l’appunto, l’URL del servizio accetta questo tipo di sintassi:

http://bufferapp.com/add?url=URL-ARTICOLO&text=TITOLO-ARTICOLO&via=@UTENTE-TWITTER

che tradotto in Jetpack diventa:

http://bufferapp.com/add?url=%post_url%&text=%post_title%&via=@gioxx

Poiché il plugin accetta alcune variabili che permettono di selezionare rapidamente ciò che ci serve: %post_title%, %post_url%, %post_full_url%, %post_excerpt%, %post_full_url%, %post_tags%. Si, tornando a pensare a Twitter, potreste anche aggiungere i post tags così da renderli hashtag del vostro cinguettio.

Nel caso di Buffer, non c’è bisogno di modificare il codice sorgente del plugin come fatto precedentemente, in quanto -come già detto- non ancora previsto dal plugin. Basterà semplicemente agire dal pannello di controllo del servizio di Sharing presente nel menu Jetpack della vostra Dashboard.

Buon divertimento :-)

Efficient Related Posts: darlo in pasto al proprio CSS

Avevo letto di Efficient Related Posts qualche tempo fa su uno dei tanti blog che seguo via Google Reader, motivo per il quale mi ero deciso ad installarlo su questo WordPress, notando però l’impossibilità di farlo digerire al file CSS del tema, o almeno non nativamente. Ho deciso quindi di effettuare una piccola modifica all’interno del file PHP principale del plugin per includerlo in un DIV controllato -appunto- dal CSS custom di Standard Theme, installato su questo blog.

Il plugin va a posizionare un elenco puntato a fine di ciascun articolo e -una volta attivo- questo screenshot dovrebbe assomigliare molto a ciò che vi si presenterà davanti:

Efficient Related Posts - Visualizzazione senza modifiche al CSS

Questo è ciò che ho voluto fare io. Inutile dire che potrete modificare questo codice a vostro piacimento, magari rispettando altre modifiche operate sullo stesso WordPress precedentemente. Il CSS “intercetta” il DIV chiamato “boxcorrelati” e lo presenta così:


/* BOX ARTICOLI CORRELATI NEI POST */
.boxcorrelati {
background:transparent url(images/correlati.png) no-repeat scroll right top;
border:1px solid;
border-color:000000;
margin:8px 0;
padding: 4px 6px 2px;
font-family: Tahoma, sans-serif;
font-size: 1em;
width:550px;
min-height: 120px;
}

Per poter completare l’opera, occorrerà però andare a ritoccare il file “efficient-related-posts.php” che si trova nella cartella del plugin.

Alla riga 317 (faccio riferimento all’attuale versione 0.3.8) dovreste trovare:


$output = "<ul class='related_post'>{$output}</ul>";

seguita poi dalla 320 che riporta:


$output = "<h3 class='related_post_title'>{$settings['title']}</h3>{$output}";

Per poter caricare il DIV dichiarato nel file CSS, basterà modificare di poco le due stringhe, ottenendo quindi:


$output = "<ul class='related_post'>{$output}</ul></div>";

per la riga 317, seguita poi dalla 320 con:


$output = "<div class='boxcorrelati'><h3 class='related_post_title'>{$settings['title']}</h3>{$output}";

Salvate ora i file e caricateli nel vostro spazio FTP sostituendo quelli già presenti. Con un F5 sulla pagina dovreste riuscire a godervi il risultato, simile (seguendo i miei stessi passaggi) a questo scatto:

Efficient Related Posts - Visualizzazione con modifiche fatte al CSS

Buon lavoro :)

Standard Theme: box di ricerca e foto su Flickr in italiano

Un nuovo brevissimo articolo riguardante Standard Theme (il tema grafico di questo blog) e l’utilizzo di widget inclusi nell’installazione standard del tema, in particolare quello di ricerca e di pubblicazione delle ultime fotografie pubblicate sul proprio account Flickr.

In un’installazione lasciata in inglese (per scelta, senza nulla togliere al fantastico lavoro di WordPress Italia) anche i widget verranno proposti automaticamente nella stessa lingua. Dato che potreste mostrare al pubblico una sidebar in lingua nostrana, ha sicuramente senso tradurre “al volo” le due righe che regolano il titolo dei widget presi in esame ;)

Mano al file!

Entrambi i widget vengono dichiarati all’interno del file “functions.php“, a sua volta all’interno della cartella del tema.

Il listato di codice che permette la creazione del widget con il box di ricerca comincia alla riga 1153 e termina alla 1164. La stringa che determina il titolo dello stesso si trova alla riga 1156:


		<h3><?php _e('Search'); ?></h3>

Ovviamente al posto di “Search” andrà inserito un semplice “Cerca“.

Il secondo listato di codice che invece permette la creazione del widget che espone le ultime fotografie pubblicate sul proprio account Flickr, comincia alla riga 1041 e termina alla 1053 (senza considerare la parte di amministrazione). La stringa che determina il titolo dello stesso si trova alla riga 1049:


	<h3 class="widget_title"><?php _e('Photos on <span>flick<span>r</span></span>', 'stwpthemes') ?></h3>

Anche in questo caso basterà cambiare “Photos on” con un altrettanto semplice “Foto su“.

A questo punto sarà sufficiente salvare il file e caricarlo sul vostro spazio FTP confermando la sostituzione del vecchio file già presente. Un F5 sulla pagina per aggiornare e godetevi il risultato.

Buon lavoro :)

P.S. Inutile dire che lo stesso ragionamento vale per gli AdBox e gli altri widget rapidi dichiarati dal tema, vero? ;)

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 :-)

Page 1 of 41234»