Instagram виджет

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

Транслируйте ваши фотографии из Instagram.com прямо на вашем сайте.

Особености:

  • Множество настроек 
  • Прямые ссылки на фотографии 
  • Кнопка перехода к странице профиля 
  • Фотография профиля 
  • Статистика профиля 
  • Вывод фотографий по хэш-тегу 
  • Вставка виджета одной строкой в HTML 
  • Автоопределение языка 
  • Без рекламы 
  • Для любого использования 
  • Открытый исходный код 
  • Подробная инструкция 
 
Внимание! Все, кто устанавил виджет до 01 июня 2016 года столкнутся с тем, что виджет перестанет работать. Нужно заново сгенерировать ACCESS TOKEN. Подробности в видеоинструкции: Посмотреть видеоинструкцию >.

Потребуется:

PHP
 
 

Демонстрация работы:

По умолчанию:

Без профиля:

Мини:

 
HTML <!-- По умолчанию -->
<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' 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' 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' scrolling='no' frameborder='no' style='border:none;width:100px;height:320px;overflow:hidden;'></iframe>

Горизонтальная ориентация:

 
HTML <!-- Горизонтальная ориентация -->
<iframe src='/inwidget/index.php?width=800&inline=7&view=14&toolbar=false' scrolling='no' frameborder='no' style='border:none;width:800px;height:295px;overflow:hidden;'></iframe>

Крупные preview:

 
HTML <!-- Крупные preview -->
<iframe src='/inwidget/index.php?width=800&inline=3&view=9&toolbar=false&preview=large' scrolling='no' frameborder='no' style='border:none;width:800px;height:850px;overflow:hidden;'></iframe>

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

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

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

СКАЧАТЬ ВИДЖЕТ >
INWIDGET-1.0.7.zip - 23 KB

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

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

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

3. Получите ваш ACCESS TOKEN:

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

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=public_content

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

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

Список параметров:
  • LOGIN – логин аккаунта в инстаграм из которого будут транслироваться фотографии.
  • ACCESS_TOKEN – хэш-ключ выданный любым приложением, которому вы разрешили доступ к своему профилю.
  • HASHTAG – хэш-тег для поиска фотографий. Если вы хотите транслировать фотографии других пользователей, либо вывести фотографии с очень специфичным тегом, используйте эту опцию. Выборка фотографий будет производиться со всего мира в порядке того, как фотографии были отмечены искомым тегом. Обратите внимание, что тулбар с аватаркой и статистикой будет автоматически скрыт.
  • imgRandom - выводить фотографии в случайном порядке [ true / false ]
  • imgCount – сколько фотографий запрашивать из Instagram. Влияет на размер кэша.
  • cacheExpiration – через сколько часов обновлять кэш.
  • langDefault - язык виджета по умолчанию [ ru / en ]
  • langAuto - автоматически определять язык пользователя [ true / false ]
Внимание! Если после первичной настройки вы решите изменить LOGIN, CLIENT_ID или HASHTAG,
изменения вступят в силу только после удаления файла с кэшем или после того, как кэш устареет.

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

HTML <!-- По умолчанию -->
<iframe src='/inwidget/index.php' scrolling='no' frameborder='no' style='border:none;width:260px;height:330px;overflow:hidden;'></iframe>
Ещё примеры вставки с различным отображением виджета: HTML <!-- Без профиля -->
<iframe src='/inwidget/index.php?toolbar=false' 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' 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' 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' 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' 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 – маленькие до 150px, large – большие до 306px, fullsize – полноразмерые до 640px, по умолчанию стоит small)
  • lang – язык виджета (значения ru/en, по умолчанию берутся настройки из config.php). Приоритет этого параметра выше чем для настроек в config.php.
При изменении ширины или количества фотографий не забудьте изменить размер iframe.

Коды ошибок:

ERROR #101 - не удаётся получить доступ к файлу с кэшем. Нужно изменить права на директорию /inwidget/cache Если файл не существует, виджет пытается создать его. Если файл существует, виджет пытается открыть его на чтение и запись. Отсутствие прав на чтение или запись файлов в директорию /inwidget/cache вызовет ошибку. Если до изменения прав на директорию в ней уже был файл с кэшем, просто удалите его, т.к. на него также установлены некорректные права.
ERROR #102 - не удаётся получить время последнего изменения файла. Возможно, данная функция ограниченна или не поддерживается файловой системой вашего сервера. Для того, чтобы определить, актуален ли ещё кэш, виджет использует время последнего изменения файла в папке /inwidget/cache. Если не удаётся определить время, кэш всегда будет неактуальным, что приведёт к постоянным запросам к API Instagram.
ERROR #103 - не удаётся отправить запрос к API Instagram. На вашем сервере не установлен cURL. Также не удалось отправить запрос с помощью функции file_get_contents(). Установите cURL, либо присвойте в настройках php.ini параметру allow_url_fopen значение true и подключите расширение openssl, т.к. отправка запросов идёт по протоколу https.
ERROR #401 - не удалось получить ответ от API Instagram. Отправлен некорректный запрос, сайт временно недоступен или IP вашего сервера заблокирован Instagram. К сожалению, API Instagram далёк от совершенства. На дефолтных настройках виджет отправляет всего 12 запрос в день. Были случаи, когда Instagram блокировал IP адрес сервера без объяснения причин. Вопрос решается через обращение в тех.поддержку. Виджет запишет ошибку в файл с кэшем и не будет отправлять запросы, пока не истечёт срок актуальности кэша. Чтобы отправить запрос немедленно, просто удалите файл с кэшем. Кроме ошибки виджет запишет ответ API Instagram вырезав все HTML-теги. Если вы увидите в ответе ошибку 500, скорее всего ваш IP заблокирован.
ERROR #402 - ответ сервера Instagram не содержит данных.
Ошибка актуальна только для версии 1.0.6 или ниже.
Указан некорректный логин пользователя или CLIENT_ID приложения в файле /inwidget/config.php
Виджет запишет ошибку в файл с кэшем и не будет отправлять запросы, пока не истечёт срок актуальности кэша.
Чтобы отправить запрос немедленно, просто удалите файл с кэшем.
ERROR #403 - ответ сервера не содержит фотографий.
Ошибка актуальна только для версии 1.0.3 или ниже.
В профиле пользователя нет фотографий, либо задан слишком специфичный хэштег.
Виджет запишет ошибку в файл с кэшем и не будет отправлять запросы, пока не истечёт срок актуальности кэша.
Чтобы отправить запрос немедленно, просто удалите файл с кэшем.
ERROR #404 - пользователь не найден. Вы либо допустили ошибку в логине, либо профиль закрыт настройками приватности, либо вы используете Access Token от собственного приложения, которое не прошло режим песочницы. В последнем случае, сгенерируйте Access Token с помощью нашего сайта. Данная ошибка записывается в кэш. Чтобы виджет попытался отправить запрос ещё раз, удалите файл с кэшем и обновите страницу на которой выводится виджет.
ERROR #405 - указан некорректный Access Token. Проверьте внимательно токен на наличие лишних символов, пробелов или форматирования.
Если всё верно, посмотрите видеоинструкцию:

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

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=public_content
ERROR #406 - исчерпан лимит на количество запросов в час с помощью вашего Access Token. Увеличьте интервал обновления кэша. Для этого в файле /inwidget/config.php измените значение переменной cacheExpiration. (По умолчанию установлено 6 часов.) Либо используйте другой токен. Обращаю ваше внимание, что от каждого приложения можно получить только один уникальный токен. Данная ошибка записывается в кэш. Чтобы виджет попытался отправить запрос ещё раз, удалите файл с кэшем и обновите страницу на которой выводится виджет.
ERROR #407 - неизвестная ошибка. Сервер API Instagram ответил не так, как ожидалось. Для выяснения деталей смотрите, что было записано в кэш в результате выполнения запроса. Чтобы виджет попытался отправить запрос ещё раз, удалите файл с кэшем и обновите страницу на которой выводится виджет.

История версий:

inWidget-1.0.7 (актуальная версия)
Дата: 24 декабря 2015 г.
  • Полностью совместимая версия с изменениями в API Instagram от 17 ноября 2015 г.
  • Запросы на получение данных теперь используют ACCESS TOKEN.
  • CLIENT_ID упразднён и больше нигде не используется.
  • Частично изменилась логика обработки ошибок.
  • Появились ошибки с номерами: 404, 405, 406, 407. Описание см. в документации.
inWidget-1.0.7-ALFA
Дата: 26 ноября 2015 г.
  • Минимально совместимая версия с изменениями в API Instagram от 17 ноября 2015 г.
  • Запросы на получение данных теперь используют ACCESS TOKEN.
  • CLIENT_ID упразднён и больше нигде не используется.
inWidget-1.0.6
Дата: 28 августа 2014 г.
  • Теперь виджет умеет работать с хэш-тегами на кириллице и других нелатинских языках.
  • Поля LOGIN, CLIENT_ID и langDefault стали обязательными для заполнения.
  • Вывод ошибок PHP снова включён. Рекомендую выключать после настройки виджета в index.php
inWidget-1.0.5
Дата: 27 августа 2014 г.
  • Исправлена ошибка деления на ноль в случае если виджету передаются некорректные аргументы.
  • Вывод PHP ошибок отключен из соображений безопасности. Для отладки можно включить в index.php
inWidget-1.0.4
Дата: 22 августа 2014 г.
  • Случайный порядок фотографий можно выключить в config.php
  • Отсутствие фотографий в профиле больше не является ошибкой.
  • Виджет переведён на русский и английский язык. Появились файлы локализации.
  • Язык по умолчанию можно указать в config.php
  • Виджет научился автоматически определять язык пользователя. Можно отключить в config.php
  • Можно изменить язык виджета с помощью $_GET переменной.
  • Произведён небольшой рефакторинг кода.
inWidget-1.0.3
Дата: 11 августа 2014 г.
Исправлена ошибка из-за которой виджет мог начать транслировать фотографии другого пользователя.
inWidget-1.0.2
Дата: 01 августа 2014 г.
Добавлена возможность вывода фотографий по хэш-тегу.
inWidget-1.0.1
Дата: 28 июля 2014 г.
  • Переписан механизм кэширования. Теперь используется файл, а не база данных.
  • Размер кэша уменьшен в 10 раз.
  • Скорость работы виджета увеличилась в 2 раза.
  • Ошибки стали более информативными. Появились коды ошибок и пояснения.
  • Картинки оформления встроены прямо в CSS, чтобы уменьшить количество запросов к серверу.
  • Улучшена стабильность, произведён рефекторинг кода и исправлены мелкие баги.
inWidget-1.0.0
Дата: 23 января 2014 г.
С этой версии всё началось. Кэширование производится в базу данных MySQL.
Актуальная инструкция для этой версии содержится в архиве.

Модификации:

Здесь публикуется информация о модификациях виджета от других разработчиков.
Создали на базе моего виджета собственную версию? Пришлите информацию на aik@inwidget.ru.
Я с удовольствием расскажу о вашей работе.
Мы в Instagram (CMS Битрикс)
Автор: Сотбит
Бесплатный плагин для CMS Битрикс.
Частично изменён код и полностью система кеширования, чтобы вписаться в стандарты Битрикса.
InstagramWidget (CMS Modx Revolution)
Автор: Rasul
Бесплатный плагин для CMS Modx Revolution.
Скачать плагин можно с репозитория дополнений SimpleDream. Исходный код доступен на Гитхаб.
Instagram - InWidget (Moguta.CMS)
Автор: moguta.ru
Бесплатный плагин для Moguta.CMS. В плагине частично изменен код и структура файлов.
Убрано использование iframe и настройки вынесены из файлов в настройки плагина.