Как вставлять фотографии и видео из Instagram на сайт
Вы когда-нибудь хотели опубликовать определенную фотографию или видео в Instagram ) на своем веб-сайте, а затем безуспешно пытались сохранить фотографию на свой компьютер и загрузить ее на свой сайт?
Instagram имеет встроенную функцию, которую вы можете использовать, чтобы легко вставлять фотографии или видео в HTML-код вашего веб-сайта или блога, и вам не нужно быть веб-дизайнером, чтобы понять, как это сделать.
Преимущество встраивания постов Instagram непосредственно в ваши веб-страницы заключается в том, что посетители вашего сайта могут взаимодействовать с постом, как если бы они были в Instagram. Они могут щелкнуть по нему, чтобы перейти на страницу поста или в профиль пользователя, что они оценят, если они уже являются пользователями Instagram.
Нажмите на следующие шаги, чтобы увидеть, как вы можете легко вставить фотографию или видео из Instagram на свой сайт всего за несколько минут.
Найдите страницу с фото или видео в Instagram, которую вы хотите встроить и получите код
Перво-наперво: для этого вам понадобится доступ к Instagram в Интернете, а не мобильное приложение.
Если вам нужно вставить сообщение, которое вы нашли в приложении, вы можете нажать на три точки, которые появляются в верхнем правом углу любого сообщения.
Затем коснитесь параметра « Копировать ссылку», который появляется в меню для копирования.
Вставьте его куда-нибудь, чтобы получить доступ к нему в Интернете.
Например, вы можете вставить его в сообщение электронной почты и отправить его себе, чтобы открыть ссылку на этот пост на настольном компьютере.
Если вы не нашли пример для копирования в первые три шага, мы будем использовать пост с фотографией из официального аккаунта Instagram в Lifewire, но вы можете использовать любой пост в Instagram, который захотите.
Если у вас уже есть URL для поста, просто нажмите на него или скопируйте и вставьте в свой веб-браузер. URL для Instagram пост будет выглядеть примерно так:
Однако, если вы уже находитесь на Instagram.
com (не в приложении, а в Интернете), просматривая домашнюю ленту, профиль, тег или страницу просмотра, вам даже не нужно открывать страницу сообщения, чтобы встроить его в веб-страницу.Вместо того, чтобы щелкнуть правой кнопкой мыши и выбрать «Сохранить как» или сделать снимок экрана с изображением, вы просто будете искать три точки в правом нижнем углу поля изображения, которые будут там, где бы вы ни находились. Вы просматриваете сообщение как всплывающее окно на странице, в вашем фиде или на собственной странице поста.
Выберите эти три серые точки, и вы должны увидеть несколько вариантов всплывающих окон. Нажмите Embed .
- В середине вашего экрана появится окно, отображающее строку кода и синюю кнопку. Если вы хотите включить подпись для отображения на веб-странице, вы можете оставить флажок « Включить подпись» отключенным, но если вы просто хотите показать фотографию или видео, вы можете снять ее.
Вам не нужно знать, как работает какой-либо код или что он означает, чтобы правильно вставить фотографию или видео на ваш сайт. Просто нажмите Copy Embed Code, чтобы автоматически скопировать всю строку кода .
Вы закончили со страницей Instagram сейчас. Далее вы можете перейти на свой сайт или блог, где вы хотите, чтобы пост отображался
com (не в приложении, а в Интернете), просматривая домашнюю ленту, профиль, тег или страницу просмотра, вам даже не нужно открывать страницу сообщения, чтобы встроить его в веб-страницу.
Поскольку вы вряд ли будете редактировать свой веб-сайт на своем телефоне, вам нужно вставить этот код в электронное письмо и отправить его себе, чтобы вы могли использовать его на другом устройстве. Если вы редактируете свой сайт на том же устройстве, что и приложение Instagram, вам нужно только вставить код в HTML-код вашего сайта, как описано ниже.
Добавьте код на свой сайт
Вы можете получить доступ к административной области или панели инструментов любого веб-сайта или платформы блогов, которые вы используете, и найти правильную область для вставки кода.
Например, если ваш сайт работает на WordPress , вам просто нужно получить доступ к редактируемой записи или странице в текстовом режиме (а не в визуальном режиме).
Если вы создаете сайт с использованием чистого HTML или генератора статических сайтов, вы можете вставить необработанный HTML, который вы скопировали, на свой сайт и обойти его.
-
Щелкните правой кнопкой мыши в редакторе и выберите « Вставить», чтобы вставить скопированный код встраивания в поле.
Сохраните, отцентрируйте, если хотите, опубликуйте, и все готово.
Взгляните на опубликованную страницу в Интернете, чтобы увидеть новую фотографию или видео из Instagram, аккуратно встроенные прямо в нее.
Вы должны увидеть фотографию со ссылкой на имя пользователя Instagram вверху, а также количество лайков и комментариев под ней.
Если это видео, а не фотография, посетители вашего сайта смогут воспроизвести видео прямо на вашем сайте.
Конечно, если на вашем сайте ничего не отображается, возможно, вы вставили код в неправильное место или, возможно, не скопировали всю строку кода. Если у вас возникли какие-либо проблемы, посмотрите эту отличную справочную статью по WordPress .
Как отображать фотографии Facebook на вашем веб-сайте (шаг за шагом)
Вы хотите показывать медиафайлы из Facebook на своем веб-сайте WordPress? Отображение фотографий из сообщений Facebook — отличный способ предоставить посетителям сайта свежий и интересный контент.
Если вы не разбираетесь в технологиях, вам может быть сложно импортировать изображения из Facebook на ваш сайт. И если вы не знакомы с копированием и вставкой фрагментов кода, это может сбивать с толку.
Вот почему в этом посте мы покажем вам, как отображать фотографии Facebook на вашем веб-сайте, даже если вы новичок в WordPress.
Вот оглавление, которое поможет вам ориентироваться в различных методах:
- Зачем добавлять фотографии из Facebook в WordPress?
- Простой способ отображения фотографий Facebook
- Встраивание фотографий Facebook вручную
Прежде чем мы углубимся, давайте рассмотрим, почему размещение контента Facebook на вашем веб-сайте — разумная идея.
Зачем показывать фотографии Facebook на вашем сайте?
Люди обычно загружают фотографии на Facebook, чтобы поделиться ими со своими друзьями и семьей.
Но важно помнить, что не у всех есть учетная запись Facebook. Это означает, что ваша идеальная аудитория не увидит ваши фотографии, если вы опубликуете их исключительно на своей странице в Facebook.
Кросс-публикация фотографий Facebook на вашем веб-сайте делает их доступными для всех, независимо от того, есть у них учетная запись Facebook или нет. В результате у вас будет больше людей, взаимодействующих с вашим контентом и изучающих ваш сайт.
Показ фотографий Facebook в WordPress также является идеальным способом получить больше подписчиков в Facebook. Методы, которые мы рассмотрим далее в этой статье, позволяют вашим посетителям ставить лайки и взаимодействовать с вашей страницей в Facebook, не покидая ваш сайт.
Теперь, когда вы знаете о некоторых преимуществах показа фотографий Facebook на своем сайте, давайте рассмотрим способы их встраивания в WordPress.
Простой способ отображения фотографий Facebook на вашем веб-сайте
Самый простой способ отображения фотографий Facebook на вашем веб-сайте — это использование плагина WordPress. Лучшие плагины WordPress улучшают функциональность вашего сайта, предоставляя вам дополнительные функции без необходимости знать, как программировать.
Плагин Custom Facebook Feed Pro позволяет легко интегрировать контент Facebook на ваш сайт WordPress, включая фотографии и другие медиафайлы.
Затем все, что вам нужно, это опубликовать обновление на своей странице в Facebook, и оно автоматически появится на вашем веб-сайте.
Более того, плагин отлично смотрится на вашем сайте прямо из коробки, поэтому вам не потребуется никаких усилий, чтобы ваш контент выглядел так, как вы хотите.
Имея это в виду, давайте рассмотрим шаги по показу фотографий Facebook с помощью плагина Custom Facebook Feed.
Шаг 1. Загрузите и установите Custom Facebook Feed Pro
Для начала вы можете получить свою копию Custom Facebook Feed Pro отсюда.
Затем просто установите и активируйте плагин на своем сайте.
Чтобы получить помощь, вы можете ознакомиться с этим пошаговым руководством по установке плагина WordPress.
Шаг 2: Создайте ленту фотографий Facebook
После установки и активации плагина на своем веб-сайте перейдите в меню Лента Facebook » Все ленты на панели инструментов WordPress.
Затем, чтобы создать новый канал Facebook, просто нажмите Добавить новый .
Далее вам нужно выбрать тип канала. С Custom Facebook Feed Pro у вас есть 9 различных вариантов на выбор: лента событий, лента альбомов, лента видео, лента отзывов и многое другое.
Здесь выберите Фото и нажмите кнопку Далее .
Итак, вы создали новую ленту фотографий на Facebook, так что пришло время подключить ее к Facebook.
Шаг 3. Подключитесь к своей странице Facebook или группе
Теперь вы можете выбрать подключение нового канала к странице Facebook или группе.
Для этого нажмите кнопку Добавить новый .
Появится новое всплывающее окно, в котором вы можете выбрать подключение страницы или Группа . Выберите тот, который вы хотите здесь, а затем нажмите кнопку Подключить .
Теперь плагин перенаправит вас на Facebook и запросит доступ только для чтения к вашей учетной записи. Поскольку он доступен только для чтения, плагин фактически ничего не может изменить, а только читает ваши данные, поэтому он полностью безопасен.
Вы можете выбрать нужную страницу или группу на своем сайте, а затем нажать Далее .
Наконец, нажмите Готово , и ваша лента фотографий Facebook будет иметь доступ только для чтения к вашей странице или группе Facebook.
После этого вы можете просто выбрать Добавить , чтобы завершить добавление источника.
Теперь вы можете выбрать новый добавленный источник для вашей фотоленты Facebook.
Затем просто нажмите Next , чтобы продолжить.
Пришло время для шага 4, где вы можете выбрать внешний вид вашей фотоленты на Facebook.
Шаг 4. Настройте свою ленту фотографий на Facebook
После этого вы можете начать настраивать свою ленту фотографий на Facebook с помощью редактора прямой трансляции.
Слева у вас есть параметры настройки вашей ленты Facebook. Вы также можете проверить предварительный просмотр в реальном времени справа и посмотреть, как выглядит ваша лента.
Теперь здесь можно изменить тип ленты, макет, цветовую схему, дизайн заголовка, оформление поста и многое другое.
Для начала выберите параметр Макет ленты .
Здесь у вас есть 4 различных варианта размещения фотографий на Facebook: Список, Сетка, Каменная кладка, и Карусель .
С макетом списка ваши фотографии на Facebook будут публиковаться одна за другой.
Вы можете выбрать вариант сетки , если хотите показать много фотографий в аккуратных рядах и столбцах, как в галерее Facebook.
Если вы хотите, чтобы ваши фотографии на Facebook сохраняли свои первоначальные пропорции, у вас есть макет masonry .
Вы также можете придать своим фотографиям более динамичный вид с помощью карусели Facebook.
Выберите понравившийся макет и нажмите кнопку Сохранить вверху.
Затем вы можете нажать маленькую кнопку Настроить , чтобы вернуться к предыдущим параметрам.
Теперь вы можете двигаться дальше и установить цвета вашей фотоленты на Facebook.
Для этого просто нажмите на параметр Цветовая схема слева.
На этой странице вы можете выбрать цвета для своей фотоленты на Facebook. Вы можете выбрать из:
- Наследовать от темы: Скопируйте цветовую схему вашего веб-сайта
- Светлая: Выберите яркий вид для вашей ленты фотографий Facebook цветной шрифт
- Пользовательский: Вручную выберите все цвета фида
Выберите понравившуюся цветовую схему и нажмите Сохранить.
После этого вы можете начать редактировать ленту по своему вкусу. С помощью этого простого редактора вы можете установить тип заголовка, стиль публикации, размер фида, поля и многое другое с предварительным просмотром в реальном времени, чтобы помочь вам.
Когда вы закончите, вы можете просто нажать кнопку Сохранить в правом верхнем углу и перейти к следующему шагу, где вы встраиваете канал.
Шаг 5. Отображение ваших фотографий Facebook на WordPress
Теперь пришло время показать фотографии из Facebook на вашем сайте. Эта часть на самом деле довольно проста, и вы можете сделать это двумя разными способами.
Отображение фотографий Facebook на вашей странице
Вы можете легко отображать свою ленту фотографий Facebook на своей веб-странице с помощью редактора прямой трансляции.
Сначала нажмите кнопку Встроить в правом верхнем углу редактора прямой трансляции.
Появится новое всплывающее окно.
Отсюда вы можете выбрать, где показывать свои фотографии на Facebook.
Чтобы продолжить, просто нажмите здесь кнопку Добавить на страницу .
Теперь вы можете увидеть список всех доступных страниц.
Просто выберите страницу, на которой вы хотите показать свои фотографии Facebook, и нажмите кнопку Добавить .
Как только вы это сделаете, плагин перенаправит вас на страницу.
Здесь просто нажмите на маленький значок плюс (+) и выберите виджет Custom Facebook Feed .
Наконец, нажмите Кнопка «Опубликовать» и готово.
Теперь вы успешно добавили свои фотографии из Facebook на свой веб-сайт. Просто зайдите и посмотрите, как они смотрят на ваших посетителей.
Если вы хотите вместо этого показывать свою ленту фотографий Facebook на боковой панели, плагин также поможет вам.
Отображение фотографий Facebook на боковой панели
Вы также можете отображать фотографии Facebook на боковой панели в качестве виджета Facebook.
Для этого сначала перейдите в меню Facebook Feed с панели управления WordPress. Там вы увидите список всех доступных каналов.
Просто нажмите на свою фотоленту в Facebook, чтобы продолжить.
Теперь вы снова увидите редактор прямой трансляции. Здесь просто нажмите кнопку Embed в правом верхнем углу.
Вы увидите всплывающее окно, в котором вы можете выбрать место для своей фотоленты на Facebook. Чтобы продолжить, нажмите кнопку Добавить в виджет .
Теперь плагин перенаправит вас на страницу виджетов. Теперь вы можете выбирать между всеми доступными местами для вашего виджета фотоканала Facebook.
Вы можете просто нажать на Боковая панель из вариантов, чтобы продолжить.
Если вы хотите вместо этого отображать фотографии Facebook в нижнем колонтитуле, просто выберите другие параметры здесь .
В этом уроке мы будем отображать фотографии Facebook на боковой панели.
Теперь просто нажмите кнопку со значком плюса (+) , чтобы добавить новый виджет.
Здесь выберите блок Custom Facebook Feed , и все готово!
Теперь на боковой панели вашего веб-сайта размещено ваше фото из Facebook! Открой его и посмотри, как он выглядит.
В WordPress можно показывать не только простые фотографии. Расширение Smash Balloon для альбома Facebook позволяет вам также встроить альбом Facebook на свой веб-сайт.
Отображение фотографий Facebook на вашем веб-сайте вручную
В качестве альтернативы использованию плагина WordPress для отображения фотографий Facebook на вашем веб-сайте вы можете вставлять свои фотографии вручную.
Это полезный выбор, если вы не заинтересованы в использовании плагина WordPress и имеете опыт редактирования JavaScript и других языков кодирования. Тем не менее, если вам не нравится этот подход, мы предлагаем использовать более простой метод, описанный выше.
Одним из недостатков добавления фотографий Facebook в WordPress вручную является то, что это не так удобно для пользователя.
Плагин WordPress, который мы использовали ранее, автоматически импортирует фотографии из Facebook, отображая их в удобном для пользователя виде. Затем, когда пользователи нажимают на каждое изображение, вы можете увидеть подписи и дополнительную информацию.
Ручной метод требует, чтобы вы нашли отдельные сообщения Facebook с фотографиями, которые вы хотите отобразить. Тогда вместо красивой галереи вы в конечном итоге вставите один пост в Facebook.
Давайте посмотрим, как это работает.
Сначала перейдите на веб-сайт разработчиков Facebook и выберите параметр Embedded Posts .
Затем введите URL-адрес публикации Facebook, содержащей фотографию, которую вы хотите добавить на свой сайт. Вы можете включить полную публикацию или только изображение публикации, установив флажок.
Теперь нажмите кнопку Получить код , чтобы открыть всплывающее окно с кодами для встраивания вашего веб-сайта.
Чтобы встроить свой пост в WordPress, скопируйте первый раздел кода и вставьте его в файл header.
php вашего сайта после открывающего тега
Если вы используете современную тему WordPress, вы можете сделать это с помощью панели настройки WordPress, как показано ниже. Если это так, вставьте код в поле «Заголовок» и сохраните изменения.
Теперь скопируйте второй раздел кода и создайте новую страницу в WordPress.
Если вы используете редактор блоков, добавьте новый блок, щелкнув значок Plus (+) . Затем в разделе «Форматирование» выберите блок WordPress Custom HTML .
Вставьте код встраивания фотографии Facebook непосредственно в блок Custom HTML и опубликуйте свою страницу.
Когда вы посещаете свою живую страницу, она будет выглядеть примерно так, как показано ниже.
Лучший способ отображения фотографий Facebook в WordPress
Как видите, ручное встраивание фотографий Facebook на ваш сайт не даст вам отточенного и удобного дизайна, которого можно достичь при использовании плагина WordPress.
Это также ограничивает количество фотографий, которые вы можете показать, числом, указанным в исходном сообщении.
Принимая во внимание, что с плагином Facebook для Smash Balloon вы можете отображать столько фотографий, сколько захотите, в нескольких лентах Facebook на вашем веб-сайте.
Это поможет вам увеличить взаимодействие между вами и посетителями вашего сайта и поможет вам получить больше лайков за счет отображения динамического контента Facebook непосредственно на вашем веб-сайте.
Так чего же ты ждешь?
Нажмите здесь, чтобы начать работу с Custom Facebook Feeds Pro от Smash Balloon уже сегодня!
Кроме того, плагин может делать гораздо больше, чем просто вставлять фотографии из Facebook.
На самом деле, вы также можете ознакомиться с нашим руководством о том, как встроить видео из Facebook в WordPress и сделать свой сайт еще более привлекательным.
Хотите узнать, как добавить контент из социальных сетей на свой сайт? Вот как встроить виджеты ленты социальных сетей в WordPress.
Наконец, если вам понравилась эта статья, не стесняйтесь подписаться на нас в Twitter и Facebook для получения дополнительных полезных руководств.
Добавление изображений в бесплатный генератор веб-сайтов
Как добавить изображения в бесплатный конструктор веб-сайтов Mobirise?
Пожалуйста, добавьте блок с изображениями и вы сможете их заменить.
Связанные темы
- Mobirise Website Generator v2.11 – сила улучшений
- Генератор дизайна веб-сайтов не предоставляет услуги веб-хостинга?
Было бы интересно иметь область введения HTML, куда мы могли бы поместить внешний код или даже фреймы.
Вы можете получить редактор кода, проверьте его:
https://mobirise.com/extensions/code-editor.html
Опция белого набора меню, когда мы открывали в меню смартфона, должна быть черной, чтобы выделить, возможно, это были бы интересные настройки для следующего обновления.
Вы можете изменить цвет значка гамбургера вручную, используя это правило CSS:
.mbr-hamburger__line {цвет: красный;}
Как получить бесплатный домен для вашего сервиса
Mobirise — это приложение только для разработки веб-сайтов, мы не предоставляем услуги хостинга, поэтому мы не можем помочь вам с вашими потребностями. Вы можете сохранить свой сайт в локальную папку и скопировать его файлы на свой сервер или попробовать опубликовать его на ftp прямо из приложения.
Mobirise установлен на моем MacBook и на рабочем столе Windows. Я начал на своем Mac, но у программы были всевозможные проблемы, поэтому я попробовал ее на своем компьютере с Windows, и она отлично работает. Я купил редактор кода, пробуя программу на своем Mac, затем мне пришлось удалить код, чтобы ввести его в программу на моем компьютере с Windows.
Мне интересно, можно ли получить вторую копию лицензии, которую я могу оставить на другом компьютере? Я зашел так далеко в создании сайта, что теперь боюсь удалять кодовый ключ, если он что-то испортит.
Ваш регистрационный ключ можно использовать на двух компьютерах одновременно. Вы должны войти в систему с одним и тем же адресом электронной почты на обоих компьютерах.
Привет, я только что нашел ваш сайт в Интернете. У меня только один вопрос, как настроить информацию и текст? мне нужно использовать определенную программу или у вас есть предложение. Кроме того, если я хочу создать это для своего бизнеса, как мне сделать это без бренда? Есть ли платная версия?
Вы можете использовать Mobirise бесплатно: https://бесплатный сайт generate.com/history.html
Mobirise бесплатен для коммерческого использования, также вы можете приобрести некоторые расширения, если они вам нужны.
