[Tutorial][WP]Facebook Open Graph: afiseaza imaginea si descrierea link-urilor

fallen_angel · January 10, 2013

Poate unii dintre voi întâmpina?i aceast? ”problem?” când da?i share la vreun articol de pe propriul site.

Solu?ia pentru a ap?rea un thumbnail, un titlu ?i o descriere a linkurilor postate pe Facebook:

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 site.ro. Mai jos d? click pe Website ?i completeaz? la Site URL, de exemplu: http://site.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-ll 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

Aripipevant · February 8, 2013

Folositor asa ceva ! Multumesc !

Sign In

[Tutorial][WP]Facebook Open Graph: afiseaza imaginea si descrierea link-urilor

Recommended Posts

fallen_angel

Aripipevant

Join the conversation

Browse

Activity

Pages