През 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 (повече информация за събитието вижте тук)
Привет на всички и поздравления и огромни благодарности на Автора(авторите) на разясненията и кодовете!
Горещо се интересувам по въпроса с идеята да напишете плъгин – какво става с нея? Има ли вече плъгин писан от Вас или все още се работи, или изоставихте идеята и т.н.?
Моля Ви осветлете ни 🙂
Сега ще пиша и лично на Иво Илиев, но и тук ще споделя за моя проблем с един темплейт – ComicPress 2.9. Направих всичко както е описано тук и в function.php и в header.php, но пак не ми извлича и слага тъмбнейл от поста (имам предвид като излезе на стената харесания пост), който е харесан :(. Може би още нещо допълнително трябва да се пипне в тази тема? Моля, който може да помогне 🙂
Снощи и аз го инсталирах, затова искам да благодаря на Иво Илиев за прекрасната статия, с която ми оказа невероятна помощ, както и на Евгени Йорданов, за допълнението към кода. 🙂
Аз също най-сетне го инсталирах. Мноооого благодаря! 🙂
Най доброто 🙂
Много, ама много Ви благодаря! :)))) От 3 дни се мъча да си оправя маймуницата, която ми излиза при споделяне във фейсбук и ето, че стана. 🙂 А само да попитам, ако искам вместо първата картинка да ми черпи информация от Thumbnail, то какво трябва да се промени. 🙂 Благодаря отново! 🙂
Може да опитате просто да премахнете og:image и би трябвало да кешира всички картинки в страниците, които намери. Отнема време и понякога не е съвсем точно, но е добър вариант.
Много полезна статия. Аз, а предполагам, че и всички останали, които имат сайтове, но не разбират изобщо от код Ви благодарим горещо 🙂
Още нещо по темата от любимия ми Wprdpress блог http://www.wpbeginner.com/wp-themes/how-to-add-facebook-open-graph-meta-data-in-wordpress-themes/.
Между другото. Кодът не ми харесва. Ето някои точки:
1. Стабилно зашит в темата. Ами ако искам да сменя темата? А ако не разбирам бъкел от PHP? Спомням си далечните години, когато за първи път се сблъсках с WordPress. „Колко е просто – template tags“ и как се пулех какво искат да кажат – ни кон, ни магаре.
2. Трудно четим с много повторения от рода на is_xxxxx. Има стандартни шаблони в PHP за лечение на тези ситуации.
3. След като си избрал да го зашиеш в темата, може да избегнеш голяма част от операциите, като се възползваш от особеностите на генерирания от темата код.
4. Замислял ли си се колко излишен трафик генерират тези OG тагове? Има и алтернативен начин.
5. Замислял ли си се колко CPU се гори за тези операции?
Последните две дори да изглеждат маловажни, изобщо не са. Всеки сайт с над 1000 посетители на ден трябва внимателно да планира ресурсите. Лично аз поддържам сайтове с милиони посетители на седмица и мога да ти кажа, че WordPress и подобен подход към него са много голяма болка.
Сега – чашката с чадърчето и на припек.
Г-н Георгиев, благодаря за усилията да напишете толкова много въпроси без нито едно решение 🙂 Поласкан съм, че отделяте толкова внимание на темата, особено след като аз и колеги писахме тук, че работим над плъгин :))) и особено след като загърбвате поддръжката на многомилионните сайтове, за които говорите, за да пишете в един скромен личен блог като този 🙂
Сигурно сте влизал в CNN.com – там ползват същите OG метатагове, за които казвате, че създават проблеми. Facebook също официално лансират ползването на таговете. И Вие, и аз знаем за много други подобни примери. За разлика от Вас, аз и колегите, с които работя се осланят на тези практики, които авторитетните сайтове прилагат.
Иво, коментарите ми не са анонимни. Като човек занимаващ се активно с интернет приложения, предполагам си наясно, че над 70% от потребителите имат различни физически ограничения, които не им позволяват да използват Интернет по начина по който на СЕОтата им се иска.
Едва ли можеш да си представиш ограниченията, които ме заобикалят. Пък и нямам право да ти говоря за тях.
Разбирам те. Предпочитам да знам с кой си говоря и кой отделя време да кореспондира с мен. Винаги можеш да ми пратиш едно лично съобщение или е-мейл, ще се радвам да поговорим 🙂
Супер, браво. Учим се и така ставаме по-големи с всеки изминал ден. Е все пак сме отскоро в бранша само 7 години, но ще се справим…
Иво, кога ще почваме работа по-новия плъгин? Айде, че нямам търпение :)))
Тъкмо по този въпрос говорим с Евгени. Имаме да изкоментираме някой от нещата и с колегите от чужбина. Съвсем скоро ще пуснем първата версия 🙂
Еххх, ама кога ще се научим да тестваме и проверяваме за грешки преди да развяваме байрака?
Който е безгрешен нека вдигне ръка. Би ли бил малко по-конретен за какво говориш? Може ли да те попитам също и защо пишеш анонимни коментари – притеснява ли те нещо? Преди време ми беше дал много добър съвет за facebook коментарите, но така и не разбрах на кой благодаря за този съвет.
за Thesis темата този код имаш ли идея къде би следвало да се постави?
Всички теми имат header.php независимо дали са през framework писани, като тези на Thesis. Така, че намираш си header.php-то и дерзаеш.
ахам разбрах, много ти благодаря Евгени за инфото!
Не съм я ползвал, но тук има работещо решение: http://designpx.net/thesis/facebook-open-graph-protocol-meta-tags/
супер си, много ти благодаря за линка!
Аз имам модификация, по показания от теб код. Нещо против да направим допълнение към статията, че да не пускам цяла статия при мен?
Наистина полезно и важно за добър linkbait
Отлична модификация, Евгени, благодаря ти, че сподели и можем заедно да оптимизираме кода. По-горе сложих ъпдейт, но защото вчера не успяхме да довършим разговора, надявам се днес да успеем 🙂 А може и накрая да оформим всички WordPress+Facebook интеграции в един общ плъгин, колко му е 🙂
Николко, ако питаш мен 🙂
Много добра идея!
Аз лично много бих оценил оформянето на така споменатите промени в плъгин. WordPress има доста жив release cycle и нанасянето на едни и същи промени отново и отново ще е проблемно и трудоемко.
Все пак – страхотна работа и благодаря!