Следующая статья поможет вам: Как добавить HTML-коды для встраивания на ваш сайт [Quick Tip]
Если вы хотите курировать чужой контент из социальных сетей или просто создавать свой собственный визуальный контент в социальных сетях Работайте усерднее над общей стратегией контента, вам нужно знать, как встроить HTML-код в свой блог или веб-сайт.
Но подождите секунду … прежде чем мы перейдем к мельчайшим деталям этого совета, что, черт возьми, означает «встроить»? А что такое HTML? Если вы совсем не умеете программировать, не беспокойтесь — внедрить внешний контент очень просто. Давайте на секунду разберем основы.
Что значит встроить?
Встроить означает интегрировать внешний контент в другой веб-сайт или страницу. Вы встраиваете что-то, когда размещаете блок кода, называемый кодом для встраивания, в HTML-редактор другого веб-сайта. Когда вы нажимаете «Сохранить» или «Опубликовать», медиафайл отображается на опубликованной странице.
На встроенный контент ссылаются с помощью HTML. HTML — один из самых основных языков, используемых в Интернете для разработки и компоновки веб-страниц.
Вы часто видите этот код, когда находитесь в «задней части» своего сообщения в блоге. Там вы добавите свой код для встраивания.
Большинство социальных и мультимедийных веб-сайтов имеют возможность генерировать код для встраивания прямо в каждый отдельный пост. Вот пример кода для встраивания для HubSpot YouTube видео:
<iframe width="560" height="315" src="https://www.youtube.com/embed/eGUEAvNpz48" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
И вот встроенный результат.
Хотите сделать то же самое в своих сообщениях и страницах блога? Давайте рассмотрим, как вы можете создать код для встраивания для популярных социальных сайтов.
Ниже мы рассмотрим эти шаги более подробно для каждой платформы. В общем, вы хотите:
- Сгенерируйте код для встраивания.
- Получите доступ к своей системе управления контентом и вставьте код для встраивания в программу просмотра HTML.
- Законченный! Вы встроили контент в свой веб-сайт или блог.
Давайте углубимся в каждый шаг.
1. Сгенерируйте код для встраивания.
Прежде чем встраивать внешний контент, вы должны сначала сгенерировать код для публикации или страницы, которую вы хотите встроить на свой веб-сайт.
Мы рассмотрим, как вы можете это сделать в большинстве основных социальных сетей и сетей контента.
Встроить Facebook Почта
Чтобы встроить Facebook сообщение, сделайте следующее:
- Перейдите к Facebook в браузере настольного компьютера и перейдите к сообщению, которое вы хотите встроить.
- Нажмите на три точки в правом верхнем углу поста.
- В раскрывающемся меню нажмите Встроить.
- Появится всплывающее окно, где у вас есть возможность включить полную публикацию и получить доступ к дополнительным настройкам. Новичкам мы рекомендуем оставить параметры как есть и просто щелкнуть Скопировать код.
- Законченный! Вы получили код для встраивания.
Встроить Instagram Почта
Хотите встроить Instagram почта? Процесс похож на Facebookс. Note что вы можете вставлять сообщения только из настольной версии, а не из мобильного приложения.
- Нажмите на три точки в правом верхнем углу публикации.
- Всплывающее окно предложит несколько вариантов. Нажмите Встроитьпредпоследний вариант.
- Появится всплывающее окно с кодом для встраивания. У вас есть возможность включить или исключить заголовок.
- Закончив настройку параметров, нажмите Скопировать код для вставки.
- Полный! У тебя есть Instagram код для вставки.
Встроить YouTube видео
YouTube видео может поднять ваши сообщения в блоге на новый уровень, и самое приятное то, что вы можете бесплатно вставлять его богатый контент в свои сообщения в блоге.
Для этого выполните следующие действия:
- Перейдите к видео, которое вы хотите разместить на своем веб-сайте.
- Под видео, рядом с тем, где расположены лайки, нажмите Делиться.
- Во всплывающем окне будет предложено несколько вариантов, в том числе возможность поделиться публикацией в других социальных сетях. Нажмите Встроить.
- YouTube создаст код для встраивания, который вы можете настроить. Вы можете запустить видео с определенного момента или скрыть управление плеером.
- После выбора параметров нажмите Копировать в правом нижнем углу всплывающего окна.
- Полный! Твой YouTube видео готово к встраиванию.
Встроить твит
Если вы разместите твит на страницах своего веб-сайта или в блоге, вы сможете повысить вовлеченность своих Twitter профиль, не полагаясь на ваш Twitter последователи. Посетители сайта могут взаимодействовать с вашим Twitter контент тоже.
Чтобы встроить Twitter сообщение, сделайте следующее:
- В настольном браузере перейдите к публикации, которую вы хотите встроить.
- Нажмите на три точки в правом верхнем углу поста.
- Появится раскрывающееся меню. Нажмите Вставлять Tweet.
- Twitter перенесет вас на внешнюю страницу на опубликовать.twitter.com, где вы можете дополнительно настроить внешний вид твита, прежде чем встроить его на свой сайт. Например, вы можете установить его в темный режим и изменить язык отображения твита.
- Настроив его, нажмите Обновлять.
- Нажмите Копировать код.
- Законченный! Твит готов к размещению на вашем сайте.
Есть еще один способ сгенерировать код для встраивания Twitter. Идти к опубликовать.twitter.com и вставьте URL сообщения, которое вы хотите встроить. Twitter затем сгенерирует код для встраивания, и вы сможете настроить его, используя тот же процесс, что и в предыдущем методе.
Встроить Pinterest Почта
Встраивание Pinterest сообщение может привести пользователей веб-сайта обратно к вашему Pinterest профиль и помочь вам развить свой Pinterest следующий. Для начала сделайте следующее:
- Перейдите к Pinterest сообщение, которое вы хотите встроить.
- Нажмите на три точки рядом с изображением (или под изображением, если вы используете мобильный веб-сайт).
- В раскрывающемся меню нажмите Получить пин-код для встраивания.
- Появится всплывающее окно с кодом для встраивания. У вас есть возможность создать маленькую, среднюю, большую или очень большую встроенную булавку.
- После того, как вы настроите размер, выделите код и нажмите Команда + С или CTRL+С.
- Законченный! Ваш пин готов к внедрению.
Встроить презентацию SlideShare
Хотя презентации SlideShare в наши дни не так популярны, они все же могут быть удобным мультимедийным инструментом для оживления постов и страниц блога. Вот как встроить презентацию SlideShare:
- Перейдите к презентации SlideShare, которую вы хотите встроить.
- Нажмите Делиться под презентацию.
- В том же окне, где появляется презентация, вы увидите возможность поделиться ею через социальные сети. Код для встраивания будет под ним.
- Выберите размер окна встраивания и слайд, с которого вы хотите начать презентацию.
- Выделите код для встраивания и нажмите Команда + С или CTRL+С.
- Готовый! Теперь вы можете встроить презентацию SlideShare на веб-страницу или в запись.
Встроить внешнюю веб-страницу
Не хотите вставлять сообщение в социальной сети, а хотите встроить веб-страницу? Вы можете встроить внешнюю веб-страницу, используя iframe HTML-тег.
Все встроенные коды, в том числе для социальных сетей, используют теги iframe. Вот как они выглядят:
<frame src="https://#/marketing/url" title="description" ></iframe>
Вы можете использовать эти же теги для встраивания внешней веб-страницы. Вот как:
- Перейдите на веб-страницу, которую вы хотите встроить на свой сайт.
- Откройте приложение «Блокнот» на своем компьютере. Вставьте в него следующий код:
<iframe src="https://#/marketing/url" title="description" width=”” height=””></iframe>
- Вернитесь на веб-страницу и скопируйте URL-адрес.
- Вставьте весь URL-адрес в указанное место в коде iframe. Не забудьте указать в начале URL-адреса и поместить ссылку в кавычки. Вот как должен выглядеть ваш код:
<iframe src="https://example.com/embedded-page" title="Embedded Page Title" width=”” height=””></iframe>
- При желании измените ширину и высоту рамки.
<iframe src="https://example.com/embedded-page" title="Website Page Title" width=”750” height=”500”></iframe>
- Скопируйте всю строку кода. После этого веб-страница готова к внедрению на ваш сайт.
2. Войдите в свою систему управления контентом и вставьте код для встраивания в программу просмотра HTML.
Хотя каждая CMS отличается, вы, вероятно, можете найти средство просмотра HTML с аналогичными шагами. Мы рассмотрим, как вы можете это сделать в CMS Hub и Вордпресс.
CMS Hub
В CMS Hub, вам фактически не нужно добавлять содержимое для встраивания с помощью редактора HTML (хотя у вас есть такая возможность). Вот как:
- На панели инструментов HubSpot перейдите к Маркетинг > Веб-сайт > Блог. Если вы планируете добавить код на страницу веб-сайта, перейдите к Маркетинг > Веб-сайт > Страницы веб-сайта.
- Найдите сообщение или страницу, на которую вы хотите добавить код для встраивания. Наведите на него курсор, затем нажмите Редактировать.
- Нажмите на модуль, в который вы хотите добавить код для встраивания. В верхней части экрана появится панель параметров. В правой части нажмите Вставлять.
- Выбирать Встроить из выпадающего меню.
- Появится всплывающее окно. Вставьте код iframe в текстовую строку.
- Нажмите Вставлять.
- Законченный! Вы можете отредактировать ширину и высоту встроенного содержимого, чтобы настроить его дальше.
Чтобы получить доступ к редактору HTML, выполните шаги 1–3, описанные выше. На верхней панели параметров нажмите Передовой > Исходный код. Затем вы можете вставить код для вставки вручную. Note что конечный результат одинаков.
Вордпресс
Чтобы вставить код для встраивания на свой веб-сайт WordPress, выполните следующие действия:
- Войдите в свою административную область и перейдите в любой Страницы или Сообщения.
- Щелкните заголовок сообщения, в которое вы хотите добавить код для встраивания. Это действие приведет вас к редактору сообщений.
- Нажмите на Текст вкладку в правом верхнем углу текстового редактора.
- Вставьте код для встраивания туда, где вы хотите, чтобы модуль отображался.
3. Готово! Вы встроили контент на свой веб-сайт или в блог.
Как только вы перезагрузите страницу, появится ваш встроенный социальный пост.
Добавьте встроенный контент, чтобы повысить вовлеченность пользователей
Встраивая внешний контент на свои страницы и в сообщения, вы можете повысить вовлеченность своего веб-сайта и заставить посетителей вашего сайта взаимодействовать с контентом, который вы публикуете в социальных сетях. Самое приятное то, что это легко сделать — просто сгенерируйте код для встраивания, вставьте его в свой HTML-редактор и наблюдайте, как растет вовлеченность пользователей.