Как легко встроить Instagram в WordPress (шаг за шагом)

Хотите встроить ленты Instagram в WordPress?

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

В этой статье мы покажем вам, как шаг за шагом встроить Instagram в WordPress.

Зачем встраивать Instagram на свой сайт WordPress?

С более чем 1,21 миллиарда активных пользователей в месяц Instagram — отличное место для продвижения ваших продуктов и услуг, повышения узнаваемости бренда и расширения аудитории.

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

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

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

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

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

Как установить плагин Instagram Photos

Лучший способ встроить Instagram в WordPress — использовать ленту социальных фотографий Smash Balloon.

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

В этом руководстве мы будем использовать бесплатную версию Smash Balloon, так как в ней есть все необходимое для добавления ленты Instagram на ваш сайт WordPress. Тем не менее, есть также профессиональная версия, которая позволяет отображать каналы хэштегов, добавлять изображения для покупок в Instagram и многое другое.

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

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

Когда вы будете готовы, установите и активируйте плагин Smash Balloon Social Photo Feed. Для получения дополнительной информации см. Наше руководство по установке плагина WordPress.

Как подключить учетную запись Instagram к WordPress

После активации плагина вашей первой задачей будет подключение вашей учетной записи Instagram к WordPress. Просто перейдите в Лента Instagram »Настройки и нажмите «Добавить новый».

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

Поскольку мы используем бесплатный плагин, просто выберите «Временная шкала пользователя» и нажмите «Далее».

Теперь просто выберите учетную запись Instagram, из которой вы будете получать фотопоток.

Чтобы начать, нажмите кнопку «Добавить источник».

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

Если вы установите флажок рядом с «Личное», то Smash Balloon не будет включать аватар и биографию Instagram в ваш заголовок по умолчанию. Однако вы всегда можете добавить аватар и биографию Instagram позже в настройках плагина.

Выбрав «Личный» или «Бизнес», нажмите «Войти через Facebook».

Теперь вы можете выбрать учетную запись Instagram, которую хотите разместить на своем веб-сайте WordPress, и нажать «Далее».

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

Когда вы это сделаете, нажмите на кнопку «Далее».

Теперь вы увидите всплывающее окно со всей информацией, к которой Smash Balloon будет иметь доступ, и действиями, которые он может выполнять.

Чтобы ограничить доступ Smash Balloon к вашей учетной записи Instagram, просто нажмите любой из переключателей, чтобы переключить его с «Да» на «Нет». Просто имейте в виду, что это может повлиять на фотографии и видео, которые вы можете показывать в своем блоге или на веб-сайте WordPress.

Имея это в виду, мы рекомендуем оставить все переключатели включенными.

Когда вы довольны настройками, нажмите «Готово».

Теперь вы увидите всплывающее окно с учетной записью Instagram, которую вы только что добавили на свой веб-сайт.

Просто установите флажок рядом с этой учетной записью и нажмите «Добавить».

Теперь Smash Balloon вернет вас на экран Instagram Feeds »All Feeds .

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

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

Однако перед встраиванием ленты Instagram вы можете настроить ее внешний вид и добавить недостающую информацию.

Как настроить ленту фотографий в Instagram

По умолчанию Smash Balloon откроет вашу ленту в своем редакторе, готовом для настройки.

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

Большинство этих настроек говорят сами за себя, но мы быстро рассмотрим некоторые ключевые области.

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

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

По умолчанию Smash Balloon показывает одинаковое количество фотографий независимо от того, находятся ли пользователи на настольных компьютерах или мобильных устройствах.

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

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

Для этого просто введите другое число в поле «Мобильный телефон» в разделе «Количество сообщений».

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

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

Чтобы изменить эти настройки по умолчанию, просто введите новые числа в настройки «Столбцы».

После внесения изменений нажмите ссылку «Настроить».

Это вернет вас к основному редактору Smash Balloon, готовому для изучения следующего экрана настроек, который называется «Цветовая схема».

По умолчанию Smash Balloon использует цветовую схему, унаследованную от вашей темы WordPress, но у него также есть темы «Светлая» и «Темная», которые вы можете использовать вместо них.

Другой вариант — создать собственную цветовую схему, выбрав «Пользовательский». Как только это будет сделано, просто используйте элементы управления, чтобы изменить цвет фона, изменить цвет текста в WordPress и многое другое.

По умолчанию Smash Balloon добавляет в ленту Instagram заголовок, который представляет собой изображение вашего профиля и название вашей страницы. Чтобы изменить внешний вид этого раздела, нажмите «Заголовок» в меню слева.

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

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

Чтобы изменить изображение профиля, нажмите «Добавить изображение» в разделе «Показать собственный аватар». Затем вы можете выбрать изображение из медиатеки WordPress или загрузить новую фотографию.

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

Чтобы создать уникальную биографию в Instagram, просто введите ее в поле «Добавить пользовательскую биографию».

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

Чтобы изменить размер изображения, нажмите «Сообщения» в меню слева. Затем выберите опцию «Изображения и видео».

Теперь вы можете выбирать между эскизами, средними и полноразмерными изображениями, используя раскрывающееся меню.

Если вас не устраивает внешний вид канала, вы можете вернуться к этому экрану в любой момент и выбрать «Автоопределение (рекомендуется)» в раскрывающемся списке.

По умолчанию Smash Balloon добавляет кнопку «Загрузить еще» внизу вашей ленты Instagram, чтобы посетители могли прокручивать ваши фотографии и видео.

Вы можете изменить внешний вид этой кнопки, выбрав «Загрузить еще кнопку».

Здесь вы можете помочь кнопке «Загрузить еще» выделиться, изменив цвет ее фона, цвет текста и состояние наведения.

Вы также можете попробовать добавить к кнопке собственное сообщение, введя его в поле «Текст». Таким образом, ваши посетители будут более склонны кликать.

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

Чтобы удалить кнопку, просто переключите ползунок «Включить», чтобы он стал серым.

Если посетителям нравится то, что они видят, они могут решить подписаться с помощью кнопки «Подписаться на Instagram», которая появляется под встроенной лентой.

Поскольку это очень важная кнопка, вы можете добавить ей индивидуальный стиль, чтобы она выделялась.

Вы можете сделать это, выбрав «Follow Button» в меню слева. Здесь вы можете изменить цвет фона кнопки, состояние наведения и цвет текста.

По умолчанию на кнопке отображается ярлык «Подписаться на Instagram».

Вы можете заменить его собственным призывом к действию, введя его в поле «Текст».

Когда вы довольны тем, как выглядит лента Instagram, не забудьте нажать «Сохранить», чтобы сохранить изменения.

Теперь вы готовы добавить ленту Instagram на свой сайт WordPress.

Как встроить ленту Instagram в WordPress

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

Если вы создали более одного канала с помощью канала Smash Balloon Social Photo, вам необходимо знать код канала, если вы собираетесь использовать виджет или блок.

Чтобы получить этот код, перейдите в « Ленту Instagram» «Все ленты» , а затем посмотрите на feed="" часть шорткода. Вам нужно будет добавить этот код в блок или виджет, так что запишите его.

На следующем изображении нам нужно использовать feed="1"

Если вы хотите встроить ленту Instagram на страницу или в публикацию, мы рекомендуем использовать блок ленты Instagram.

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

Просто откройте страницу или публикацию, куда вы хотите встроить фото и видео из Instagram. Затем нажмите значок «+», чтобы добавить новый блок, и начните вводить «Instagram Feed».

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

По умолчанию в блоке будет отображаться один из ваших каналов Smash Balloon. Если вы хотите вместо этого показать другую ленту Instagram, найдите «Настройки короткого кода» в меню справа.

Здесь просто добавьте код feed="" и нажмите «Применить изменения».

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

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

Просто перейдите в « Внешний вид» «Виджеты» на панели инструментов WordPress и нажмите синюю кнопку «+».

В строке поиска введите «Instagram Feed» и выберите нужный виджет, когда он появится.

WordPress имеет встроенный блок «Instagram Feed», поэтому убедитесь, что вы выбрали тот, который показывает официальный логотип Instagram.

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

Виджет автоматически покажет один из каналов, созданных вами с помощью Smash Balloon. Если вы хотите показать другую ленту Instagram, просто введите шорткод ленты в поле «Настройки шорткода».

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

После этого нажмите «Применить изменения».

Теперь вы можете активировать виджет, нажав кнопку «Обновить». Для получения дополнительной информации ознакомьтесь с нашим пошаговым руководством о том, как добавлять и использовать виджеты в WordPress.

Другой вариант — встроить ленту Instagram на любую страницу, публикацию или область, готовую для виджетов, с помощью шорткода.

Просто перейдите в Лента Instagram »Все ленты и скопируйте код в столбце «Шорткод». Теперь вы можете добавить этот код в любой блок Shortcode.

Чтобы получить помощь по размещению шорткода, ознакомьтесь с нашим руководством по добавлению шорткода.

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

В панели управления WordPress просто перейдите в « Внешний вид» «Редактор» .

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

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

Если вы не видите шаблон в списке, нажмите «Просмотреть все шаблоны».

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

После выбора шаблона просто наведите указатель мыши на область, в которую вы хотите добавить фотоленту Instagram.

Затем нажмите синюю кнопку «+».

После этого начните вводить «Instagram Feed».

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

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

Часто задаваемые вопросы о встраивании Instagram в WordPress

Smash Balloon позволяет легко показывать фотографии и видео из Instagram на вашем сайте. При этом вот некоторые из наиболее часто задаваемых вопросов о добавлении ленты Instagram в WordPress.

Как создать бизнес-аккаунт в Instagram?

Smash Balloon Social Photo Feed может отображать фотографии из личной или деловой учетной записи Instagram.

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

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

После этого выберите «Настройки».

Если у вас нет бизнес-аккаунта, на этом экране в меню слева появится надпись «Переключиться на профессиональный аккаунт».

Если у вас в настоящее время есть личная учетная запись и вы хотите переключиться на бизнес-аккаунт, просто щелкните по этой ссылке.

Как подключить страницу Facebook к учетной записи Instagram?

Прежде чем вы сможете добавить ленту Instagram в WordPress, вам необходимо подключить свою учетную запись Instagram к странице Facebook.

Для этого перейдите на страницу Facebook, которую вы хотите использовать, и нажмите «Настройки» в меню слева.

После этого нажмите «Связанная учетная запись». Теперь вы можете выбрать «Instagram» и нажать кнопку «Подключиться».

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

Если вы готовы продолжить, нажмите кнопку «Подключиться».

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

Когда вы будете довольны и готовы двигаться дальше, нажмите «Подтвердить».

Откроется всплывающее окно, в котором вы можете ввести свое имя пользователя и пароль в Instagram.

После этого нажмите «Войти».

Через несколько секунд вы увидите сообщение о том, что ваши учетные записи Instagram и Facebook теперь связаны.

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

Если вам понравилась эта статья, подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.