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

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

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

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

API Инстаграма

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

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

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

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

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

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

Ни один из этих сайтов не имел официальной поддержки, и ни один из них не использовал API 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. Если вы забудете загрузить изображение на свой веб-сайт, переместите все изображения вниз по сетке и добавите новое изображение в первый слот, ваши каналы будут выглядеть по-другому.

Вторым существенным недостатком является то, что он занимает место на вашем хостинге . Преимущество использования доступа или очистки Instagram API заключается в том, что изображения по-прежнему размещаются в 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. Все эти опции позволят добиться именно того, чего вы хотите, с минимальной настройкой. Конечно, у них есть свои преимущества и недостатки, и некоторые из них не бесплатны, но это именно то, на что вам нужно обратить внимание.