Виджет профиля Instagram на ваш сайт/блог

Приветствую!
Многие из Вас знают, что такое Instagram. Для тех кто не знает, то я кратко расскажу.

Instagram - кроссплатформенное мобильное приложение для публикации квадратных фото (как в фотоаппаратах Polaroid) с применением эффектов. Создали Инстаграм в 2010 году Кевин Систром и Майк Кригер. В 2012 сервис был продан в Facebook за $300 млн + 20 млн акций компании.

А теперь о главной теме заметки. Есть два хороших способа (сервиса) для вставки вашего Инстаграм-профиляна Ваш сайт или блог.

Обновление от 29 июля 2015 года: Обязательно почитайте новую запись, где я расскажу о двух классных сервисах для создания виджета для фото с Инстаграм.

Instagram виджет

Автор скрипта новосибирский фотограф Александр Казармщиков.
Скрипт требует поддержки php от вашего сайта, то есть владельцы сайтов на Blogger, WordPress.com, LiveJournal.com листают вниз, там есть способ вставки виджета с фото и для таковых веб-мастеров.

Итак, для начала нужно скачать скрипт и залить его на хостинг.

Скачать с Яндекс. Диска / Скачать с официального сайта

Теперь, чтобы настроить скрипт нам нужно получить хеш-ключ под названием "CLIENT ID".
Для этого нужно зарегистрировать сайт в http://instagram.com/developer (предварительно нужно авторизоваться под своим именем).

Идем в раздел "Управление программами" (Manage Clients). Заполняем поля. В последнем можно написать "widget" или что-то в это роде.

После успешной регистрации сайта Вы будете перенаправлены на страницу с нужным hash-кодом.

Теперь открывайте файл /inwidget/config.php и введите там ваш логин и вставьте CLIENT_ID.
И еще, и не забудьте поставить права на запись для директории cashe, она нужна из-за ограничения - не более 5 000 запросов в час к API.

Вставка кода очень простая - осуществляется через тег <iframe> .
По умолчанию отображается блок 260х330 с тулбаром (это аватар со счетчиками фолловеров, подписок и фото.

<!-- По-умолчанию -->

 <iframe frameborder="no" scrolling="no" src="/inwidget/index.php" style="border: none; height: 330px; overflow: hidden; width: 260px;"></iframe>

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

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

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

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

Вообще, можно "поиграть" со значениями параметров в URL.

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.

Больше информации о скрипте смотрите на официальном сайте: http://inwidget.ru

Сервис Intagme.com

Отличный, легко настраиваемый сервис с помощью которого можно установить виджет показа Ваших фото с Instagram, что еще добавить.

Заполняем поля Username или Hashtag (первое если хотите показать только ваши фото или второе для отображение фото со всего сайта по хеш-тегу). Затем выбираем тип отображение фото Slideshow или Grid (в формате слайд шоу или в таблицей), если выбрали второе значение то появятся две ячейки, где Вы должны указать размер это таблицы.

Теперь устанавливаем ширину превью изображения в поле Thumbnail Size. Потом выбираем отображать или нет рамки вокруг фото. Устанавливаем по необходимости фоновый цвет. В завершение выбираем - отображать кнопки шеринга (to share - делиться) или нет.

Можно посмотреть превью или забрать код нажатием на 'Get code'. Осталось вставить код в нужное место. Готово.

На этом всё, думаю Вам что-то пригодиться. Если возникли вопросы - пишите в комментах. Всего доброго, до встречи ;)

Instagram

понедельник, 1 декабря 2014 г.