Динамические изображения для социальных сетей

Чтобы привлечь внимание к записям или твитам, необходимо добавить к ним картинки. Согласно исследованиям, наличие картинки в опубликованном посте повышает его привлекательность на 35%-150%. Так что при добавлении содержимого на веб-сайт, следует убедиться, что в нем используются подходящие для социальных сетей картинки.

Добавление картинок для размещения в социальных сетях

Процесс публикации в социальных сетях заключается в добавлении метатега к заголовку страницы с указанием адреса нужного картинки. Когда ссылка на содержимое веб-сайта добавляется в запись, социальная сеть использует указанное изображение.

<meta property="og:image" content="https://example.com/my_image.jpg">

Но что делать, если у вас нет таких картинок? С такой ситуацией мы столкнулись, когда хотели добавлять картинки к твитам с анонсами о выходе новых статей. При этом у нас были фотографии авторов.

В результате мы разработали шаблон, который использовал фотографию автора вместе с цитатой из статьи.

Динамические картинки для социальных сетей

Пример картинки, созданного вручную.

Каждый день мы выбирали цитату из статьи, и вручную изображение для загрузки на веб-сайт. Результаты были великолепны. Но весь процесс был слишком трудоемким.

Разработка нового плана

Для оптимизации процесса я составил следующий план:

  1. Создать CSS для расположения компонента, который можно превратить в изображение.
  2. Добавить в CMS новое поле ввода к статьям для размещения выбранной цитаты.
  3. Создать в CMS новый макет страницы, предназначенный для динамического вывода имени автора и цитаты для любой статьи.
  4. Создание скриншота картинки для публикации.

Создание страницы

Сначала необходимо было разобраться с базовым HTML и CSS. В коде используется контейнер размером 600 × 315px. Это сделано для обеспечения правильного соотношения сторон картинки в Facebook.

Наша CMS может выводить содержимое, используя любое число шаблонов. Так что я создал упрощенную версию шаблона статьи. Она включала в себя только информацию об авторе и цитату, а также специально подготовленную разметку.

Я также добавил в CMS новое поле ввода для цитаты, приведенной в статье, чтобы каждое изображение можно было быстро и запросто изменить.

Динамические картинки для социальных сетей

Я добавил новое поле ввода к шаблону статьи.

В результате мы добились, чтобы для твита использовалось изображение из CMS.

Динамические картинки для социальных сетей

Автоматом сгенерированный макет непосредственно из CMS

Вскоре стало ясно, что «Шаг 4» будет довольно сложным. Я могу создать небольшую страницу на веб-сайте, которая выглядит как изображение. Но как превратить ее в единое целое?

Можно сделать скриншот вручную, но это возвращение к старой проблеме. Как автоматически сделать скриншот?

Введение Puppeteer

Puppeteer – это библиотека, созданная на основе Node.js. Она предоставляет хороший API для версии Google Chrome, которая запускается из командной строки. При этом программа ничего не прорисовывает в окне пользовательского интерфейса.

Такой Chrome можно легко использовать для рендеринга страниц и создания их скриншотов. Именно здесь на помощь приходит Puppeteer. С ее помощь я могу написать небольшой скрипт, который будет многократно превращать URL-адрес в изображение.

Сначала вы устанавливаете Puppeteer. После чего библиотека сама загружает совместимый консольный браузер. Для этого в командной строке набираем:

npm i puppeteer

Далее сохраняем новый файл как example.js и размещаем в нем следующий программный код:

const puppeteer = require('puppeteer');(async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://example.com'); await page.screenshot({path: 'example.png'}); await browser.close();})();

Далее запускаем этот файл, используя Node:

node example.js

После этого файл изображения example.png будет выведен на ресурс, который включает его скриншот. В данном случае https://example.com. Логика кода довольно проста:

  1. Запустить браузер.
  2. Открыть новую страницу.
  3. Перейти по URL адресу.
  4. Сделать скриншот.
  5. Закрыть браузер.

Функцию async и ключевое слово await заставляют скрипт сделать паузу и ожидать возвращения нормального асинхронного кода для продолжения. Это необходимо для загрузки веб-страницы. Задача заключается в том, чтобы заставить асинхронный программный код работать как синхронный. Если вам интересно, то можете легко подробно ознакомиться с async и await на MDN.

Сейчас я могу сделать скриншот URL-адреса. Но что произойдет, если я вставлю сюда URL моей новой специальной страницы?

Динамические картинки для социальных сетей

Содержимое находится в углу картинки, при этом много свободного места.

Но Puppeteer делает скриншот с разрешением 800 × 600. Так что нужно выяснить, как изменить изображение. К счастью, я довольно быстро нашел такой метод — page.setViewport().

const puppeteer = require('puppeteer');(async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://24ways.org/2018/clip-paths-know-no-bounds/sharing'); await page.setViewport({ width: 600, height: 315 }); await page.screenshot({path: 'example.png'}); await browser.close();})();

Это сработало. Сейчас разрешение скриншота составляет 600 × 315. Но стоило бы повысить качество получаемого картинки.

В документации я обнаружил настройка deviceScaleFactor, который можно передать в page.setViewport(). Установив значение на 2, мы получим изображение той же области экрана, но с большим числом пикселей.

 await page.setViewport({ width: 600,  height: 315,    deviceScaleFactor: 2  });

Сейчас у нас есть программный метод превращения URL-адреса в изображение.

Улучшаем скрипт

Создадим скрипт, который можно запустить с URL-адресом в виде аргумента и заставить его выдать изображение для данной страницы. Благодаря данному мы сможем автоматизировать создания картинки. Наша цель заключается в вызове следующего скрипта:

node shoot-sharing-image.js https://24ways.org/2018/clip-paths-know-no-bounds/

Также я хочу, чтобы изображение выводилось с именем clip-paths-know-no-bounds.png. Для этого надо, чтобы скрипт находил аргументы команд, а далее разбивал URL для извлечения slug.

// Приобрести URL-адрес и slug-сегмент const url = process.argv[2];const segments = url.split('/');// Приобрести предпоследний сегмент(slug)const slug = segments[segments.length-2];

Мы можем использовать данные переменные, не забывая при этом добавить sharing в конце URL-адреса, чтобы приобрести специальную страницу.

(async() => {  const browser = await puppeteer.launch();  const page = await browser.newPage();  await page.goto(url + 'sharing');  await page.setViewport({    width: 600,    height: 315,    deviceScaleFactor: 2  });  await page.screenshot({path: slug + '.png'});  await browser.close();})();

После генерации картинки при помощи Node.js его можно перенести в нужное место на веб-сайте.

Также можно оптимизировать файл. Чтобы уменьшить размер файла, я использовал imagemin вместе с pngquant.

const imagemin = require('imagemin');const imageminPngquant = require('imagemin-pngquant');await imagemin([slug + '.png'], 'build', {  plugins: [    imageminPngquant({quality: '75-90'})  ]});

Вот тут можно без проблем посмотреть готовый пример.

Взаимодействие с CMS

Я запускал данный скрипт вручную. Он добавляет файл в репозиторий Git и передает его для удаленной загрузки на сервер.

Проявив изобретательности, собственные шаблоны CMS и Puppeteer, мы получили надежный метод динамического создания картинок для анонсов статей веб-сайта в социальных сетях.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *