Instagram виджет для сайта

Домашняя страница: http://inwidget.ru/#adaptive

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

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

Особености:

  • Множество настроек
  • Прямые ссылки на фотографии
  • Кнопка перехода к странице профиля
  • Фотография профиля
  • Статистика профиля
  • Вывод фотографий по нескольким хэш-тегам
  • Вставка виджета одной строкой в HTML
  • Адаптивность
  • Множество скинов
  • Автоопределение языка
  • Работает без ACCESS_TOKEN
  • Без рекламы
  • Для любого использования
  • Открытый исходный код
  • Подробная инструкция

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

PHP

PHP >= 5.4.0
с библиотекой cURL   СКАЧАТЬ ВИДЖЕТ > INWIDGET-1.3.1.zip Последняя версия 1.3.1. от 05 февраля 2019 г. Исходный код на GitHub >

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

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

Без профиля:

Мини:

HTML <!-- По умолчанию -->
<iframe src='/inwidget/index.php' data-inwidget 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>

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

HTML <!-- Горизонтальная ориентация -->
<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:

HTML <!-- Крупные 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>

Разные цветовые схемы:

HTML <!-- Синий -->
<iframe src='/inwidget/index.php?skin=modern-blue' data-inwidget scrolling='no' frameborder='no' style='border:none;width:260px;height:315px;overflow:hidden;'></iframe>

<!-- Зелёный -->
<iframe src='/inwidget/index.php?skin=modern-green' data-inwidget scrolling='no' frameborder='no' style='border:none;width:260px;height:315px;overflow:hidden;'></iframe>

<!-- Красный -->
<iframe src='/inwidget/index.php?skin=modern-red' data-inwidget scrolling='no' frameborder='no' style='border:none;width:260px;height:315px;overflow:hidden;'></iframe>

<!-- Оранжевый -->
<iframe src='/inwidget/index.php?skin=modern-orange' data-inwidget scrolling='no' frameborder='no' style='border:none;width:260px;height:315px;;overflow:hidden;'></iframe>

<!-- Фиолетовый -->
<iframe src='/inwidget/index.php?skin=modern-violet' data-inwidget scrolling='no' frameborder='no' style='border:none;width:260px;height:315px;overflow:hidden;'></iframe>

<!-- Чёрный -->
<iframe src='/inwidget/index.php?skin=modern-black' data-inwidget scrolling='no' frameborder='no' style='border:none;width:260px;height:315px;overflow:hidden;'></iframe>

<!-- Жёлтый -->
<iframe src='/inwidget/index.php?skin=modern-yellow' data-inwidget scrolling='no' frameborder='no' style='border:none;width:260px;height:315px;overflow:hidden;'></iframe>

<!-- Серый -->
<iframe src='/inwidget/index.php?skin=modern-grey' data-inwidget scrolling='no' frameborder='no' style='border:none;width:260px;height:315px;overflow:hidden;'></iframe>

Адаптивный режим ( Открыть демонстрацию в новом окне ):

  Виджет будет автоматически подстраиваться под размеры блока или окна браузера. Подробнее > HTML <!-- Адаптивный режим -->
<iframe src='/inwidget/index.php?adaptive=true' data-inwidget scrolling='no' frameborder='no' style='border:none;width:100%;height:315px;overflow:hidden;'></iframe>

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

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

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

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

Или используйте composer Console composer.phar require aik27/inwidget Console 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 – логин и пароль от любого аккаунта для авторизации. Поля НЕ являются обязательными. Авторизация необходима для альтернативных способов получения данных в случае выхода из строя основных. Советую завести для этого отдельный аккаунт с отключенной двухшаговой аутентификацией. Данные авторизации не передаются третьим лицам, в том числе автору виджета. loginAvailable - если вы хотите выводить разные логины на разных страницах сайта, добавьте в этот массив список логинов, которые разрешенны к показу. Затем вы сможете передавать необходимый логин в виджет с помощью GET переменной. Например: /inwidget/index.php?login=fotokto_ru tagsAvailable - если вы хотите выводить разные теги на разных страницах сайта, добавьте в этот массив список тегов, которые разрешены к показу. Затем вы сможете передавать необходимый тег в виджет с помощью GET переменной. Например: /inwidget/index.php?tag=photography. Данную настройку можно комбинировать с "loginAvailable" и "tagsFromAccountOnly". 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. Вставьте виджет в сайт с помощью следующего кода:

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' 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 или аргументах конструктора.

#require_once 'inwidget/classes/Autoload.php';
require_once 'inwidget/classes/InstagramScraper.php';
require_once 'inwidget/classes/Unirest.php';
require_once 'inwidget/classes/InWidget.php';

try {
	
	// Options may change through class constructor. For example:
	
	$config = array(
		'LOGIN' => 'fotokto_ru',
		'HASHTAG' => '',
		'ACCESS_TOKEN' => '',
		'authLogin' => '',
		'authPassword' => '',
		'tagsBannedLogins' => '',
		'tagsFromAccountOnly' => false,
		'imgRandom' => true,
		'imgCount' => 30,
		'cacheExpiration' => 6,
		'cacheSkip' => false,
		'cachePath' =>  $_SERVER['DOCUMENT_ROOT'].'/inwidget/cache/',
		'skinDefault' => 'default',
		'skinPath'=> '/inwidget/skins/',
		'langDefault' => 'ru',
		'langAuto' => false,
		'langPath' => $_SERVER['DOCUMENT_ROOT'].'/inwidget/langs/',
	);
	$inWidget = new \inWidget\Core($config);
	
	// Also, you may change default values of properties

	/*
	$inWidget->width = 800;	// widget width in pixels
	$inWidget->inline = 6; // number of images in single line
	$inWidget->view = 18; // number of images in widget
	$inWidget->toolbar = false;	// show profile avatar, statistic and action button
	$inWidget->preview = 'large'; // quality of images: small, large, fullsize
	$inWidget->adaptive = false; // enable adaptive mode
	$inWidget->skipGET = true; // skip GET variables to avoid name conflicts
	$inWidget->setOptions(); // apply new values
	*/
	
	$inWidget->getData();
	include 'inwidget/template.php';

}
catch (\Exception $e) {
	echo $e->getMessage();
}

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

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

Коды ошибок:

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

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

Многие из таких ошибок связаны с неправильной настройкой вашего хостинга. Наиболее частые:

Failed to connect to www.instagram.com port 443 – ваш сервер не может подключиться к серверу Instagram. Причин для этого может быть множество. Например:

  • на сервере включен и неправильно сконфигурирован протокол IPv6, в то время как PHP по умолчанию пытается отправлять запросы через него минуя IPv4
  • на сервере установлена старая версия криптографического ПО (OpenSSL), которое не поддерживает новые SSL сертификаты и протаколы шифрования, используемые Instagram
  • проблема в библиотеке сURL, которая фактически не работает в следствии прочих настроек (скажем DNS) или излишней заботы хостинг-провайдера о нагрузке на свои сервера
  • кратковременные перебои связи на маршруте Ваш сервер <-> Instagram

Unknown body format – проблема с дешифровкой ответа от сервера Instagram. Все ответы, которые даёт сервер Instagram возвращаются в формате JSON. В PHP для работы с ним существует стандартная одноимённая библиотека. Проверьте, что она включена (extension=json.so) и работает исправно (json_encode / json_decode).

Автор: Электроник

Системный администратор широкого профиля. От ИТ до Маркетинга. Мастер на все руки.

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

Ваш адрес email не будет опубликован.