{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Блог об аналитике, визуализации данных, data science и BI, заметки с тегом: эгея", "home_page_url": "http:\/\/test.leftjoin.ru\/tags\/egeya\/", "feed_url": "http:\/\/test.leftjoin.ru\/tags\/egeya\/json\/", "icon": "http:\/\/test.leftjoin.ru\/user\/userpic@2x.jpg", "author": { "name": "Николай Валиотти", "url": "http:\/\/test.leftjoin.ru\/", "avatar": "http:\/\/test.leftjoin.ru\/user\/userpic@2x.jpg" }, "items": [ { "id": "98", "url": "http:\/\/test.leftjoin.ru\/all\/open-graph-image\/", "title": "Генерация Open Graph Image в Эгее", "content_html": "

Протокол Open Graph нужен, чтобы управлять представлением контента сайта в социальных сетях. По сути — это набор тегов, позволяющий задать то, как будет отображаться информация о сайте на других площадках. В том числе можно указать картинку, которая будет отображаться в постах. Сегодня мы посмотрим, как для блога на Эгее доработать Open Graph разметку и заострим внимание на Open Graph Image — мы сделаем так, чтобы для каждого поста генерировалась своя картинка с наименованием материала.<\/p>\n

\n\"\"\n<\/div>\n

Подготовка<\/h2>\n

Перед настройкой тегов протокола Open Graph сделаем скрипт, который генерирует изображения. В результате картинка представляет собой фон и два текста: время чтения и название материала, поэтому мы заранее подготовили такое фоновое изображение для ВКонтакте:<\/p>\n

\n\"\"\n<\/div>\n

Подробнее об оформлении сниппетов для ВКонтакте можно почитать в документации<\/a><\/p>\n

У социальных сетей разные требования по размеру изображений: ВКонтакте, например, рекомендует 510×228 пикселей. В корне сайта создадим папку og-image-files. Перейдём в неё, положим туда подготовленное фоновое изображение и создадим ещё одну папку внутри под названием og-fonts для шрифтов на изображении.<\/p>\n

Написание скрипта для генерации изображения<\/h2>\n

Скрипт будем писать на php. Так как он генерирует картинку с пользовательским текстом, мы реализуем поддержку параметров, переданных в ссылке. Создаём в директории og-image-files файл og-image.php и открываем его. Весь код, написанный на php нужно заключить в тег <?php … >. Первым делом опишем функцию, которая откроет фоновое изображение. Пробуем открыть изображение и вернуть его. Если не удалось — создаём пустое белое и выводим сообщение об ошибке на нём.<\/p>\n


\nФункция загрузки изображения<\/span><\/summary><\/p>\n
<?php\r\nfunction LoadPNG($imgname)\r\n{\r\n   $im = @imagecreatefrompng($imgname);\r\n\r\n   if(!$im)\r\n   {\r\n       $im  = imagecreatetruecolor(150, 30);\r\n       $bgc = imagecolorallocate($im, 255, 255, 255);\r\n       $tc  = imagecolorallocate($im, 0, 0, 0);\r\n\r\n       imagefilledrectangle($im, 0, 0, 150, 30, $bgc);\r\n\r\n       imagestring($im, 1, 5, 5, 'Ошибка загрузки ' . $imgname, $tc);\r\n   }\r\n\r\n   return $im;\r\n}<\/code><\/pre>
<\/details><\/p>\n
Следом опишем другую функцию: она будет помещать текст на картинку, автоматически расставляя переносы строки. Она принимает картинку, размер текста, угол наклона, отступ слева и сверху, цвет текста, шрифт, сам текст и максимальную ширину. Внутри строка делится на массив слов, считаются все необходимые значения ширины текста, а затем в цикле for элементы массива помещаются на изображение.<\/p>\n

\nФункция загрузки изображения<\/span><\/summary><\/p>\n
function imagettftextjustified(&$image, $size, $angle, $left, $top, $color, $font, $text, $max_width, $minspacing = 3, $linespacing = 1)\r\n{\r\n   $wordwidth = array();\r\n   $linewidth = array();\r\n   $linewordcount = array();\r\n   $largest_line_height = 0;\r\n   $lineno = 0;\r\n   $words = explode(" ", $text);\r\n   $wln = 0;\r\n   $linewidth[$lineno] = 0;\r\n   $linewordcount[$lineno] = 0;\r\n   foreach ($words as $word)\r\n   {\r\n       $dimensions = imagettfbbox($size, $angle, $font, $word);\r\n       $line_width = $dimensions[2] - $dimensions[0];\r\n       $line_height = $dimensions[1] - $dimensions[7];\r\n       if ($line_height > $largest_line_height) $largest_line_height = $line_height;\r\n       if (($linewidth[$lineno] + $line_width + $minspacing) > $max_width)\r\n       {\r\n           $lineno++;\r\n           $linewidth[$lineno] = 0;\r\n           $linewordcount[$lineno] = 0;\r\n           $wln = 0;\r\n       }\r\n       $linewidth[$lineno] += $line_width + $minspacing;\r\n       $wordwidth[$lineno][$wln] = $line_width;\r\n       $wordtext[$lineno][$wln] = $word;\r\n       $linewordcount[$lineno]++;\r\n       $wln++;\r\n   }\r\n   for ($ln = 0;$ln <= $lineno;$ln++)\r\n   {\r\n       $slack = $max_width - $linewidth[$ln];\r\n       if (($linewordcount[$ln] > 1) && ($ln != $lineno)) $spacing = ($slack \/ ($linewordcount[$ln] - 1));\r\n       else $spacing = $minspacing;\r\n       $x = 0;\r\n       for ($w = 0;$w < $linewordcount[$ln];$w++)\r\n       {\r\n           imagettftext($image, $size, $angle, $left + intval($x) , $top + $largest_line_height + ($largest_line_height * $ln * $linespacing) , $color, $font, $wordtext[$ln][$w]);\r\n           $x += $wordwidth[$ln][$w] + 20; \/\/+ $spacing + $minspacing;\r\n       }\r\n   }\r\n   return true;\r\n}<\/code><\/pre>
<\/details><\/p>\n
Теперь основная часть: так как при переходе на страницу со скриптом должна отображаться исключительно картинка формата png, указываем Content-Type как image\/png. Затем читаем изображение и получаем первый параметр social_network — он пригодится, если вы хотите в зависимости от социальной сети вставлять разные фоновые изображения. Загружаем картинку и получаем второй параметр — text. Все пробелы будут переформатированы в «%20», поэтому методом str_replace возвращаем всё обратно. Время чтения — параметр time_for_read, а time_ending — слово, которое нужно подставить после числа минут. Далее загружаем нужные шрифты.<\/p>\n
Так как параметры принимаются через ссылку, в теории, туда можно передать любой SQL-запрос — это называется SQL-инъекцией. Такую брешь можно устранить, если все числовые переменные ещё раз перевести в числовые типы данных, а в строках экранировать кавычки: для этого есть функция mysql_escape_string(). А ещё в строку могут передать HTML-теги — для удаления тегов можно воспользоваться функцией strip_tags().<\/p>\n
Функция mysql_escape_string() ещё работает в php5, но была удалена в php7. Подробнее об альтернативах можно почитать в документации<\/a><\/p>\n
header('Content-Type: image\/png');\r\n\r\n$social_network = $_GET['social_network'];\r\n$social_network = mysql_escape_string(strip_tags($social_network));\r\n\r\n$img = LoadPNG('og-image-vk.png');\r\n$text = $_GET['text'];\r\n$text = mysql_escape_string(strip_tags($text));\r\nstr_replace('%20', ' ', $text);\r\n$time_for_read = $_GET['time_for_read'];\r\n$time_for_read = intval($time_for_read);\r\n$time_ending = $_GET['time_ending'];\r\n$time_ending = mysql_escape_string(strip_tags($time_ending));\r\n$tahoma_bold_font_path = '\/og-fonts\/Tahoma-Bold.ttf';\r\n$tahoma_regular_font_path = '\/og-fonts\/Tahoma-Regular.ttf';\r\n$prosto_font_path = '\/og-fonts\/ProstoOne-Regular.ttf';<\/code><\/pre>
Задаём нужные цвета для текста и подставляем текст на изображение. Функцией imagepng выводим изображение, а затем его удаляем для освобождения памяти.<\/p>\n
$white_color = imagecolorallocate($img, 255, 255, 255);\r\n$mentol_color = imagecolorallocate($img, 135, 244, 191);\r\nimagettftextjustified($img, 45, 0, 55, 200, $white_color, $prosto_font_path, $text, 1000, 10, 1.2);\r\nimagettftextjustified($img, 15, 0, 110, 63, $mentol_color, $prosto_font_path, "Время чтения – ".$time_for_read." ".$time_ending, 1000, 10, 1);\r\nimagepng($img);\r\nimagedestroy($img);\r\n?><\/code><\/pre>
После размещения скрипта на сайте можно сразу протестировать его работу: так как наш лежит на сайте leftjoin.ru в директории og-image-files, можно пройти по ссылке leftjoin.ru\/og-image-files\/og-image.php и увидеть следующее изображение:<\/p>\n
\n\"\"\n<\/div>\n
Оно пустое, так как мы не передали параметров. Они передаются непосредственно в ссылку. Например, передача текста и наименования социальной сети выглядит так:<\/p>\n
http:\/\/test.leftjoin.ru\/og-image-files\/og-image.php?text=Hello%20world&social_network=vk<\/code><\/pre>
\n\"\"\n<\/div>\n
Настраиваем теги протокола Open Graph<\/h2>\n
Откроем файл с тегом <header> сайта. В случае Эгеи это system\/theme\/templates\/head.tmpl.php. Кое-какие теги предварительно размечены: например, в цикле все изображения отмечаются как og-image, что позволяет при публикации материала в социальных сетях выбирать из карусели картинку для сниппета.<\/p>\n
А мы структурируем все теги и собираем вместе под комментарием «OPEN GRAPH PROTOCOL». В Эгее все нужные данные по каждой статье уже лежат в переменных, например, заголовок материала лежит в $content[’title’], а краткое описание страницы можно получить функцией array_keys(content). Главное для нас — добавить такую строку:<\/p>\n
<meta property="og:image" content='http:\/\/test.leftjoin.ru\/og-image-files\/og-image.php?text=<?=urlencode($content['title'])?>&time_for_read=<?=urlencode($time_for_read)?>&time_ending=<?=urlencode($time_ending)?>' \/><\/code><\/pre>
Она задаёт тег og-image и принимает в content изображение. Туда мы подставляем ссылку на скрипт со всеми параметрами-переменными, обработав их функцией urlencode — она и заменяет все пробелы на «%20». Если ей не воспользоваться, то текст на изображениях в социальных сетях вроде ВКонтакте, Facebook, Twitter и даже в мессенджере Telegram будет отображаться нормально, а вот в Slack вместо пробелов останутся символы «%20», даже с учётом их обработки в скрипте ранее. Должен получиться похожий блок:<\/p>\n
<!-- OPEN GRAPH PROTOCOL-->\r\n<meta name="og:description" content="<?array_keys(content)?>" \/>\r\n<meta property="og:image" content='http:\/\/test.leftjoin.ru\/og-image-files\/og-image.php?text=<?=urlencode($content['title'])?>&time_for_read=<?=urlencode($time_for_read)?>&time_ending=<?=urlencode($time_ending)?>' \/>\r\n<?php foreach ($content['og-images'] as $image): ?>\r\n<meta property="og:image" content="<?=$image?>"\/>\r\n<?php endforeach ?>\r\n<meta property="og:image:type" content="image\/png" \/>\r\n<meta name="vk:image" content='http:\/\/test.leftjoin.ru\/og-image-files\/og-image.php?text=<?=urlencode($content['title'])?>&time_for_read=<?=urlencode($time_for_read)?>&time_ending=<?=urlencode($time_ending)?>&social_network=vk' >\r\n<meta name="twitter:card" content="summary_large_image">\r\n<meta property="twitter:image" content='http:\/\/test.leftjoin.ru\/og-image-files\/og-image.php?text=<?=urlencode($content['title'])?>&time_for_read=<?=urlencode($time_for_read)?>&time_ending=<?=urlencode($time_ending)?>' \/>\r\n<meta name="viewport" content="<?= $content['meta-viewport'] ?>">\r\n<title><?= $content['title'] ?><\/title>\r\n<meta name="og:title" content="<?= $content['title'] ?>" \/>\r\n<meta property='og:type' content="article" \/>\r\n<meta name="og:url" content="<?= $content['current-href'] ?>" \/><\/code><\/pre>
В результате мы написали скрипт, который генерирует изображение с текстом-параметром прямо на сайте, а затем вызвали этот скрипт в тегах протокола Open Graph. В качестве доработки можно добавить изображения разных размеров и генерировать картинку в зависимости от социальной сети. Теги тоже могут отличаться — изображение для ВКонтакте вставляется в тег <vk:image>, а для Twitter — <twitter:image>. В примере выше указано правильное использование этих тегов.<\/p>\n",
            "date_published": "2021-02-24T14:53:54+03:00",
            "date_modified": "2021-02-24T17:24:38+03:00",
            "image": "http:\/\/test.leftjoin.ru\/pictures\/1-25.png",
            "_date_published_rfc2822": "Wed, 24 Feb 2021 14:53:54 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "98",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "http:\/\/test.leftjoin.ru\/pictures\/1-25.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/2-23.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/3@2x.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/4@2x.png"
                ]
            }
        }
    ],
    "_e2_version": 3365,
    "_e2_ua_string": "E2 (v3365; Aegea)"
}