37 Commenti
Quello che voglio condividere con voi oggi è un trucchetto facile, ma molto utile, che sicuramente pochi di voi conoscono ed utilizzano.
Provate a condividere questo post su Facebook, pubblicandolo tramite la vostra bacheca oppure cliccando sull’icona di Facebook appena sotto l’articolo. Cosa notate? Vi si aprirà la finestra per condividerlo ma, a differenza di altri blog, non potrete scegliere l’immagine di anteprima per la pagina, perchè l’avrò scelta io per voi!
Sì, perchè solitamente potete cliccare sulle frecce e scorrere tutte le immagini presenti nella pagina, fino a scegliere quella più significativa. Nel mio caso, invece, vi si presenta una sola immagine.
Sicuramente così è molto meglio: già l’utente medio è pigro e sarà un grande sforzo per lui solamente decidere di pubblicare il vostro articolo sulla sua bacheca. Se poi deve anche mettersi a scegliere l’immagine migliore, siamo a posto…
Come ho fatto? Vediamolo insieme.
Dovete sapere che esiste un particolare tag HTML che permette di associare alla pagina un’immagine di anteprima. Si tratta del codice seguente che dovrete inserire all’interno dei tag <head></head> della vostra pagina:
Ovviamente va sostituito il percorso con quello dell’immagine rappresentativa dell’articolo.
Dato che non possiamo certo farlo a mano ogni volta, abbiamo bisogno di uno script che trovi automaticamente l’immagine più rappresentativa dell’articolo e la inserisca nel tag. Niente di più semplice: copiate e incollate questo codice nel file functions.php del vostro tema WordPress:
global $post;
$image = str_img_src($post->post_content);
if($image != ""){
echo '<link rel="image_src" href="'. $image . '" />' . "\n";
}
}
add_action('wp_head', 'set_default_image');
function str_img_src($html) {
if (strpos($html, '<img') !== false) {
$imgsrc_regex = '#<\s*img [^\>]*src\s*=\s*(["\'])(.*?)\1#im';
preg_match($imgsrc_regex, $html, $matches);
unset($imgsrc_regex);
unset($html);
if (is_array($matches) && !empty($matches)) {
return $matches[2];
} else {
return false;
}
} else {
return false;
}
}
La prima funzione inserisce nell’head del post corrente il tag con l’immagine, mentre la seconda funzione è quella che si occupa di andare a cercare nel testo la prima immagine che trova.
In questo modo, quando condivideremo il post su Facebook, verrà impostata come anteprima la prima immagine presente nel nostro articolo. Tutto questo in automatico!
Da notare che, oltre a Facebook, questo tag funziona anche su Digg e su Yahoo!.
Tre ottimi motivi per implementarlo!
Ottimo script! Ma così mi hai stuzzicato a chiederti anche un’altra cosa….
E se io volessi condividere un filmato?
Mi piacerebbe che ci fosse la stessa user-experience di quando da YouTube condividi un filmato su Facebook. In modo che poi sul proprio profilo FB un utente possa aprire il filmato direttamente da FB. Mi sono spiegato?
Per condividere video, devi utilizzare l’apposito attributo “video_src”.
Vai a questa pagina e clicca su “Come posso esser certo che Condividi su Facebook funzioni?”. C’è spiegato tutto.
WOW!
a buon rendere!!!!
Che dire. GRAZIE e se mai riuscirò a diventare un buon programmatore….
Di niente. Buon divertimento!
Bravo Ghido,
questi sono piccoli accorgimenti ma di grande utilità
Grazie, Ema
Sei pura mitologia e non so come ringraziarti!
Ehehe, esagerato!
ciao e complimenti per questo accorgimento … molto interessante.
ho un problema quando condivido link su facebook. qualsiasi cosa io condivida, non mi mostra le immagini ed è frustrante per me! sai come mai? prova un po con il mio sito se riesci a condividere e a mostrare le immagini …
grazie.
Ho visto… in effetti non vanno. Ma stai sicuro che se segui le indicazioni del mio post si sitemerà tutto
Prova e fammi sapere.
… ok proverò … anche se non penso il problema sia questo.
Dipende molto dal feed …
Grazie.
Veramente il feed non c’entra nulla con questo, te lo assicuro.
invece ti assicuro che il problema è proprio nel feed.
Interessante. Conoscevo il tag , ma non ho mai pensato di utilizzarlo
Comunque non ho capito una cosa, non avendo ancora provato.
Con questo metodo vincolo la scelta ad una sola immagine, o se nella pagina ci sono più immagini, l’utente ha comunque modo di selezionarne altre, dopo quella proposta?
In alcuni casi potrebbe essere utile lasciare la scelta all’utente, quindi l’immagine predefinita mi sta benissimo, purché sia ancora possibile cambiarla.
Purtroppo non c’è una via di mezzo: o mostri tutte le immagini della pagina, senza poterne impostare una di default, oppure vincoli l’utente alla sola immagine che tu stesso hai scelto.
Stavo giusto pensando allo script da integrare quando ho scrollato la pagina e me lo sono trovato già pronto
Ottimo come sempre Ghido!
Non sia mai che proponga un problema e poi vi lasci senza una soluzione
Ciao Ghido, non vorrei darti fastidio ma in questo momento forse sei l’unico che può sapere questa cosa. In sostanza i miei articoli, del mio sito nuzz.it, nel momento in cui li condivido su facebook, è come se l’xml non venisse pars-ato bene … in sostanza quando pubblico un link di uno dei miei articoli su facebook, non mi vedono le immagini e neanche quelle poche righe di testo che si vedono di solito. Io penso che il mio problema sia dovuto al mio feed. Siccome da poco ho inziato a smanettare con wordpress, saresti così gentile da valutare questo che mi capita … Tanto per intenderci, se pubblico il seguente link: http://www.nuzz.it/index.php/2009/05/15/abbiamo-provato-per-voi-la-nuova-versione-beta-di-jdownloader-jd-05547-ocr-solution/ su Facebook, nel mio profilo o in quello di altri (ho già valutato che non dipende dal mio profilo su facebook), non mi vede ne le foto ne un piccolo testo iniziale, cioè lo vede solo come http://www.nuzz.it !!! sto impazzendo. Grazie per la disponibilità nicola.
Ho scoperto il problema: sono piuttosto sicuro che l’errato parsing delle tue pagine sia dovuto al fatto che il tuo DOCTYPE iniziale è errato.
Sostituisci la prima riga del tuo file header.php con questo:
Ciao Ghido e grazie per la cortesia.
In realtà se il problema fosse nell’header.php, cambiando tema, dovrei risolvere il problema … in ogni caso ho provato sia cambiando tema che modificando il Doctype come mi hai consigliato senza successo …
sono proprio sconfortato … stranezze su stranezze … cioè boh …
nuZz.
Ciao,
per prima cosa ti ringrazio per la dritta. Veramente utile.
Ora però ho un problema. Quando vado a condividere l’articolo, non mi mostra il testo dell’articolo ma il sottotitolo del blog. Da cosa può dipendere?
Grazie!
Alè pure a me capita la stessa cosa. Ho aggiunto il codice come riportato sulla guida e compare il link rel…
boh
Davvero un ble post, complimenti
Sai se per caso questo trucchetto può essere utilizzato anche per Blogger di Google?
C’è sicuramente il modo, però non mi intendo di Blogger.
Se vuoi c’è per Tumblr ^^
Grazie per il suggerimento, ora me lo studio
Ciao! cavolo bella guida o ottimo sito!
io ho un problema:
qnd linko i miei articoli su faebook, a volte ho l’anteprima e a volte no… che sarà mai?
graize!
Ciao a tutti.
Finalmente ho risolto il problema.
Per vedere l’anteprima di un link dovete clikare su: impostazioni > Impostazioni applicazioni – Autorizzate alla pubblicazione della vostra pagina facebook, dopo più sotto troverete la scritta LINK clickate > Modifica impostazioni > Autorizzazioni aggiuntive e la casella Pubblicare sullo stream deve essere vuota. Ora riuscirete a vedere l’anteprima.
Saluti.
@medea
quella è una modifica di facebook, il fatto che non prende l’anteprima dipende sicuramente dal codice del sito.
Comunque ho seguito il procedimento e non mi funziona.
Se qualcuno ne è capace, può leggere il sorgente di http://www.disinformatore.com e dirmi cosa sbaglio?
Grazie a tutti e salutoni!
Alfonso
La funzione è davvero interessante, ma un blogger alle primissime armi come me è in seria difficoltà. Per voi sarà banalissimo, ma… in che punto di functions.php va inserita la parte di codice?
E… il tag html di cui sopra va inserito comunque? E, se sì, va inserito all’interno di ogni nuovo articolo?
Scusate la niubbaggine, ma da qualche parte devo pur partire
Ciao. Dunque, il codice va inserito in un punto qualsiasi del file functions.php, alla fine ad esempio, appena prima di
?>.Poi apri il file header.php del tuo tema, cerca il tag </head> e prima di esso inserisci il tag specificato nell’articolo.
Funziona! Grazie mille per la dritta, per la tempestività della risposta e per l’aiuto che dai a tutti noi wordpressari in erba
Ciao,
scusa io ho seguito le tue istruzioni.
Ho copiato il codice in function.php. Poi non mi e’ molto chiaro dove inserire questo
nel dubbio e un po’ a logica, visto che devo inserire il link all immagine, l’ho messo nell articolo, subito sotto l’immagine che voglio compaia in Facebook.
pero’ quando passo dalla modalita HTML a quella “visuale” e di nuovo alla modalita HTML, il codice inserito prima sparisce!
insomma non mi funziona, e non capisco dove sbaglio
puoi aiutarmi per favore?
scusa e’ sparita una parte dalla mia domanda,
non so bene dove inserire
link rel image src href http://www.blablabla
Il primo codice dell’articolo è solo un esempio per spiegare come funziona. L’unico codice da inserire è tutto quello dopo e va nel file functions.php.
Se l’hai già fatto, sei a posto così
E” vero funziona! hmm non so allora che sbagliavo ieri. Grazie! scusa per il disturbo. ehhe
Ciao, ho due problemi:
1) condividendo il link del mio sito su facebook non mi si vede la descrizione.
2) inserendo il tuo codice per l’anteprima dell’immagine non si visualizza.
Come faccio ?
ciao e grazie, cercavo questa cosa da un po’. però se metto l’immagine di anteprima, quando condivido posso scegliere solo l’immagine del logo di anteprima, e se invece io volessi avere la possibilità di scegliere tra l’anteprima.jpg e un’immagine all’interno del post?
grazie