Archive - WP Hack RSS Feed

Jetpack: modifica del comportamento Twitter anche con i nuovi pulsanti

Wp HackAvevo già parlato di modifica al funzionamento di Jetpack per l’integrazione del proprio utente Twitter (qui il primo articolo, qui quello riguardante l’aggiornamento), lo avevo però fatto per chi utilizza i pulsanti tradizionali e non quelli “nuovi” proposti dal team di WordPress.com. Una semplice aggiunta di username ad una funzione specifica farà funzionare il trucco anche con i pulsanti differenti.

Ancora una volta il file da modificare è lo sharing-sources.php contenuto nella cartella /wp-content/plugins/jetpack/modules/sharedaddy/. Con l’attuale versione la funzione da modificare comincia alla riga 333. Si passa quindi dal codice originale privo di username (notare gli apici senza contenuto dopo “jetpack_sharing_twitter_via“:


function sharing_twitter_via( $post ) {
// Allow themes to customize the via
return apply_filters( 'jetpack_sharing_twitter_via', '', $post->ID );
}

a quello che lo include permettendo così di far comparire il “via @nomeutente“:


function sharing_twitter_via( $post ) {
// Allow themes to customize the via
return apply_filters( 'jetpack_sharing_twitter_via', 'gioxx', $post->ID );
}

Ancora una volta si parla di codice “modificato a mano” che verrà quindi sovrascritto da una nuova versione di Jetpack, dovrete perciò ripetere il trucco anche in futuro fino a quando WordPress non consentirà di specificare l’utente Twitter nella pagina profilo personale includendolo così di default.

Buona condivisione :-)

Jetpack: nuova versione, modifica del comportamento Twitter

Attenzione
Questo articolo è un aggiornamento dell’originale “Jetpack: modificare il comportamento dello sharing su Twitter e Buffer” disponibile all’indirizzo gioxx.org/2012/01/24/jetpack-twitter-buffer. Nel caso in cui ve lo foste perso vi consiglio di dargli un’occhiata!

Automattic ha rilasciato un aggiornamento per Jetpack (arrivato alla versione 1.6.1) che introduce un restyling dei pulsanti per la condivisione dei contenuti sui principali social network.

Questo aggiornamento sembra però andare ad inibire la possibilità di inserire il più classico dei “via @utentetwitter” a fondo messaggio, non del tutto vero proprio perché i pulsanti vengono sostituiti (di default) con quelli proposti dalla società di Mullenweg.

Ciò vuol dire che il trucco resta sempre lo stesso e la modifica nel codice andrà operata nello stesso file di sempre così come il paragrafo.

Ciò che andrà ritoccato oltre il dovuto è nello stesso pannello di controllo di Jetpack, nella voce di configurazione dello Sharing, dove occorrerà andare a ripristinare l’utilizzo dei pulsanti originali che utilizzeranno quindi il vostro codice modificato. Con l’occasione potrete inserire il nuovo pulsante di Pinterest integrato in questa release visto il suo successo:

Jetpack: Official Sharing Buttons

Salvando la modifica apportata vedrete ricomparire i vecchi pulsanti e il trucco del “via @utentetwitter” tornerà a funzionare correttamente.

Enjoy.

WordPress: effettuare il backup automatico su Google Drive

Su segnalazione del buon Tambu vi propongo test, passaggi e localizzazione dell’articolo originale comparso su WPMU ieri. Scopriamo insieme come effettuare un backup automatico del vostro WordPress utilizzando direttamente Google Drive :-)

Per effettuare i test ho utilizzato un’installazione “dev” (dedicata ai miei esperimenti, ndr) di WordPress 3.4.1 completamente aggiornata, in inglese.

Tutte le immagini contenute in questo articolo sono più grandi, potete fare clic su ciascuna per aprirla a dimensione reale.

Installazione del plugin

Dalla vostra schermata Plugin, cercate ed installate “Google Drive for WordPress” (attualmente alla versione 1.0):

WordPress: Installazione “Google Drive for WordPress”

Attivazione e accesso OAuth di Google

All’attivazione vi verranno richiesti due valori (ID e Secret Key) relativi alle API di Google da utilizzare per interfacciare i due ambienti. Potete registrare un accesso API dedicato al backup gratuitamente, basterà visitare il sito web code.google.com/apis/console.

Partite quindi creando un nuovo progetto:

Google API Console: Creazione nuovo progetto

e selezionate la voce “API Access” dalla colonna di sinistra per iniziare a creare un accesso OAuth, io ho volutamente impostato il mio ambiente Google in inglese, le voci in italiano non dovrebbero poi differire di molto:

Google API Console: Creazione accesso OAuth 2.0

A questo punto basterà compilare i campi relativi al nome del prodotto (va bene un semplice “Backup Blog” o simile) e -se volete- un logo personalizzato:

OAuth: Create Client ID

Facendo clic su Next arriverete alla seconda schermata, dove inizialmente basterà specificare l’URL del blog che farà accesso al servizio nel campo “Your site or hostname“:

OAuth: Client ID Settings

per poi fare clic su “more options” e specificare nel campo “Authorized Redirect URIs” la stringa completa dichiarata nel plugin, che sarà sempre “http://URLBLOG/wp-admin/admin.php?page=configure_google&action=auth” (inutile dire che dovete andare a ritoccare URLBLOG con il vostro indirizzo, vero?):

OAuth: More Settings su Client ID Settings

Con “Create Client ID” confermerete il tutto e la parte relativa all’accesso OAuth di Google sarà così terminata.

Ready to Start

A questo punto vi basterà andare a copiare Client ID e Client secret dalla schermata di Google ottenuta:

Google API Console: dati di connessione

all’interno dei rispettivi campi WordPress:

WordPress: compilazione campi ID e chiave segreta

e confermare con “Allow Access” per visualizzare la richiesta di autenticazione a Google, alla quale ovviamente risponderete confermandola.

Google Auth: richiesta accesso applicazione

Avete appena collegato il vostro WordPress al Google Drive personale!

Configurazione del Backup

Ora che i due sistemi sono collegati tra di loro potete procedere con la personalizzazione e schedulazione del backup. Dalla voce “Backup Settings” è possibile modificare le impostazioni di salvataggio escludendo file, scegliendo di tenere sotto backup anche il database SQL e schedulando il backup automatico ad intervalli di tempi da voi stabiliti:

WordPress: impostazione backup su Google Drive

Con un clic su Save terminerete anche questo passaggio, non dovete fare altro che godervi il risultato facendo clic sulla voce “Backup” della colonna sinistra quindi un ulteriore clic sul pulsante dalla stessa voce nel pannello di destra:

WordPress: forzare un backup dei dati su Google Drive

Cosa vedrete su Google Drive? Presto detto:

Google Drive: file ZIP di backup

Il file ZIP è direttamente “esplorabile” da Drive, nel caso in cui aveste necessità di estrarre solo parte del contenuto ;-)

Google Drive: navigazione nel file ZIP di backup

Se qualcosa non vi è chiaro l’area commenti è -come sempre- a vostra totale disposizione.

Buon lavoro!

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

Page 1 of 41234»