Ви задумувалися, яка картинка прикріплюється до посилання, коли відвідувач поширює допис з вашого сайту в соцмережі? Іноді, звичайно ж, можна пролистати і вибрати з кількох пропонованих зображень, а іноді немає такої можливості. Іноді підвантажується перша-ліпша картинка, а це може бути і логотип, і смайлик, і картинка лічильника.

Звичайно, власника сайту такий варіант не влаштовує. Власник сайту хоче, щоб до розшарюваного допису підвантажувалось правильне зображення, формувався правильний заголовок і підтягувався правильний опис. Як це зробити? Для цього й існує протокол Open Graph.

Open Graph – протокол мікророзмітки контенту сторінки для відправки вмісту в соціальні мережі. Іншими словами, ми самі визначаємо, той контент, який буде відправлено користувачами в соціальні мережі.

 

Наприклад, при поширюванні цієї статті в соцмережі повинні передаватися такі дані:

og:site_name — назва сайту (наприклад, "Блог Влада Циганика")
og:type — тип контенту (наприклад, article, movie, product та ін.)
og:title — заголовок статті
og:image — посилання на картинку до статті
og:description — короткий опис (максимум 250 символів)
og:url — посилання на статтю

 

Все це прописується в секції <head> сайту. Ось так:

<meta property="og:site_name" content="Блог Влада Циганика" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Мікророзмітка Open Graph для DLE" />
<meta property="og:image" content="http://404.in.ua/wp-content/uploads/2015/03/facebook-open-graph-error.png" />
<meta property="og:description" content="Ви задумувалися, яка картинка прикріплюється до посилання, коли ..." />
<meta property="og:url" content="http://404.in.ua/2015/03/open-graph-dle/" />

 

Ніби все зрозуміло.
Як же тепер все це організувати для сайту, що працює на DLE (DataLife Engine)?
Не так вже й важко.

Open Graph розмітка повної новини сайту на DLE

Відкриваєм файл /index.php і шукаємо там рядок:

 $tpl->set ( '{headers}', $metatags."\n".$js_array );

 

Міняємо його на:

 $tpl->set ( '{headers}', $metatags . $opg ."\n". $js_array);

 

Відкриваєм файл /engine/modules/show.full.php і шукаємо там рядок:

 $tpl->set( '{full-link}', $full_link );

 

Після нього вставляємо:

$opg = < <<HTML
 <meta property="fb:admins" content="адреса сторінки facebook"/>
 <meta property="og:type" content="article" />
 <meta property="og:url" content="$full_link" />
 <meta property="og:title" content="{$row&#91;'title'&#93;}" />
 <meta property="og:site_name" content="Назва вашого сайту" />
 HTML;

 

Далі, в цьому ж файлі шукаємо рядок:

 if ($row['metatitle']) $metatags['header_title'] = $row['metatitle'];

 

Після нього вставляємо:

 $opg .= "\n <meta property=\"og:description\" content=\"{$metatags&#91;'description'&#93;}\" />";

 

Далі, в цьому ж файлі шукаємо рядок:

 $row['full_story'] = stripslashes($row['full_story']);

 

Після нього вставляємо:

preg_match_all('/<img &#91;^/>]*src=["\\\']?([^"\\\' >]+\\.(jpeg|jpg|png|gif))["\\\']?\\s*[^>]*>/si', $row['full_story'], $images);

foreach($images[1] as $key => $value) {
 $control = strstr($value, 'posts');
 $control = substr($control, 0, strpos($control, '/'));

if ($control == 'posts') {
 $opengraph .= "\r\n" . ' <meta property="og:image" content="'. $value .'" />';
 $opengraph .= "\r\n" . ' <link rel="image_src" href="'. $value .'" />';
 if ($key == 4) break;
 }
 }

unset($images, $key, $value, $control);

В останньому коді здійснюється перевірка всіх зображень, які є на сторінці даної повної новини (лого, картинки, смайлики, банери…) і вибираються лише ті з них, які розміщені в папці “posts”, а ми ж знаємо що власне туди завантажуються зображення до новин.

Також, щоб не перевантажувати <head> зайвими тегами, якщо картинок надто багато, то тут встановлено обмеження в 5 зображень. Четвірка означає, що будуть виводитися теги з адресами перших 5 зображень (0,1,2,3,4). Навіть, якщо зображень буде 20, то все одно формуватимуться метатеги з адресами перших п’яти картинок.

 

Ну от і все.
Залишилося лише у файлі /templates/назва_вашого_шаблону/main.tpl замінити <head> на:

 <head &#91;aviable=showfull&#93; prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"&#91;/aviable&#93;>

щоб це все запрацювало. Ну ось, тепер все!

Вам також буде цікаво: