Как вывести фото из Instagram у себя на сайте

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

Пока что еще не встречал хороший плагин без багов и косяков, которые позволял бы выполнять эти две функции (возможность создания виджета фотографий пользователя Instagram либо фоток по тегу), если вы знаете такой плагин, буду рад, если поделитесь в комментах.

Пока что мы разберемся только с тем, как выводить ленту фотографий пользователя, о том, как выводить фото по тегу, будет написано чуть позже, а насколько позже — это зависит от количества просмотров и комментариев, которые наберет этот пост, кроме того, согласно последним изменениям в API, для вывода по тегу нужно вытаскивать приложение из песочницы (Sandbox mode).

В этом посту я подразумеваю, что у вас уже есть базовые знания PHP, поэтому описываю только то, что связано непосредственно с работой с API Instagram и не объясняю, что такое foreach, array_slice() и т.д.

Шаг 1. Регистрация приложения в Instagram, получение Access токена

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

Ничего сложного тут нет, для начала авторизуемся (или регистрируемся) в инстаграм и переходим по этой ссылке: http://instagram.com/developer/. В итоге мы попадаем на страницу:

После нажатия на кнопку «Register Your Application» вы попадете на страницу со всеми зарегистрированными вами приложениями:

Итак, нажали на кнопку «Регистрация новой программы» и попали на страницу с формой co следующими полями:

Application name — название приложения. Нельзя использовать производные от слов Instagram, IG, Insta или gram.

Description — описание.

Website — сайт. Неважно, какой сайт вы укажите в этом поле — вывод фотографий по тегу будет работать в любом случае, даже на локалке. Указывать URL нужно с http://.

OAuth redirect_uri — куда перенаправлять пользователя после авторизации приложения или отмены — тут важно указать URL, который нужен в инструменте получения токена.

Ну вот и всё, вводим капчу и нажимаем кнопку «Register», чтобы создать приложение. Обратите внимание на CLIENT ID и CLIENT SECRET приложения — они понадобятся вам для получения Access Token уже в инструменте.

Сейчас будем выводить все фото конкретного пользователя из инстаграм, но прежде чем начать, убедитесь, что вы уже зарегистрировали приложение в Шаге 1.

Кроме того, вам необходимо обратить внимание, что если ваше приложение находится в режиме песочницы, то вы можете выводить только фото/видео того пользователя, которому принадлежит токен + только 20 последних фото. Хотите снять эти ограничения? Отправляйте своё приложение на одобрение.

Ниже расположен листинг с кодом для вывода фото, вы можете вставить этот код непосредственно туда, где собираетесь выводить фотографии, а можете создать PHP-функцию с несколькими параметрами.

/*
 * создаем новое подключение к API Instagram, о том, как получить $token, написано выше;
 */
$token = 'тут указывайте свой Access Token';
/*
 * Тут указываем либо ID пользователя, либо "self" для вывода фото владельца токена
 * Как получить ID? Да в том же инструменте, в котором вы получали токен
 */
$user_id = 'self';
$instagram_cnct = curl_init(); // инициализация cURL подключения
curl_setopt( $instagram_cnct, CURLOPT_URL, "https://api.instagram.com/v1/users/" . $user_id . "/media/recent?access_token=" . $token ); // подключаемся
curl_setopt( $instagram_cnct, CURLOPT_RETURNTRANSFER, 1 ); // просим вернуть результат
curl_setopt( $instagram_cnct, CURLOPT_TIMEOUT, 15 );
$media = json_decode( curl_exec( $instagram_cnct ) ); // получаем и декодируем данные из JSON
curl_close( $instagram_cnct ); // закрываем соединение
 
/*
 * количество фотографий для вывода
 */
$limit = 4;
/*
 * размер изображений (высота и ширина одинаковые)
 */
$size = 200;
/*
 * функция array_slice() задает количество элементов, которые нам нужно получить из массива
 * если нам нужно вывести все фото, тогда: foreach($media->data as $data) {
 */
foreach(array_slice($media->data, 0, $limit) as $data) {
	echo '<a href="' . $data->link . '" target="_blank">';
	echo '<img src="'. $data->images->low_resolution->url . '".$size.'".$size.'"/>';
	echo '</a>';
}

На моем тестовом сайте этот код вывел 4 изображения из моего профиля, со ссылками. То есть по логике получаем, что $data->link — это ссылка, а $data->images->low_resolution->url — URL изображения. Давайте рассмотрим больше параметров полученного объекта $data.

В описание параметров я использовал переменные $data, $comment и $user — это сделано ради простоты и удобства, названия этих переменных могут быть какими угодно. Если вы хоть немного разбираетесь в PHP, вам не нужно это объяснять.

$data->id

ID публикации.

$data->link

Ссылка на это изображение в Instagram.

$data->images->low_resolution->url

URL копии изображения низкого разрешения (306×306).

$data->images->thumbnail->url

URL изображения-миниатюры (150×150).

$data->images->standard_resolution->url

URL копии изображения стандартного разрешения (612×612).

$data->tags

Массив, содержащий все теги данного изображения.

$data->filter

Название используемого фильтра.

$data->caption->text

Описание фото.

$data->created_time

Дата публикации в UNIX-формате. Мы можем изменить формат даты при помощи функции gmdate():

echo gmdate("Y-m-d H:i", $data->created_time);

$data->user->username

Имя пользователя, который запостил фотографию.

$data->user->id

ID пользователя.

$data->user->full_name

Полное имя пользователя.

$data->user->profile_picture

URL аватарки пользователя.

$data->comments->count

Количество комментариев к изображению.

$data->comments->data

Массив объектов комментариев, который также можно пропустить через цикл foreach и получить информацию о каждом оставленном комменте, например:

// выводим текст каждого комментария и имя пользователя, оставившего его
foreach( $data->comments->data as $comment ) :
	echo '<p><strong>' . $comment->from->username . '</strong><br />' . $comment->text . '</p>';
endforeach;

Тогда получаем следующие параметры комментариев:

$comment->created_time

Дата публикации комментария в UNIX формате.

$comment->id

ID комментария.

$comment->text

Текст комментария.

$comment->from->username

Имя пользователя, оставившего комментарий.

$comment->from->id

ID пользователя.

$comment->from->full_name

Полное имя пользователя.

$comment->from->profile_picture

URL аватарки пользователя.

$data->likes->count

Количество «лайков».

$data->likes->data

Массив объектов пользователей, которым понравилась фотография, также можно пропустить через цикл foreach:

// в качестве примера давайте выведем имена всех пользователей, которым понравился пост
foreach( $data->likes->data as $user ) :
	echo $user->username . '<br />';
endforeach;

$user->id

ID пользователя.

$user->username

Имя пользователя.

$user->full_name

Полное имя.

$user->profile_picture

URL аватарки.

Миша

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Инстаграм лента

Задача

Решили сделать простой плагин галереи инстаграм. Чтоб просто и понятно.

Описание

Для работы плагина нужно получить специальный ключ на сайте инстаграм. 
Ниже будет инструкция о его получении.

Флекс сетка изображений. Можете добавлять или скрывать информацию о аккаунте. 
На сетке показано количество лайков и комментариев к посту. По нажатию на пост открывается новое окно с данной фотографией в инстаграме.

Пример работы плагина на нашем сайте и на сайте freire.ru и zeleniyglukhar.ru

ИНСТРУКЦИЯ ПО ПОЛУЧЕНИЮ INSTAGRAM TOKEN

1) Авторизуйтесь в инстаграм https://www.instagram.com/

2) Перейдите по ссылке https://www.instagram.com/developer/

3) Зарегистрируйте нового клиента — кнопка Manage Clients

 
4) Заполняем поля в вкладке Details, запишите куда-нибудь значение поля Valid redirect URIs, оно ещё понадобится и переходим в другую вкладку

5) 

Убираем галочку в поле Disable implicit OAuth в вкладке Security. ЭТО ОЧЕНЬ ВАЖНО!

6) Проходим капчу и нажимаем register

7) Если всё заполнено правильно, вы получаете данные от инстаграм. Вам нужно записать CLIENT ID.
Уже почти всё!

8) А теперь сгенерируем ACCESS TOKEN который нам очень нужен. 

В ссылку ниже вы должны вставить 2 своих значения 1- CLIENT ID из пункта 7   2 — Valid redirect URIs из пункта 3
Вы должны были записать эти данные.

https://instagram.com/oauth/authorize/?client_id=ВАШ_CLIENT-ID&redirect_uri=Valid_redirect_URI&response_type=token

НАДО ЗАМЕНИТЬ ВАШ_CLIENT-ID и Valid_redirect_URI НА СВОИ ЗНАЧЕНИЯ

После добавления сових параметров скопируйте ссылку в адресную строку браузера и перейдите по ней.

9) УРА! Вас перебросило на ваш сайт и в адресной строке появился заветный ACCESS TOKEN
Выглядеть он должен как-то так:

http://ВАШСАЙТ.ru/#access_token=188494716.9794df9.4f23c55f2e9414193de4efb23d747

10) Полученый токен надо вставить в настройки плагина и ваша лента появится у вас на сайте
 
Надеемся, что у вас всё получилось. Мы старались максимально подробно описать получения токена.

Вы можете бесплатно потестировать плагин в течение 14 дней, установив его через раздел «Маркетплейс» в панели управления вашим интернет-магазином;

дизайн-приемы для сетки постов в Instagram.

Сегодня наша задача разобраться, не что постить в Instagram, а какой визуал выбрать для построения сетки.

---

3.1 Инсталендинг

Самая большая ошибка всех начинающих сммщиков-креативщиков — убежденность, что каждый их пост пользователи будут видеть в разрезе всей концепционной картины Instagram-сетки.
Но, поверьте, друзья, люди не будут при каждом выходе вашего поста заглядывать в профиль и просматривать “как же сейчас выглядит ваша сетка постов в аккаунте?”. Люди ленивы. И вам нужно постоянно об этом помнить, что бы вы ни делали: создавали визуальный контент, писали текст к постам, или же создавали контент для рекламной кампании.
Этот важный комментарий относится к формату Инсталендинг.

*Инсталендинг — это формат оформления сетки Instagram с изображением, равномерно или нет, разрезанным на несколько постов.

Плюсы: смотрится эффектно и в едином стиле, особенно когда лендинг “растянут” на много постов и в каждом посте есть ваш товар.

Хорошим примером такого формата можно всегда привести официальный аккаунт theofficialpandora и его более старые посты:

Идеальный пример, когда в каждом посте находится продвигаемый товар.

Вне зависимости от того, с какой частотой вы будете получать посты, вы будете видеть:

• товар/услуга — это самое главное;
• некую концепцию чего-то, но чего именно вам в данный момент не видно, пока не выйдут все посты этого лендинга.

Но не забывайте, друзья, что вы будете видеть по одной картинке в своей ленте. И каждый пост должен быть информативным.

Вот так будет выглядеть отдельный пост в ленте.
Согласитесь — эстетично и понятно, что продается в отдельно взятом конкретном посте.

Чего стоит избегать при создании инсталендинга:

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

Наверное, когда все посты подвинутся, будет красиво.
Но! У вашей ЦА нет времени ждать, когда станет красиво. Нужно сейчас. Потому что условия жесткой конкуренции никто не отменял.

2. Нечитабельностей.

Растягивать строки одного текста через несколько постов.
Ведь когда посты выходят, они подвигаются по сетке, и получается, что нет возможности прочесть текст целиком, остается лишь догадываться о его смысле.
Но это не вариант. Люди ленивы. Они не будут догадываться. Тем более, если им в ленте будет появляться что-то типа такого:

Инсталендинг — это хороший инструмент, когда он информативен.

Instagram Journal — плагин WordPress для вывода лент Instagram на вашем сайте

Instagram Journal — плагин WordPress, который различными способами отображает фотографии пользователей из одноименной сети на вашем сайте. Теперь можно создавать галереи без усилий и сложных кодов. Вы даже можете использовать конкурсный режим плагина, чтобы поддерживать интерес пользователей, вовлекая их в фото-конкурсы сообщества. Давайте выясним, что еще может предложить этот плагин.

Описание  Демо  Купить за $19

Смотрите также:

Функции плагина

• Лента Instagram — это причина, по которой вам нужен этот плагин. Вы сможете демонстрировать много разных лент, от наиболее популярных изображений до самых новых, и изображений по тегам.
• Режимы галереи — вы сможете показывать изображения разными способами, например, в виде сетки или карусели.
• Настраиваемые параметры — этот плагин позволяет настраивать большое количество всевозможных параметров для каждой галереи.
• Конкурсный режим — с помощью этого режима вы сможете устроить собственный конкурс в Instagram всего за пару кликов.
• Бесплатная тема — этот плагин идёт с бесплатной темой на выбор, которую вы можете установить, если Instagram играет большую роль в маркетинговой политике вашего бренда.
• Классическое отображение — этот режим создает неповторимую сетку ваших изображений, которая прекрасно смотрится на всех устройствах.
• Collage Carousel View — этот режим просмотра группирует ваши фотографии в коллажи и отображает в слайдере карусель с милыми эффектами перехода.
• Section Carousel View — этот режим просмотра предоставит вам более официальный вид вашей галереи. Это отличное решение для бизнес-шаблонов.
• Large Carousel View — в этом режиме просмотра представлен большой, функциональный слайдер – карусель, которая показывает детали фотографий в момент открытия.
• Infinity View — у этого режима просмотра есть красивый, сексуальный слайдер, который отображает ваши фотографии на весь экран и увеличивает их при наведении курсора.
• Контроль количества фотографий — после многочисленных просьб был добавлен способ ограничения количества фотографий, загруженных с помощью API.
• Адаптивное HD видео — загружайте все ваши любимые видео и делитесь ими с миром. Каждый видео-проигрыватель поддерживает полноэкранный режим на любом устройстве.
• Полностью настраиваемый слайдер и карусель — в этом плагине вы можете контролировать анимацию, эффекты переходов, скорость и плавность пролистывания.

Установка и настройка плагина

Лёгкость установки плагина будет зависеть от вашего опыта использования WordPress. Если вы умеете пользоваться FTP клиентом, то это не составит вам труда. Всё, что вам надо сделать, это извлечь файлы из архива ZIP, который вы получите от CodeCanyon, открыть папку WordPress плагинов и загрузить папку instagram-journal в директорию плагинов вашего сайта.

Если раньше вы загружали плагины только через WordPress админ-панель, то прежде чем устанавливать этот плагин, вам придётся узнать, как получить доступ к FTP файлам на вашем сайте и как использовать FTP клиент. К сожалению, в инструкции не указано как это сделать, но если вы этому научитесь, то потом сможете устанавливать разные премиум плагины.

Подключите ваш аккаунт в Instagram

В этом вам поможет инструкция в ZIP файле. Следуйте ей при настройке плагина. Там вы найдете информацию о подключении вашего аккаунта в Instagram. Обычно, нужно кликнуть на указанную там ссылку. Вам откроется страница авторизации, где необходимо ввести имя пользователя и пароль от вашего аккаунта. После входа в систему и авторизации доступа к вашей странице, вы получите ключ доступа и ID пользователя.

После активации плагина, чтобы начать работу, вам нужно будет нажать на кнопку Instagram Journal с левой стороны меню WordPress, найти раздел Основные настройки, ввести ваш ключ доступа в поле и нажать Сохранить изменения.

Создание лент Instagram

Чтобы добавить ленту Instagram на вашу страницу, вам нужно добавить в вашу запись или страницу шорткод плагина.

Мы получили интересный результат, когда использовали предложенный шорткод [instagram-journal]. Он сгенерировал коллекцию рандомных изображений из Instagram.

Вместо этого вы можете использовать блок опций шорткодов Instagram в правой части экрана редактирования. Если вы хотите, чтобы отображалась ваша лента Instagram, то выберите «User» в поле режимов. Вам потребуется ввести ID пользователя, которое вы получили ранее.

Остальные режимы более-менее понятны. Например:

• Contest — это конкурсный режим, который является особенностью этого плагина.
• Liked — этот режим отображает последние понравившиеся вам изображения и видео.
• Location — этот режим показывает изображения, которые вы сделали в определенных местах. Он использует идентификатор местоположения из API Instagram, который вычисляет координаты с помощью долготы и широты.
• Multi-Tag — это режим выводит на экран изображения по нескольким заданным тэгам. Он использует изображения всех пользователей с этим тэгом, а не только ваши.
• Multi-User — в этом режиме отображаются фотографии нескольких пользователей.
• Popular — этот режим демонстрирует ваши наиболее популярные фотографии.
• Tag — в этом режиме показаны фотографии по заданному тэгу, например, «еда». Как и Multi-Tag, он использует изображения всех пользователей с этим тэгом, а не только ваши.

Существует также несколько режимов работы галереи. Краткое описание:

• Classic — в этом режиме изображения демонстрируются в виде сетки без заполнений пространства между изображениями и без показа деталей изображения, кроме вашего имени, при наведении курсора на изображение.
• Collage — этот режим выводит на экран изображения в виде сетки размером 2×2. Два верхних и два нижних изображения демонстрируются как автоматический слайдер – карусель.
• Contest — этот режим показывает фотографии, которые собрали наибольшее количество лайков, и используя его, вам не придется проводить конкурс. Изображения отображаются в виде списка, а под каждой фотографией есть количество собранных лайков и имя пользователя Instagram.
• Infinity Carousel — это быстро прокручивающийся слайдер – карусель, в котором фотографии отображаются по кругу.
• Large Carousel — в этом слайдере на экран не выводятся дополнительные изображения, только если пользователь не сделает это вручную. Первая фотография отображается в качестве миниатюры с левой стороны, а две других отображаются в полном размере с правой стороны экрана.
• Section Carousel — этот режим показывает 2 изображения одновременно. Ваше имя, описание, дата публикации, количество лайков и комментариев находятся под фотографиями. Технически это слайдер, но пользователям придётся листать изображения вручную.

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

Как только вы завершили настройки, нажмите «Insert Shortcode», чтобы добавить свою галерею к записи или странице. Всё очень просто.

Конкурсы

С помощью этой полезной функции вы сможете проводить собственные фото-конкурсы. Для этого вам нужно придумать хештэг, а конкурсантам выкладывать изображения с этим хештэгом. В инструкции прекрасно описано, что обозначает каждый параметр и как модерировать записи.

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

Цена и техническая поддержка

Этот плагин можно купить на CodeCanyon за $19. За эти деньги вы также получите доступ к дальнейшим обновлениям и до 6 месяцев технической поддержки, которая осуществляется в форме прямой связи с разработчиком плагина, исправление багов и помощь со сторонними ресурсами, нужными для запуска плагина. В поддержку не входит помощь с настройкой и установкой. Расширенную техническую поддержку (на 12 месяцев) можно приобрести за $5.70.

В подарок вы получите тему, которая стоит, как заявляет разработчик, $48:

Даже если вы не покупатель, на ваш вопрос очень быстро ответят. Обращайтесь!

Тема Instagram Journal для WordPress

Тема Instagram Journal для WordPress — приятная тема с логотипом в верхнем левом углу, простым меню навигации справа и любым на выбор режимом галереи на каждой странице.

На страницах этой темы вы можете просматривать фотографии из Instagram, имя автора, количество лайков и дату публикации:

Эта тема бесплатно идёт в комплекте с плагином, но вам нужно установить её вручную в папку с вашими темами через FTP клиент. Это отличное предложения для фотографов и бизнесменов, которые используют Instagram для привлечения клиентов.

Заключение

Этот плагин отлично выполняет свои функции и понравится каждому пользователю Instagram благодаря красивому отображению лент и простоте в использовании. Разработчикам, которые используют это плагин на сайтах клиентов, не составит труда научить их его использовать.

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

Поскольку этот плагин идет сразу с темой, которую этот разработчик мог бы легко продать отдельно на ThemeForest, то цена вполне оправдана. Если вы регулярно выкладываете фотографии в Instagram, обратите особое внимание на этот плагин, ведь это один из самых легких и изящных способов показать вашу ленту.

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

Если вы ищете легко настраиваемый плагин для размещения ваших изображений из Instagram на вашем сайте, то мы рекомендуем попробовать именно Instagram Journal.

Источник: codecanyon.net

Смотрите также: