SocialMe Workshop във Варна наближава. Задайте своите въпроси и спечелете безплатен пропуск! незавиSIM
Маркетинг блог на Иво Илиев
  • Маркетинг
  • Размисли
  • За Автора

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

Posted by Иво Илиев in Маркетинг в социалните мрежи, Маркетинг във Facebook on май 10, 2011

Преди всичко – уверете се, че вече нямате 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 (повече информация за събитието вижте тук)

Category: Маркетинг в социалните мрежи, Маркетинг във Facebook Tags: facebook, facebook open graph wordpress, facebook реклама, facebook споделяне, wordpress уроци, фейсбук
Share:

Иво Илиев

___ Повече за автора четете от тук | YouTube канал | Facebook страница ___ Иво Илиев e управител на дигиталните маркетинг компании BOLANDILA и InteractAGE. ___ Иво Илиев е практик в сферата на маркетинга, рекламата и комуникациите от 2003г. Има богат опит в маркетинга и рекламата на международни компании. Практикува като консултант, водещ на корпоративни обучения, лектор. ___ View all posts by Иво Илиев

Related Posts

Оръжията за масово споделяне в ръцете ни

апр. 2
Размисли, Семкаджийница

През 2011г. една от социалните мрежи стана третата по население държава в света. Тогава написах статията "Оръжия за масово споделяне"…

Read more

Специални аудитории при фейсбук рекламите (facebook ads)

мар. 31
Маркетинг

Споделям ви част от уебинарът, който проведох с 500 участника от различни сфери на бизнеса на тема "Специални фейсбук аудитории":…

Read more

5 съвета за подобряване на facebook рекламите чрез по-добри сигнали(events) и tracking на посетителите

ное. 16
Маркетинг, Маркетинг в Instagram, Маркетинг в социалните мрежи, Маркетинг във Facebook, Реклама в Интернет

Facebook рекламите отдавна разчитат на т.нар. Discovery икономика през дигиталните канали. Докато преди хората търсеха продуктите - днес продуктите откриват…

Read more

Comments (27)

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

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

    Отговор
  2. Антонио Чаков каза:
    24.02.2012 в 20:48

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

    Отговор
  3. Biser Valov каза:
    23.08.2011 в 19:29

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

    Отговор
    • Alen Popović каза:
      23.08.2011 в 19:31

      Най доброто 🙂

      Отговор
  4. Стоян Табаков каза:
    13.08.2011 в 10:45

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

    Отговор
    • Ivo Iliev каза:
      13.08.2011 в 19:15

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

      Отговор
  5. Пламен Хараламбиев каза:
    16.05.2011 в 11:50

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

    Отговор
  6. Husein Yuseinov каза:
    11.05.2011 в 11:28

    Още нещо по темата от любимия ми Wprdpress блог http://www.wpbeginner.com/wp-themes/how-to-add-facebook-open-graph-meta-data-in-wordpress-themes/.

    Отговор
  7. Roshava Kratuna каза:
    11.05.2011 в 12:06

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

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

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

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

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

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

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

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

    Отговор
    • Иво Илиев каза:
      11.05.2011 в 12:42

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

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

      Отговор
  8. Roshava Kratuna каза:
    11.05.2011 в 11:53

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

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

    Отговор
    • Иво Илиев каза:
      11.05.2011 в 12:00

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

      Отговор
  9. Mladen Borisov каза:
    11.05.2011 в 11:49

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

    Отговор
  10. Mladen Borisov каза:
    11.05.2011 в 11:38

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

    Отговор
    • Иво Илиев каза:
      11.05.2011 в 11:47

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

      Отговор
  11. Roshava Kratuna каза:
    11.05.2011 в 11:14

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

    Отговор
    • Иво Илиев каза:
      11.05.2011 в 11:21

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

      Отговор
  12. Hristo Stoyanov каза:
    10.05.2011 в 13:11

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

    Отговор
    • Evgeni Yordanov каза:
      10.05.2011 в 13:26

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

      Отговор
    • Hristo Stoyanov каза:
      10.05.2011 в 13:30

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

      Отговор
    • Ivo Iliev каза:
      10.05.2011 в 13:34

      Не съм я ползвал, но тук има работещо решение: http://designpx.net/thesis/facebook-open-graph-protocol-meta-tags/

      Отговор
    • Hristo Stoyanov каза:
      10.05.2011 в 13:35

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

      Отговор
  13. Evgeni Yordanov каза:
    10.05.2011 в 12:13

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

    Отговор
    • Tihomir Petrov каза:
      10.05.2011 в 13:22

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

      Отговор
    • Ivo Iliev каза:
      11.05.2011 в 5:21

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

      Отговор
    • Evgeni Yordanov каза:
      11.05.2011 в 14:48

      Николко, ако питаш мен 🙂

      Отговор
  14. Doncho Angelov каза:
    10.05.2011 в 12:12

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

    Отговор

Вашият коментар Отказ

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