Как добавить фотографии из Instagram на свой сайт без API

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

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

Такая настройка привлекательна и может отлично направить посетителей вашего сайта на вашу страницу в Instagram. Однако на самом деле настроить его сложнее, чем вы думаете.

API Instagram

Теперь вы можете сказать мне: «Почему бы просто не использовать один из доступных плагинов?» Ответ, как правило, «идите вперед». Есть много плагинов, которые дают вам эти параметры отображения ленты, и я расскажу о них в конце этого поста.

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

Это не значит, что этого не происходит. Я уверен, что вы видели некоторые из десятков веб-сайтов, которые ничего не делают, кроме очистки Instagram. Такие сайты, как Picdeer, Pictame и Piknow, имеют интересную историю, поэтому позвольте мне ненадолго отвлечься.

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

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

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

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

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

Однако вернемся к основному вопросу. Почему бы просто не использовать один из этих плагинов? Что ж, API Instagram — непостоянная хозяйка. Фактически, совсем недавно, в декабре 2018 года, Instagram внес серьезные изменения в свой API и отказался от старой версии. Видите большой отказ от ответственности/предупреждение вверху этой страницы? Это все предупреждения, которые получили бренды, использующие API.

Теперь плагины, которые вы найдете для отображения каналов Instagram, полагаются на API Instagram или на парсинг. Если Instagram примет меры против парсеров, эти плагины умрут. Если Instagram резко изменит свой API, эти плагины умрут. В любом случае, вы полагаетесь на третью сторону, чтобы адаптировать их код к любым изменениям, которые вносит Instagram, что может быть ненадежным.

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

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

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

Вариант 1: Подделка

Первый вариант, который у вас есть, — это подделать его с большим количеством ручной работы. Это не сложно, но может занять много времени, и это то, что вам придется сделать, если вы хотите сохранить паритет между вашей учетной записью Instagram и «встраиванием» вашего веб-сайта. Я помещаю вставки в пугающие кавычки здесь, потому что технически они даже не встраиваются.

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

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

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

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

Вторым существенным недостатком является то, что он занимает место на вашем хостинге . Преимущество использования доступа или парсинга API Instagram заключается в том, что изображения по-прежнему размещаются в CDN Facebook, а это означает, что они загружаются быстро, не требуя использования ресурсов вашего собственного сервера. Этот фальшивый вариант встраивания не имеет такого преимущества.

Вариант 2. Встраивание вручную

Второй возможный вариант — использовать собственный код и ручные вставки из Instagram. Каждый пост в Instagram имеет возможность встроить его. Нажмите на пост и нажмите на три точки в правом верхнем углу подписи, и один из вариантов — встроить. Это копирует длинный код и использует API Instagram. Основным преимуществом здесь является то, что, несмотря на использование API, это основная функция Instagram, и вряд ли она изменится. Когда Instagram вносит изменения в API, они следят за тем, чтобы их собственные сервисы не пострадали.

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

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

Вариант 3. Использование стороннего парсера

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

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

Затем вы можете использовать этот RSS-канал для встраивания контента на свою страницу. В зависимости от дизайна вашего сайта, вы можете сделать это несколькими способами. Это руководство по использованию RSS-канала и встраиванию контента и изображений на ваш сайт, когда ваш сайт использует архитектуру WordPress. Между тем, в этом руководстве используется простое кодирование HTML и PHP, чтобы сделать то же самое для более традиционного дизайна сайта.

Этот вариант немного не идеален по нескольким причинам. Прежде всего, это требует значительного объема пользовательского кода для вашего сайта. Если у вас нет опыта программирования, вам придется нанять разработчика, что может быть дорого.

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

Вариант 4. Создание пользовательского скребка

Скрапинг, конечно, не так уж и сложен в настройке. Может показаться, что парсинг — это сложно из-за различных решений для парсинга, но все они стараются быть «универсальными», чтобы продавать свои услуги как бизнес. Если все, что вы хотите сделать, это очистить что-то самостоятельно, ваш код, вероятно, будет намного проще. Затем вы можете просто создать некоторый код для очистки Instagram один раз в день или что-то еще, отформатировать данные любым удобным для вас способом и настроить свои собственные встраивания.

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

Вариант 5: Использование плагина

Я знаю, что уже приводил причины, по которым вам не следует использовать плагин, но вы все равно можете его рассмотреть. Некоторые плагины хорошо справляются с изменениями, для работы им не нужен ваш API, и их установка проста.

Рассмотрите следующие варианты: EmbedSocial, Juicer, SnapWidget и Elfsight. Это все варианты, которые сделают именно то, что вы хотите, с минимальной настройкой. Конечно, у них есть свои преимущества и недостатки, и некоторые из них не бесплатны, но это именно то, что вам нужно изучить.