52 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!
Per domande tecniche su Facebook, ti invito a postare sul Forum apposito!
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
Un momento! Ghido vorrei capire una cosa. nel commento di Alberto Campagnolo dici che:
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 e prima di esso inserisci il tag specificato nell’articolo.
mentre nella domanda di filippo dici che:
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.
Vorrei capire una cosa… ma lo si deve inserire o no il codice:
????
e soprattutto, una volta cambiato il percorso del sito, il resto ovvero: /anteprima.jpg” /> deve restare invariato?? grazie..
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
Ciao e innanzi tutto davvero complimenti, devo dire che per i miglioramente al mio blog con wordpress mi sono ritrovato più di una volta da google al vostro sito, segno che andate forti e centrate i punti più importanti dei problemi che si possono avere con un blog.
Questa guida è proprio una delle ultime cose di cui mi sono servito, però ho bisogno di un aiuto: finchè si tratta di condividere l’immagine presente nell’articolo non ci sono problemi, il codice funziona perfettamente. Nel momento in cui nell’articolo inserisco solo un video preso da youtube, senza immagini, non si riesce a generare nessuna anteprima.
Leggendo alcune risposte sopra ho intuito che avrei dovuto sostituire la parola “image” con “video”, ma questo mi ha dato un errore fatale nel file functions.php e di conseguenza sia il sito che il pannello di controllo erano scomparsi.
Mi potreste dire come fare? Grazie
Scusatemi, intanto grazie per il contributo ma ho questo problema.
A volte la funzione va ed è perfetta in altri punti, ad esempio sul primo articolo di una pagina, non funziona e devo comunque scegliere l’immagine.
Vi chiedo anche un altro aiuto.
Io utilizzo il plug-in http://nothing.golddave.com/?page_id=680 per collegarmi a fb e come testo sotto al titolo prende un commento posto sul primo widget che trova. C’è modo di fargli leggere in automatico le prime righe dell’articolo?
Grazie in anticipo.
Aggiungo che anche il problema del testo me lo fa solo su alcuni articoli
ciao a tutti ,,,,,,come posso fare per publicare su facebook una foto modificata con Microsoft PowerPoint…grazie
Questo codice funziona se c’è un’immagine di anteprima solo nell’articolo o in tutto l’html?
risolta questa domanda a favore della prima ipotesi, non si potrebbe migliorare questo script facendo sì che se non ci sono immagini nel post, su fb appare il nostro logo/favicon?
Purtroppo non ho mai avuto un buon rapporto con le espressioni regolari, altrimenti avrei proposto un’alternativa.
Complimenti per il l’idea,
prima se mettevo un link su facebook non mi caricava ne anteprima (thumb) ne quelle 2 righe di testo, aggiungendo il codice su functions.php come detto, mettendo il link su FB ora mi carica sia il testo che la thumb, però… non mi da la possibilità di prendere SOLO la prima immagine, ma da la possibilità all’utente di scegliere tra tante immagini..
com’è possibile?
Il sito in questione è quello che ho inserito su “sito web”
Grazie
Non capisco una sola cosa… perche quando inseriro il codice mi da Errore? non capisco forse il punto esatto dove metterlo… aiuto!!!
Grazie, molto utile
Thanks!
Mettiamo il caso che io legga “functions.php” e rimanga con una faccia tipo così :O
Please, aiutatemi. Dov’è che va inserito questo tag? Tutto dalle basi, ve ne prego.
non so se avete notato che questa benedetta anteprima dei link non funziona piu o meglio, non funziona piu bene come prima… condividendo questo stesso articolo l’anteprima non si visualizza!
ah ok, era solo temporaneo!! -_-”
Puoi aiutare anche me?
Non sono sicuro che sia tutto giusto, all’inizio mi dava anche errore poi go aggiunto lo script all’inizio del file function
solo che quando provo a condividere, molte volte mi prende solo alcune immagini dei banner pubblicitari altre funziona, altre manco trova l’immagine °-°?
Soluzioni?
Questa stringa, forse con wordpress 3.0 non funziona più…