Blog: thumb pentru Facebook

fb-thumb-2 fb-thumb-1

Mai sus aveți două exemple de afișare a aceluiași articol. Facebook caută o imagine în articol și, dacă o găsește, o afișează. Dacă nu, afișează ce găsește. Sunt sigur că ați văzut pe timeline articole cu imagini greșite.

În imaginea doi aveți ceva interesant: la articolul meu a găsit un thumb mare, și l-a afișat. La articolul de sub el nu a găsit asta, așa că a afișat imaginea mică.

Care sunt dimensiunile minime pentru a afișare?

Thumb-ul mic trebuie să aibă dimensiunea 60x60px. Dacă imaginea inclusă în articol are o dimensiune mai mică, Facebook va căuta o altă imagine în pagină si va afișa pe aceea.

Atenție, aici vorbim de thumb, nu de linkul către imaginea mare.

Thumb-ul mare trebuie sa aibă minim 400×200. E recomandat o imagine cu dimensiunile de 500x300px, dar orice e peste 400px dă bine.

Cum setăm aceste imagini?

Prima mișcare este să mergeți la Settings » Media și să setați acolo “thumbnail size” 60×60. Apoi, puteți folosi un plugin care să bage automat codul în pagină. Sunt zeci, căutați featured image în wordpress plugins.

 

Mie nu îmi plac pluginurile, așa că folosesc un cod manual, care e mai sigur și mai deștept. Știu, ar trebui să fac un plugin din el, dar n-am nervi pentru procesul de băgare a unui plugin pe site-ul WordPress, așa că mai bine pun codul aici, să se folosească cine vrea de el.

 


Pasul 1: puneți codul de mai jos cât mai sus în header.php din temă.


< ?php $imgx = ''; $tryx = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
if(is_array($tryx) && !empty($tryx[0])) {
if($tryx[1] >= 200 && $tryx[2] >= 200) {
$imgx = $tryx[0];
}
} else { $imgx = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); }
if(empty($imgx)) { $imgx = 'http://cdn.zoso.ro/wp-content/fb-thumb.png'; }?>

În loc de https://www.zoso.ro/wp-content/fb-thumb.png puneți o imagine reprezentativă, de mărime 60x60px sau mai mare. Dacă scriptul nu găsește nici o imagine în text, în loc să ia una la întâmplare, o va lua pe aceasta.


 

Pasul 2: tot în header.php, puneți asta înainte de </head>

 


<meta property="og:image" content="<? echo $imgx; ?/>" itemprop="image" />

 

og:image este codul pe care Facebook îl caută prima oară când vrea să afișeze o imagine.


 

Pasul 3: în același director veți găsi fișierul functions.php, în care puneți codul:

 


add_theme_support( 'post-thumbnails' );

function autoset_featured() {
global $post;
$already_has_thumb = has_post_thumbnail($post->ID);
if (!$already_has_thumb)  {
$attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
if ($attached_image) {
foreach ($attached_image as $attachment_id => $attachment) {
set_post_thumbnail($post->ID, $attachment_id);
}
}
}
}  //end function
add_action('the_post', 'autoset_featured');
add_action('save_post', 'autoset_featured');
add_action('draft_to_publish', 'autoset_featured');
add_action('new_to_publish', 'autoset_featured');
add_action('pending_to_publish', 'autoset_featured');
add_action('future_to_publish', 'autoset_featured');

function wp_get_attachment_thumb_file_custom( $post_id = 0 ) {
$post_id = (int) $post_id;
if ( !$post =& get_post( $post_id ) )
return false;
if ( !is_array( $imagedata = wp_get_attachment_metadata( $post->ID ) ) )
return false;

$file = $imagedata['file'];
if ( !empty($imagedata['sizes']['thumbnail']) && ($thumbfile = str_replace(basename($file), $imagedata['sizes']['thumbnail']['file'], $file)) && file_exists('img/'.$thumbfile) )
return apply_filters( 'wp_get_attachment_thumb_file_custom', $thumbfile, $post->ID );
return false;
}

function wp_get_attachment_thumb_url_custom( $post_id = 0 ) {
$post_id = (int) $post_id;
if ( !$post =& get_post( $post_id ) )
return false;
if ( !$url = wp_get_attachment_url( $post->ID ) )
return false;

$sized = image_downsize( $post_id, 'thumbnail' );
if ( $sized )
return $sized[0];

if ( !$thumb = wp_get_attachment_thumb_file_custom( $post->ID ) )
return false;

$url = str_replace(basename($url), basename($thumb), $url);

return apply_filters( 'wp_get_attachment_thumb_url_custom', $url, $post->ID );
}


 

Și cam atât. Dacă ați făcut toți pașii corect, nu mai aveți nevoie de un plugin.

Mulțumesc că ai citit acest articol.
Dacă vrei să susții acest blog, cumpără un abonament de 3$

30 comentarii

  1. Multumesc pentru cod, chiar eram curios de asemenea setari pentru afisarea cat mai corecta pentru facebook.

    00
  2. Chiar și cu cod uneori dă rateuri. În funcție de tema utilizată, uneori scriptul Facebook caută imagini întâi în sidebar și ia de acolo ceva, crezând că le-a găsit în articol.

    Mai adaugă și că se poate testa totul pe https://developers.facebook.com/tools/debug/, bagi acolo URL-ul paginii și Facebook o testează.

    00
  3. Nu, nu cred nimic din ce apare pe FB.

    00
  4. Multumesc mult, foarte util. Chiar nu intelegeam de ce afiseaza FB thumb-uri aiurea (bucati de logo, etc)

    00
  5. Radu: daca setezi og:image nu prea are cum sa dea “rateuri”.

    00
  6. Good job! :)
    Singura chestie care ”nu-mi convine” la treaba asta e ca daca actualizezi template-ul (cum e cazul temelor ce nu sunt custom made) atunci dupa fiecare actualizare trebuie sa repeti procedura. Sau se pot pastra setarile de genul cu un child theme…ori ceva?

    00
    • @Liviu R.: și…de câte ori actualizezi tema? exact. hai să ne plângem de căcaturi care se intâmplă o dată la 2-3 ani.

  7. Ai sa razi dar de pe 5 iulie 2013 pana acum, tema a primit 18 actualizari, deja am inceput sa ignor versiuni ce repara ceva erori minore. Incercasem sa salvez modificari de genul prin child theme, dar evident nu a mers ca pastreaza doar css. In ultima instanta, m-am gandit sa salvez fisierele php modificate pentru a inlocui cand va fi cazul in versiunile noi (insa nu cred ca e bine asa).
    Oricum, nu ma plang ci caut solutii. :)

    00
  8. @nwradu: Si eu patesc la fel, sa imi mai ia din sidebar.

    00
  9. Pluginul WordPress SEO by Yoast iti da posibilitatea sa bagi open graph fara sa scrii cod si sa iti setezi si o imagine default. Cat despre featured images, are default WordPress-ul, nu e nevoie sa scrii cod decat daca ai o tema care nu are suport built-in pentru asta, caz in care adaugi doar add_theme_support( ‘post-thumbnails’ ); in functions.php.

    00
    • @Andrei Chira: ai rămas fără pastă de dinți și ăsta a fost cel mai bun mod de a aerisi gura? nu, serios, nu glumesc, e o intrebare legitimă.

  10. @vali nu, n-am ramas fara, chiar mi-am luat acum 2 zile si niste apa de gura.

    00
    • @Andrei Chira: ok. atunci hai să facem o verificare. scrie in text că sunt pluginuri care fac asta? scrie. scrie că mie nu imi plac pluginurile? scrie. de ce să te pierzi o ocazie bună să taci? serios acum…

      românia e țara unde orice idee ai avea, 3 români au unele mult mai bune. nu functionează, dar sunt mult mai bune.

  11. @Vali:- auch, finut si cu efect, replica. :))
    @Andrei:- mersi de solutii. Am bifat toate cele 4 puncte. Seo by Yoast e bun, dar foarte greoi pentru baza de date si nu acopera bine chestii esentiale din punct de vedere SEO, gen Dublin Core, Copyright sau Microdata. Am incercat cuplarea intre Squirrly si Add Meta Tags si merge ok pana la capitolul og:url unde apare, logic, duplicat.
    Referitor la chestia cu featured image, tocmai wordpress e buba, ca sa zic asa, pentru ca daca spre exemplu ai in sidebar un widget cu articole (recente, popendulare, etc) ce afiseaza featured image, apar erorile de crawling la Facebook.
    Singura solutie, pana acum, e asta cu editarea codului temei si actualizarea temei mai rar, indiferent de ce face autorul ei (e custom tema, dar din alea de pe theme forest, nu dedicata).

    00
  12. @vali ai dreptate dar solutia ta e destul de nisata, adica oamenii trebuie sa 1.nu le placa pluginurile, 2.sa aiba o tema custom, 3.sa le placa sa bibileasca la ea si 4. sa si stie ce fac acolo.
    Nu am zis ca solutia mea este mai buna ci doar o alternativa pentru cei de genul lui Liviu R. care zicea ca vrea solutii.
    Poate am gresit ca nu am pus @Liviu R. in fata comentariului meu, ce-i drept.

    00
  13. @Liviu singura eroare pe care am intalnit-o eu e ca Facebook ia intr-adevar prima poza din articol in loc sa ia featured image (dar nu tot timpul, doar cand are chef).
    legat de SEO nu ma bag, nu stiu. eu folosesc pluginul lui Yoast pentru ca are multe functionalitati (sitemap, open graph, authorship, twitter card meta data, breadcrumbs, etc..) si pentru ca omul e bun si am incredere ca scrie cod curat.

    00
  14. Unele teme se folosesc de thumnail in ideea ca are o dimensiune fixa de care se bazeaza, eu as proceda putin diferit ..as adauga o dimensiune de imagine custom special pentru ce avem nevoie:

    add_image_size( ‘fb-thumbnail’, 200, 200, true);

    Iei Id-ul imaginii asa:
    $image_id = get_post_thumbnail_id();
    $fb_image_url = wp_get_attachment_image_src( $image_id->ID, ‘fb-thumbnail’);

    Si in felul asta nu dai peste cap tema in caz ca utilizeaza dimensiunea de thumbnail default.

    00
  15. da ruben, iti multumim pentru contributie, dar poate esti foarte ocupat:))))

    00
  16. Poate dăm și noi dimensiunile corecte pentru imaginile mari.

    Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.

    https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#images

    00
  17. Ce legătură are asta cu dimensiunile recomandate de Facebook?

    00
    • @Ruben: absolut nimic. dar e mai util să îți vezi de treaba ta decât să dai sfaturi altora. ajută.

  18. Nici nu știu de ce-mi bat capul.

    00
  19. o mică problemă observată. (poate e doar la mine. scuze dacă e așa)

    pentru bucățica de cod ” $imgx = ‘http://cdn.zoso.ro/wp-content/fb-thumb.png’; }?> (cu url-ul meu catre imagine, of course)” merge doar daca pun asa “http://cdn.zoso.ro/wp-content/fb-thumb.png”, cu ghilimele. la fel si pentru $post->ID), ‘full’, doar $post->ID), ‘full’.

    00
  20. Tocmai mi-am dat seama ca am folosit chestia asta pe doua bloguri deja si am uitat sa-ti multumesc.

    Mersi!

    00
  21. Codurile din postare au virgulele aiurea din cauza editorului wp sau naiba stie de unde. Nu poti sa faci ceva, as vrea si codurile. Mi-e imposibil sa schimb fiecare virgula din cod.

    00

Adaugă un comentariu

Câmpurile marcate cu * sunt obligatorii! Adresa de email nu va fi publicată.

1. Linkurile utile în context sunt binevenite.
2. Comentariile asumate fac bine la blăniță.
3. Șterg comentariile care îmi strică buna dispoziție.

Susținere

Susține acest blog cumpărând de pe eMAG prin acest link sau de la PCGarage prin acest link.