Poate ţi se întâmplă ca atunci când dai share pe facebook la un articol de pe blogul tău, să nu apară un thumbnail, dar nici descrierea articolului. Şi asta nu arată deloc bine pe profilul tău, iar lumea nu va fi deloc tentată să dea click pe link-ul postat. Brusc, subit şi dintr-o dată, m-am lovit şi eu de problema asta când venea vorba de linkurile de pe StirIT. Am căutat câteva zile o rezolvare, am încercat tot felul de funcţii php găsite pe net, meta taguri, pluginuri. Într-un final am găsit rezolvarea şi o să o explic în cele ce urmează.
Pasul 1. Crearea unei aplicaţii Facebook.
Dacă nu ai deja una, va trebui să o creezi deoarece este necesar un Application ID.
1. Te loghezi pe Facebook şi accesezi pagina pentru Developeri.
2. Click pe Create New App, introduci App Name şi dai Continue.
3. Sus o să apară App ID pe care trebuie să-l salvezi undeva.
4. Trebuie completate câteva informaţii: La Basic Info introdu în App Domain domeniul tău, de exemplu stirit.ro. Mai jos dă click pe Website şi completează la Site URL, de exemplu: http://stirit.ro/ URL-ul trebuie să aibă un / la final !
5. Save Changes
Pasul 2. Înlocuirea tagului <HTML>
Deschide headerul (header.php) aferent temei folosite. Ar fi bine să faci un backup înainte de a-l modifica.
Caută linia de cod ce începe cu:
<html xmlns="http://www.w3.org ...
Înlocuieste-o cu:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
Păstrează header.php deschis, în continuare vom lucra tot în el.
Pasul 3. Inserarea tag-urilor Open Graph
Copiază codul următor chiar după tagul <head> sau înainte de </head>.
<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>
<!-- the default values -->
<meta property="fb:app_id" content="your_fb_app_id" />
<meta property="fb:admins" content="your_fb_admin_id" />
<!-- if page is content page -->
<?php if (is_single()) { ?>
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />
<!-- if page is others -->
<?php } else { ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:image" content="logo.jpg" /> <?php } ?>
Sunt necesare câteva modificări:
- Linia 3: Înlocuieşte your_fb_app_id cu Application ID de la Pasul 1.
- Linia 4: Poţi obţine your_fb_admin_id din pagina Facebook Insights. Click pe butonul verde, Insights for your website, copiaţi întregul cod şi înlocuiţi linia 4 cu acesta.
- Linia 19: Înlocuieşte logo.jpg cu un url către logoul tau. Acesta va fi afişat în cazul în care se dă share la o pagină care nu are thumbnail.
Pasul 4. Inserare Facebook Javascript SDK
Următorul javascript permite accesul la toate facilităţile oferite de Graph API and Dialogs.
Trebuie copiat în header.php chiar după tagul <body>.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your_fb_app_id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Înlocuieşte your_fb_app_id în Linia 4 cu Application ID din Pasul 1.
Pasul 5. Test & Debugging.
Parcă sună prea pretenţios “debugging”.
După ce ai modificat header.php s-ar putea să observi că blogul tău nu mai funcţionează.
S-ar putea pe pagină să apară doar un text “aiurea”, ce conţine şi câteva fraze din articolul tău sau pagina să fie complet goală. Dacă dai View Source atunci o să observi o eroare de genul call to undefined function get_post_thumbnail_id(). De regulă get_post_thumbnail_id() este funcţia care provoacă problemele. Deschide functions.php din tema curentă şi dă un search după cuvântul “thumbnail” pentru a găsi funcţia care îţi generează thumbnailul pentru posturi. La mine funcţia este denumită get_thumbnail(). Ne întoarcem la codul de la Pasul 3.
În Linia 12 înlocuim {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); } cu funcţia găsită în functions.php, în cazul de faţă get_thumbnail() :
<meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />
Trebuie înlocuită cu:
<meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_thumbnail($post->ID)); }?>" />
Acu pagina ar trebui să fie afişată corect. Putem trece la verificarea meta-tagurilor.
Testul #1 – Vizualizarea codului sursă
Pentru fiecare post în parte, ar trebui ca în codul sursă să apară meta-tagurile următoare, cu informaţiile aferente fiecărui post.
Test #2. – Share pe Facebook
Încearcă să dai share la un post pe Facebook. Aici, deşi Test #1 a decurs cum trebuie, s-ar putea să ai surpriza să vezi că nici acum nu apare poza şi descrierea pe Facebook.
Dacă URL-ul postului este de forma http://domeniu.ro, înlocuirea lui cu http://www.domeniu.ro ar putea fi rezolvarea. Pentru a fi valabilă pentru toate link-urile blogului, modificarea se face din Dashboard / Settings / General unde se înlocuieşte WordPress Adress şi/sau Site Adress
