Добавяне на Facebook Open Graph протокол за споделяне в WordPress

Преди всичко – уверете се, че вече нямате meta данни на open graph. Често влизат такива от някой плъгин за бутон „Харесва ми“ или други функционалности от Facebook.

Идеята на Open Graph протоколът е основно да споделяте така нещата от сайта си, че да предизвиквате социална активност във Facebook. Затова е добре споделеното съдържание да има ясно описание, провокиращо вниманието изображение и ясно заглавие. Именно за това трябва да имате контрол над Open Graph съдържанието в сайта си, вместо да се оставите в „ръцете“ на поредния плъгин, който не знаете дали на следващия ъпдейт ще работи както вие искате.

Добавяне на Open Graph:

За да разберете дали нямате вече нужните open graph кодове в блога си просто го заредете и дайте View Source (Ctrl+U за Firefox), след което потърсете в кода за думичката „og:“ – ако я има, значи отнякъде имате добавени open graph тагове.

Ако ли нямате – ето един кратък начин да се сдобиете с Open Graph в WordPress блога си.

Описания код по-долу споделя във Facebook различно съдържание, според това в коя страница сте (дали в страница с резултати от търсене, дали в страница с публикация, дали в категория, архив или резултати по таг)

1. Влезте в WordPress администрацията, меню „Външен вид“ > „Редактор“(Editor)
2. Изберете от списъка с файлове вдясно: functions.php . Ще забележите, че той започва с кода <?php – един ред под този код сложете следното:

function catch_first_image() {
 global $post, $posts;
 $first_img = '';
 ob_start();
 ob_end_clean();
 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
 $first_img = $matches [1] [0];

 if(empty($first_img)){
 $first_img = "http://........./noimage.jpg"; // Сложете път до примерна картинка, в случай, че статията Ви няма добавена снимка.
 }
 return $first_img;
}

Този код ще извлича първата картинка от съдържанието на блог-постовете ви и ще я добавя към информацията, която хората споделят във Фейсбук.

На мястото на http://………/noimage.jpg сложете URL до картинка, която ще се показва при споделяне, в случай, че публикацията ви няма добавени снимки.

3. Запишете functions.php и от списъка с файлове в дясно изберете header.php. От него потърсете в самото му начало (вероятно на някой от първите три реда в кода) <html и го заменете с:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

4. Пак в header.php добавете веднага след <head> следния код

UPDATE: Благодарности на моят приятел и колега Евгени Йорданов от SEOptimizacia, който ми помогна да оптимизираме кода

<meta property="og:title" content="
 <?php if ( is_home() ) { ?><? bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
 <?php if ( is_search() ) { ?><? bloginfo('name'); ?> | <?php echo $s; ?><?php } ?>
 <?php if ( is_single() ) { ?><? bloginfo('name'); ?> | <?php wp_title(''); ?><?php } ?>
 <?php if ( is_page() ) { ?><? bloginfo('name'); ?> | <?php wp_title(''); ?><?php } ?>
 <?php if ( is_category() ) { ?><? bloginfo('name'); ?> | Катгория: <?php single_cat_title(); ?><?php } ?>
 <?php if ( is_month() ) { ?><? bloginfo('name'); ?> | Архив за: <?php the_time('F'); ?><?php } ?>
 <?php if ( is_tag() ) { ?><? bloginfo('name'); ?> | Теми относно: <?php single_tag_title();?><?php } ?>
"/>
<meta property="og:type" content="<?php if ( is_home() ) { ?>blog<?php } else { ?>article<?php } ?>"/>
<meta property="og:url" content="<?php if ( is_home() ) { ?><?php bloginfo('url'); ?><?php } else { ?><?php the_permalink(); ?><?php } ?>"/>
<meta property="og:image" content="<?php echo catch_first_image() ?>"/>
<meta property="og:site_name" content="<? bloginfo('name'); ?>"/>
<meta property="og:description" content="       
 <?php if ( is_home() ) { ?><?php bloginfo('description'); ?><?php } ?>
 <?php if ( is_search() ) { ?>Всички теми относно: <?php echo $s; ?><?php } ?>
 <?php if ( is_single() ) { ?>
<?php
 function fb_meta_desc() {
 global $post;
 $meta = strip_tags($post->post_content);
 $meta = str_replace(array("\n", "\r", "\t", '"', "'"), ' ', $meta);
 $meta = substr($meta, 0, 200);
 echo $meta;
 }
 fb_meta_desc();
 ?>
 <?php } ?>
 <?php if ( is_page() ) { ?>
 <?php
 function fb_meta_desc() {
 global $post;
 $meta = strip_tags($post->post_content);
 $meta = str_replace(array("\n", "\r", "\t"), ' ', $meta);
 $meta = substr($meta, 0, 200);
 echo $meta;
 }
 fb_meta_desc();
 ?>
 <?php } ?>
 <?php if ( is_category() ) { ?>Категория: <?php single_cat_title(); ?><?php } ?>
 <?php if ( is_month() ) { ?>Архив за <?php the_time('F'); ?><?php } ?>
 <?php if ( is_tag() ) { ?>Всички теми относно: <?php single_tag_title();?><?php } ?>
"/>

Повече за Open Graph и формите за споделяне на информация във Facebook може да прочетете тук или да заповядате на Social Me Workshop във Варна на 02. Юни.2011, х-л Golden Tulip (повече информация за събитието вижте тук)


Тази статия е разгледана общо 18 пъти от датата на нейното публикуване
Благодаря Ви за подкрепата! Надявам се тя да Ви бъде полезна и ще съм още по-благодарен ако напишете мнение в коментар или споделите статията в социалните мрежи.

  1. Йордан Димитров 07.05.2012 на 14:46

    Привет на всички и поздравления и огромни благодарности на Автора(авторите) на разясненията и кодовете!
    Горещо се интересувам по въпроса с идеята да напишете плъгин – какво става с нея? Има ли вече плъгин писан от Вас или все още се работи, или изоставихте идеята и т.н.?
    Моля Ви осветлете ни 🙂
    Сега ще пиша и лично на Иво Илиев, но и тук ще споделя за моя проблем с един темплейт – ComicPress 2.9. Направих всичко както е описано тук и в function.php и в header.php, но пак не ми извлича и слага тъмбнейл от поста (имам предвид като излезе на стената харесания пост), който е харесан :(. Може би още нещо допълнително трябва да се пипне в тази тема? Моля, който може да помогне 🙂

    Reply
  2. Антонио Чаков 24.02.2012 на 20:48

    Снощи и аз го инсталирах, затова искам да благодаря на Иво Илиев за прекрасната статия, с която ми оказа невероятна помощ, както и на Евгени Йорданов, за допълнението към кода. 🙂

    Reply
  3. Biser Valov 23.08.2011 на 19:29

    Аз също най-сетне го инсталирах. Мноооого благодаря! 🙂

    Reply
  4. Стоян Табаков 13.08.2011 на 10:45

    Много, ама много Ви благодаря! :)))) От 3 дни се мъча да си оправя маймуницата, която ми излиза при споделяне във фейсбук и ето, че стана. 🙂 А само да попитам, ако искам вместо първата картинка да ми черпи информация от Thumbnail, то какво трябва да се промени. 🙂 Благодаря отново! 🙂

    Reply
    1. Ivo Iliev 13.08.2011 на 19:15

      Може да опитате просто да премахнете og:image и би трябвало да кешира всички картинки в страниците, които намери. Отнема време и понякога не е съвсем точно, но е добър вариант.

      Reply
  5. Пламен Хараламбиев 16.05.2011 на 11:50

    Много полезна статия. Аз, а предполагам, че и всички останали, които имат сайтове, но не разбират изобщо от код Ви благодарим горещо 🙂

    Reply
  6. Roshava Kratuna 11.05.2011 на 12:06

    Между другото. Кодът не ми харесва. Ето някои точки:

    1. Стабилно зашит в темата. Ами ако искам да сменя темата? А ако не разбирам бъкел от PHP? Спомням си далечните години, когато за първи път се сблъсках с WordPress. „Колко е просто – template tags“ и как се пулех какво искат да кажат – ни кон, ни магаре.

    2. Трудно четим с много повторения от рода на is_xxxxx. Има стандартни шаблони в PHP за лечение на тези ситуации.

    3. След като си избрал да го зашиеш в темата, може да избегнеш голяма част от операциите, като се възползваш от особеностите на генерирания от темата код.

    4. Замислял ли си се колко излишен трафик генерират тези OG тагове? Има и алтернативен начин.

    5. Замислял ли си се колко CPU се гори за тези операции?

    Последните две дори да изглеждат маловажни, изобщо не са. Всеки сайт с над 1000 посетители на ден трябва внимателно да планира ресурсите. Лично аз поддържам сайтове с милиони посетители на седмица и мога да ти кажа, че WordPress и подобен подход към него са много голяма болка.

    Сега – чашката с чадърчето и на припек.

    Reply
    1. Иво Илиев 11.05.2011 на 12:42

      Г-н Георгиев, благодаря за усилията да напишете толкова много въпроси без нито едно решение 🙂 Поласкан съм, че отделяте толкова внимание на темата, особено след като аз и колеги писахме тук, че работим над плъгин :))) и особено след като загърбвате поддръжката на многомилионните сайтове, за които говорите, за да пишете в един скромен личен блог като този 🙂

      Сигурно сте влизал в CNN.com – там ползват същите OG метатагове, за които казвате, че създават проблеми. Facebook също официално лансират ползването на таговете. И Вие, и аз знаем за много други подобни примери. За разлика от Вас, аз и колегите, с които работя се осланят на тези практики, които авторитетните сайтове прилагат.

      Reply
  7. Roshava Kratuna 11.05.2011 на 11:53

    Иво, коментарите ми не са анонимни. Като човек занимаващ се активно с интернет приложения, предполагам си наясно, че над 70% от потребителите имат различни физически ограничения, които не им позволяват да използват Интернет по начина по който на СЕОтата им се иска.

    Едва ли можеш да си представиш ограниченията, които ме заобикалят. Пък и нямам право да ти говоря за тях.

    Reply
    1. Иво Илиев 11.05.2011 на 12:00

      Разбирам те. Предпочитам да знам с кой си говоря и кой отделя време да кореспондира с мен. Винаги можеш да ми пратиш едно лично съобщение или е-мейл, ще се радвам да поговорим 🙂

      Reply
  8. Mladen Borisov 11.05.2011 на 11:49

    Супер, браво. Учим се и така ставаме по-големи с всеки изминал ден. Е все пак сме отскоро в бранша само 7 години, но ще се справим…

    Reply
  9. Mladen Borisov 11.05.2011 на 11:38

    Иво, кога ще почваме работа по-новия плъгин? Айде, че нямам търпение :)))

    Reply
    1. Иво Илиев 11.05.2011 на 11:47

      Тъкмо по този въпрос говорим с Евгени. Имаме да изкоментираме някой от нещата и с колегите от чужбина. Съвсем скоро ще пуснем първата версия 🙂

      Reply
  10. Roshava Kratuna 11.05.2011 на 11:14

    Еххх, ама кога ще се научим да тестваме и проверяваме за грешки преди да развяваме байрака?

    Reply
    1. Иво Илиев 11.05.2011 на 11:21

      Който е безгрешен нека вдигне ръка. Би ли бил малко по-конретен за какво говориш? Може ли да те попитам също и защо пишеш анонимни коментари – притеснява ли те нещо? Преди време ми беше дал много добър съвет за facebook коментарите, но така и не разбрах на кой благодаря за този съвет.

      Reply
  11. Hristo Stoyanov 10.05.2011 на 13:11

    за Thesis темата този код имаш ли идея къде би следвало да се постави?

    Reply
    1. Evgeni Yordanov 10.05.2011 на 13:26

      Всички теми имат header.php независимо дали са през framework писани, като тези на Thesis. Така, че намираш си header.php-то и дерзаеш.

      Reply
    2. Hristo Stoyanov 10.05.2011 на 13:30

      ахам разбрах, много ти благодаря Евгени за инфото!

      Reply
    3. Hristo Stoyanov 10.05.2011 на 13:35

      супер си, много ти благодаря за линка!

      Reply
  12. Evgeni Yordanov 10.05.2011 на 12:13

    Аз имам модификация, по показания от теб код. Нещо против да направим допълнение към статията, че да не пускам цяла статия при мен?

    Reply
    1. Tihomir Petrov 10.05.2011 на 13:22

      Наистина полезно и важно за добър linkbait

      Reply
    2. Ivo Iliev 11.05.2011 на 5:21

      Отлична модификация, Евгени, благодаря ти, че сподели и можем заедно да оптимизираме кода. По-горе сложих ъпдейт, но защото вчера не успяхме да довършим разговора, надявам се днес да успеем 🙂 А може и накрая да оформим всички WordPress+Facebook интеграции в един общ плъгин, колко му е 🙂

      Reply
  13. Doncho Angelov 10.05.2011 на 12:12

    Много добра идея!
    Аз лично много бих оценил оформянето на така споменатите промени в плъгин. WordPress има доста жив release cycle и нанасянето на едни и същи промени отново и отново ще е проблемно и трудоемко.
    Все пак – страхотна работа и благодаря!

    Reply

Оставете мнение

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *