/** * Project: inWidget: show pictures from instagram.com on your site! * File: readme.txt * * This library is free software; you can redistribute it and/or * modify it under the terms of MIT license * http://inwidget.ru/MIT-license.txt * * @link http://inwidget.ru * @author Alexandr Kazarmshchikov * @version 1.0.6 * @package inWidget * */ // ---------------------------------------- // Установка виджета на сайт: // ---------------------------------------- 1. Зарегистрируйте ваш сайт в instagram.com: Для этого идём на instagram.com и аторизируемся под своим аккаунтом. Далее переходим в раздел API. Вот прямая ссылка: http://instagram.com/developer/. Вас интересует раздел «Управлять программами». В нём вам требуется зарегистрировать новое приложение (ваш сайт), от лица которого и будет работать виджет. Так что переходим в этот раздел. Нажимаем кнопку «Регистрация новой программы» и заполняем форму: * Application Name – название вашего приложения. Можете написать название сайта; * Description – описание приложения; * Website – URL-адрес вашего сайта; * OAuth redirect_uri – URL на который перейдёт пользователь после авторизации. Т.к. у вас просто виджет и никого авторизовывать вы не будете, можно просто продублировать адрес сайта. Дальше нажимаем кнопку «Register». После регистрации вы получаете два хэш-ключа. Вас интересует CLIENT ID. Он потребуется для настройки виджета. 2. Загрузите исходный код виджета в корень вашего сайта: Для этого скачайте архив с исходным кодом виджета. Извлеките папку /inwidget из архива. Загрузите папку /inwidget в корень вашего сайта со всеми файлами внутри. Примечание. Виджет использует относительные пути, поэтому вы можете загрузить его в любую папку, если у вас нет доступа к корню сайта. Не забудьте при этом изменить путь в IFRAME. 3. Установите права на запись для папки /inwidget/cache: Instagram разрешает отправлять лишь 5000 запрос в час к своему API В папке /inwidget/cache виджет будет хранить кэшированные данные. Если для директории будут отсутствовать права на запись, вы увидите ошибку ERROR #101. 4. Настройте виджет: Отредактируйте файл /inwidget/config.php Вам потребуется указать логин в Instgram и CLIENT_ID вашего приложения. Список параметров: * LOGIN – логин аккаунта в инстаграм из которого будут транслироваться фотографии. * CLIENT_ID – хэш-ключь выданный при регистрации приложения в Instagram. * HASHTAG – хэш-тег для поиска фотографий. Если вы хотите транслировать фотографии других пользователей, либо вывести фотографии с очень специфичным тегом, используйте эту опцию. Выборка фотографий будет производиться со всего мира в порядке того, как фотографии были отмечены искомым тегом. Обратите внимание, что тулбар с аватаркой и статистикой будет автоматически скрыт. * imgRandom - выводить фотографии в случайном порядке [ true / false ] * imgCount – сколько фотографий запрашивать из Instagram. Влияет на размер кэша. * cacheExpiration – через сколько часов обновлять кэш. * langDefault - язык виджета по умолчанию [ ru / en ] * langAuto - автоматически определять язык пользователя [ true / false ] 4.1. В файл стилей пропишите для виджета (здесь ширина 100%, т.к. ширина виджета регулируется блоком, в который включен этот виджет, требуется для адаптива), если виджетов несколько, вместо #идВашегоВиджета можно указать .классВиджетов: #идВашегоВиджета { border:none; overflow:hidden; width: 100%; } 4.2. В JavaScript файл добавьте инструкции (этот код будет автоматически назначать высоту виджету в зависимости от высоты содержимого, предполагается, что используется библиотека jQuery): $(document).ready(function () { $("#идВашегоВиджета").load(function() { $(this).height( $(this).contents().find("body").height() ); }); $(window).on('resize', function () { $("#идВашегоВиджета").height( $("#идВашегоВиджета").contents().find("body").height() ); }); }); 5. Вставьте виджет в сайт с помощью следующего кода: <!-- По умолчанию --> (если ширина родительского контейнера: 260px) <iframe src='/inwidget/index.php' scrolling='no' frameborder='no'></iframe> Ещё примеры вставки с различным отображением виджета: <!-- Без профиля --> (предполагается ширина родительского контейнера: 260px) <iframe src='/inwidget/index.php?toolbar=false' scrolling='no' frameborder='no'></iframe> <!-- Мини 1 --> (предполагается ширина родительского контейнера: 100px) <iframe src='/inwidget/index.php?inline=2&view=12&toolbar=false' scrolling='no' frameborder='no'></iframe> <!-- Мини 2 --> (предполагается ширина родительского контейнера: 100px) <iframe src='/inwidget/index.php?inline=1&view=3&toolbar=false' scrolling='no' frameborder='no'></iframe> <!-- Горизонтальная ориентация --> (предполагается ширина родительского контейнера: 800px) <iframe src='/inwidget/index.php?inline=7&view=14&toolbar=false' scrolling='no' frameborder='no'></iframe> <!-- Крупные preview --> (предполагается ширина родительского контейнера: 800px) <iframe src='/inwidget/index.php?inline=3&view=9&toolbar=false&preview=large' scrolling='no' frameborder='no'></iframe> // ---------------------------------------- // Точная настройка отображения виджета: // ---------------------------------------- Параметры передаются как GET переменные при обращении к скрипту виджета. К примеру, чтобы вывести в строку пять фотографий, нужно добавить соотвествующий параметр в URL к скрипту. Т.е.: /inwidget/index.php?inline=5 Список параметров: inline – количество фотографий в строке (по умолчанию 4 шт.).; view – сколько фотографий отображать в виджете (по умолчанию 12 шт., максимально 20 шт. (т.к. instagram отдает для sandbox максимум 20шт.), можно исправить в config.php). Для нормального вывода в адаптивном режиме желательно устанавить число выводимх фото кратным 2 И 3 (т.е. 6, 12, 18), чтобы в последнем ряду не оказалось одна фотка, что портит вид (для маx разрешения 320px выводится 2 фото в ряд, для max 767px - 3 фото в ряд); 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 не содержит данных. Указан некорректный логин пользователя или CLIENT_ID приложения в файле /inwidget/config.php Виджет запишет ошибку в файл с кэшем и не будет отправлять запросы, пока не истечёт срок актуальности кэша. Чтобы отправить запрос немедленно, просто удалите файл с кэшем. // ---------------------------------------- // История версий: // ---------------------------------------- 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. Актуальная инструкция для этой версии содержится в архиве. // ---------------------------------------- // Ваши отзывы, вопросы и предложения: // ---------------------------------------- Посетите сайт виджета: http://inwidget.ru Пишите на aik@inwidget.ru или свяжитесь со мной Вконтакте http://vk.com/vanzan Присоединяйтесь к разработке виджета на GitHub: https://github.com/aik27/inwidget Статья о виджете на habrahabr: http://habrahabr.ru/post/223739/