Qudrat Qodirov

Бесплатный Instagram виджет для сайта

Недавно мне потребовалось интегрировать в сайт Instagram виджет. Чтобы пользователи видели последние опубликованные фотографии. Может даже подписывались.

Тут же выяснилось, что официального виджета у Instagram нет. Более того, с Instagram можно взаимодействовать исключительно через запросы к API. Никаких тебе JavaScript библиотек, генераторов кода и дизайна. Всё нужно делать руками.

Сразу нашлось множество сторонних сервисов разной степени платности и бесплатности. Объединяло их одно – клиент получает лишь код вызова виджета, всё остальное тянется с сервиса. Меня лично это не устраивало. Почему нет бесплатного standalone решения с открытым исходным кодом? Может быть я плохо искал? В общем, я решил внести свои пять копеек.

Инструкция по созданию виджета и готовое решение под катом.

Небольшое примечание. С момента написания этой статьи прошло уже семь месяцев. За это время виджет был установлен на около 80 ресурсах, создан репозиторий на GitHub, добрый человек подарил мне инвайт, виджет сменил механизм кэширования, обзавёлся собственным сайтом, добрые люди на его основе сделали плагин для CMS Битрикс, а я так и не нашёл аналогов в сети.

1. Требования к виджету:

Для начала сформулирую, что за виджет я хотел сделать.
Итак, виджет должен иметь:

  • Иконку Instagram;
  • Заголовок;
  • Фотографию профиля;
  • Статистику профиля;
  • Кнопку перехода к странице профиля;
  • Кликабельные фотографии;
  • Настраиваемое количество фотографий (общее количество и сколько выводить в строку);
  • Резиновый дизайн и автомаштаб фотографий в зависимости от нужной ширины виджета;
  • Вывод фотографий по хэш-тегу (добавилось в процессе);
  • Вставка виджета одной строчкой в HTML-код.

 

Установка виджета на сайт:

1. Загрузите исходный код виджета в корень вашего сайта:

Для этого скачайте архив с исходным кодом виджета. Извлеките папку /inwidget из архива. Загрузите папку /inwidget в корень вашего сайта со всеми файлами внутри.

СКАЧАТЬ ВИДЖЕТ >

Или используйте composer

composer.phar require aik27/inwidget

composer require aik27/inwidgetПримечание. Виджет использует относительные пути, поэтому вы можете загрузить его в любую папку, если у вас нет доступа к корню сайта. Не забудьте при этом изменить путь в IFRAME.

2. Установите права на запись для папки /inwidget/cache:

В папке /inwidget/cache виджет будет хранить кэшированные данные.
Если для директории будут отсутствовать права на запись, вы увидите ошибку ERROR #101.

3. Настройте виджет:

Отредактируйте файл /inwidget/config.php
Вам потребуется указать логин в Instgram и другие параметры.

Список параметров:

  • LOGIN – логин аккаунта в инстаграм из которого будут транслироваться фотографии.
  • HASHTAG – хэш-теги через запятую (например: girl, man). Если вы хотите транслировать фотографии других пользователей, либо вывести фотографии с очень специфичным тегом, используйте эту опцию. Выборка фотографий будет производиться со всего мира в порядке того, как фотографии были отмечены искомым тегом. Обратите внимание, что тулбар с аватаркой и статистикой будет автоматически скрыт.
  • ACCESS_TOKEN – хэш-ключ выданный приложением, которому вы разрешили доступ к своему профилю.
    Поле НЕ является обязательным. Если вы заполните его, то запросы начнут отправляться через endpoints API (https://www.instagram.com/developer/). При этом, виджет будет обладать только теми правами и лимитами на выборку данных, которыми обладает само приложение. О том, как самостоятельно получить токен смотрите здесь.
  • authLogin и authPassword – логин и пароль от любого аккаунта для авторизации. Поля НЕ являются обязательными.Авторизация необходима для альтернативных способов получения данных в случае выхода из строя основных. Советую завести для этого отдельный аккаунт с отключенной двухшаговой аутентификацией. Данные авторизации не передаются третьим лицам, в том числе автору виджета.
  • tagsBannedLogins – логины заблокированных пользователей через запятую (например: mark18, kitty45). Фотографии перечисленных пользователей не будут выводиться в виджете при использовании поиска по хештегам.
  • tagsFromAccountOnly – искать фотографии с тегами только в аккаунте пользователя [ true / false ]. Виджету придётся сначала получить фотографии из вашего профиля, а затем перебором искать снимки с тегами, перечисленными в опции HASHTAG. Чтобы поиск был более результативным рекомендуется увеличить значение опции imgCount.
  • imgRandom – выводить фотографии в случайном порядке [ true / false ]
  • imgCount – сколько фотографий запрашивать из Instagram. Влияет на размер кэша.
  • cacheExpiration – через сколько часов обновлять кэш.
  • cacheSkip – не использовать кэш [ true / false ]. Если присвоить true, то кэш будет проигнорирован и запросы к API будут отправляться при каждой загрузке виджета. Используйте эту опцию только для отладки.
  • cachePath – путь к директории с кэш файлами
  • skinDefault – скин виджета по умолчанию [default / modern-blue / modern-green / modern-red / modern-orange / modern-grey / modern-black / modern-violet / modern-yellow]
  • skinPath – путь к деректории со скинами
  • langDefault – язык виджета по умолчанию [ ru / en / ua ]
  • langAuto – автоматически определять язык пользователя [ true / false ]
  • langPath – путь к деректории с локализациями
Внимание! Если после первичной настройки вы решите изменить LOGIN, HASHTAG или tagsBannedLogins,
изменения вступят в силу только после удаления файла с кэшем или после того, как кэш устареет.

4. Вставьте виджет в сайт с помощью следующего кода:

<!-- По умолчанию --> <iframe src='/inwidget/index.php' scrolling='no' frameborder='no' style='border:none;width:260px;height:330px;overflow:hidden;'></iframe>

Ещё примеры вставки с различным отображением виджета:

<! Без профиля >

<iframe src='/inwidget/index.php?toolbar=false' data-inwidget scrolling='no' frameborder='no' style='border:none;width:260px;height:320px;overflow:hidden;'></iframe>

<!— Мини 1 —>

<iframe src='/inwidget/index.php?width=100&inline=2&view=12&toolbar=false' data-inwidget scrolling='no' frameborder='no' style='border:none;width:100px;height:320px;overflow:hidden;'></iframe>

<!— Мини 2 —>

<iframe src='/inwidget/index.php?width=100&inline=1&view=3&toolbar=false' data-inwidget scrolling='no' frameborder='no' style='border:none;width:100px;height:320px;overflow:hidden;'></iframe>

<!— Горизонтальная ориентация —>

<iframe src='/inwidget/index.php?width=800&inline=7&view=14&toolbar=false' data-inwidget scrolling='no' frameborder='no' style='border:none;width:800px;height:295px;overflow:hidden;'></iframe>

<!— Крупные preview —>

<iframe src='/inwidget/index.php?width=800&inline=3&view=9&toolbar=false&preview=large' data-inwidget scrolling='no' frameborder='no' style='border:none;width:800px;height:850px;overflow:hidden;'></iframe>

 

Точная настройка отображения виджета:

Параметры передаются как GET переменные при обращении к скрипту виджета.
К примеру, чтобы уставить ширину виджета 600px и вывести в строку пять фотографий, нужно добавить соотвествующие параметры в URL к скрипту. Т.е.:/inwidget/index.php?width=600&inline=5Список параметров:

  • width – ширина виджета (по умолчанию 260px).
  • inline – количество фотографий в строке (по умолчанию 4 шт.).
  • view – сколько фотографий отображать в виджете (по умолчанию 12 шт., максимально 30 шт., можно исправить в config.php).
  • toolbar – отобразить тулбар с аватаркой и статистикой (значения true/false, по умолчанию true).
  • preview – размер и качество изображений (small – маленькие до 320px, large – большие до 640px, fullsize – полноразмерые, по умолчанию стоит large)
  • lang – язык виджета (значения ru / en, по умолчанию берутся настройки из config.php). Приоритет этого параметра выше чем для настроек в config.php.
  • skin – скин виджета (значения default / modern-blue / modern-green / modern-red / modern-orange / modern-grey / modern-black / modern-violet / modern-yellow). По умолчанию default. Приоритет этого параметра выше чем для настроек в config.php.
  • adaptive — адаптивный режим (значения true / false, по умолчанию false). Виджет будет автоматически подстраиваться под размеры блока или окна браузера.

Как сделать виджет адаптивным?:

Добавьте GET переменную «adaptive» при обращении к скрипту виджета. Пример:/inwidget/index.php?adaptive=trueПеременной необходимо присвоить значение true. После этого виджет будет автоматически подстраиваться под размеры блока или окна браузера. При этом GET параметр width будет проигнорирован. Параметр inline будет иметь эффект при ширине виджета более 400px. Ширина iframe увеличится до 100%, а высота подстроится под содержимое блока независимо от того, что вы изначально прописали в стилях iframe.

Открыть демонстрацию в новом окне >

Важно! Если вы используете старый код вставки iframe ( < 1.1.4 ), то вам необходимо прописать тегу атрибут data-inwidget или использовать новый код из инструкции, иначе размеры iframe не будут меняться автоматически. И вам придётся самостоятельно указать длину блока и заботиться о его высоте.

Возможность актуальна для версии >= 1.1.4

Видеоинструкция по получению ACCESS TOKEN:

Виджет может работать с двумя видами API (недокументированное и endpoints). По умолчанию используется недокументированное. Для его работы токен не требуется. Указание ACCESS TOKEN в настройках виджета переводит его на режим работы с Endpoints API (https://www.instagram.com/developer/). Если вы хотите создать собственное приложение в Instagram, то воспользуйтесь видеоинструкцией ниже. Имейте ввиду, что ваше приложение сначала попадёт в «песочницу» со следующими лимитами: 20 – максимальное количество фотографий, которое можно получить в запросе. 500 – максимальное количество запросов в час. И самое главное — фотографии можно получить только из своего аккаунта. Тоже самое касается выборки по тегам.

Имейте ввиду, что Instagram объявил о прекращении поддержки endpoints API к 2020 году. Узнать подробнее >

 

Зарегистрировать собственное приложение можно здесь:

https://www.instagram.com/developer/

URL для генерации ACCESS TOKEN:

https://www.instagram.com/oauth/authorize/?client_id=ВАШ_CLIENT_ID&redirect_uri=ВАШ_URL_АВТОРИЗАЦИИ&response_type=token&scope=basic

Разработчикам плагинов и приложений:

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

По умолчанию используется недокументированное API с помощью библиотеки instagram-php-scraper.
Для переключения на endpoint API нужно указать ACCESS_TOKEN в config.php или аргументах конструктора.

 

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

Возможность актуальна для версии >= 1.1.9

Коды ошибок:

ERROR #101 – не удаётся получить доступ к файлу с кэшем. Нужно изменить права на директорию /inwidget/cacheЕсли файл не существует, виджет пытается создать его. Если файл существует, виджет пытается открыть его на чтение и запись. Отсутствие прав на чтение или запись файлов в директорию /inwidget/cache вызовет ошибку. Если до изменения прав на директорию в ней уже был файл с кэшем, просто удалите его, т.к. на него также установлены некорректные права.
ERROR #102 – не удаётся получить время последнего изменения файла.Возможно, данная функция ограниченна или не поддерживается файловой системой вашего сервера. Для того, чтобы определить, актуален ли ещё кэш, виджет использует время последнего изменения файла в папке /inwidget/cache. Если не удаётся определить время, кэш всегда будет неактуальным, что приведёт к постоянным запросам к API Instagram.

ERROR #500 – неизвестная ошибка.Для выяснения деталей смотрите, что было записано в кэш. Данная ошибка сгенерированна официальным API, либо библиотекой instagram-php-scraper. В большинстве случаев означает проблемы при отправке или получении данных запроса от сервера Instagram. Чтобы виджет попытался отправить запрос ещё раз, удалите файл с кэшем и обновите страницу на которой выводится виджет.

 

Вот, собственно, и всё.

Источник: https://habr.com/post/223739/

Сайт виджета: http://inwidget.ru
Репозиторий на GitHub: https://github.com/aik27/inwidget

Обсуждение закрыто.