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

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

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

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

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

Instagram виджет

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

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

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

Теперь, чтобы настроить скрипт нам нужно получить хеш-ключ под названием "CLIENT ID".
Для этого нужно зарегистрировать сайт в //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=3&view=9&toolbar=false preview=large' scrolling='no' frameborder='no' style='border:none;width:800px;height:850px;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>

Вообще, можно "поиграть" со значениями параметров в 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.

Больше информации о скрипте смотрите на официальном сайте.

Сервис Intagme.com

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

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

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

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

Сервис Stapico

Так сказать, на десерт, представляю вам еще один русскоязычный сервис для создания виджета. Сам сайт представляет из себя комбайн всякой полезности для инстаграммеров, но нас интересует только создание инстаграм виджета на Stapico.ru.

Stapico объединяет в себе всё лучшее из двух выше представленных сайтов: начиная от дизайна и заканчивая удобной интеграцией в ваш блог.

Настройка проще паренной репы, а с учетом того, что всё на понятном нам языке, то я даже объяснять не буду, что и как нужно делать - импровизируйте. Я уверен, что вы ничего не испортите ;-)

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

Довольно хорошо выглядит - мне понравилось. А Вам как?

---

В конце предлагаю посмотреть ролик, который поведает о 10-и самых лучших сериалов в истории. Для меня сериал "Друзья" номер один навсегда!


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