Добавление каналов социальных сетей на ваш веб-сайт — отличный способ увеличить взаимодействие с вашей аудиторией и поддерживать актуальность контента вашего веб-сайта. В этом сообщении блога мы расскажем вам, как добавить ленты Facebook, Twitter, Instagram, TikTok или Pinterest на ваш веб-сайт, используя простые фрагменты кода HTML.
Исходный пост и другой похожий контент на DevPicker.com
Лента Facebook
Чтобы отобразить ленту Facebook на своем веб-сайте, выполните следующие простые действия:
- Сначала перейдите к плагину страницы Facebook: https://developers.facebook.com/docs/plugins/page-plugin.
- Введите URL-адрес своей страницы Facebook и настройте внешний вид по своему вкусу.
- Нажмите «Получить код» и скопируйте сгенерированный код.
Вот пример фрагмента кода, который вы можете использовать для отображения своей ленты Facebook:
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v16.0" nonce="gwrDv3kG"></script>
<div class="fb-page" data-href="https://www.facebook.com/YOUR_PAGE" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/YOUR_PAGE" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/YOUR_PAGE">YOUR_PAGE</a>
</blockquote>
</div>
Замените «https://www.facebook.com/YOUR_PAGE» на URL-адрес вашей страницы Facebook.
Лента Твиттера
Встроить ленту Twitter также просто. Следуй этим шагам:
- Перейдите на страницу публикации Twitter: https://publish.twitter.com/
- Введите URL-адрес своего профиля в Твиттере, затем выберите «Встроенная временная шкала» и нажмите «Далее».
- Настройте внешний вид и нажмите «Копировать код».
Вот фрагмент кода, который вы можете использовать для отображения своей ленты Twitter:
<a class="twitter-timeline" href="https://twitter.com/YOUR_USERNAME" data-theme="light"> Tweets by YOUR_NAME </a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Замените часть «YOUR_USERNAME» URL-адресом вашего профиля в Твиттере, а «YOUR_NAME» — своим дескриптором в Твиттере.
Лента Instagram
Чтобы добавить ленту Instagram на свой веб-сайт, вам необходимо использовать сторонний сервис, официального простого решения не существует, мы предлагаем использовать SnapWidget.
- Посетите SnapWidget: https://snapwidget.com
- Нажмите «Начать» и подключите свою учетную запись Instagram.
- Выберите тип виджета, например «Сетка», «Слайд-шоу» или «Прокрутка».
- Настройте внешний вид, размер и макет, затем нажмите «Получить виджет» внизу страницы.
Вот фрагмент кода, который вы можете использовать для отображения своей ленты Instagram:
<script src="https://snapwidget.com/js/snapwidget.js"></script> <iframe src="https://snapwidget.com/embed/your-widget-id" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:your-width; height:your-height;"></iframe>
Замените «your-widget-id» уникальным идентификатором, сгенерированным SnapWidget. Кроме того, замените «your-width» и «your-height» желаемыми значениями ширины и высоты виджета.
Используя SnapWidget, вы можете легко добавить стильную и настраиваемую ленту Instagram на свой веб-сайт, улучшив визуальную привлекательность вашего сайта и предоставив посетителям беспроблемный опыт просмотра вашего контента в Instagram.
Лента ТикТок
Чтобы добавить ленту TikTok на свой сайт, вы можете использовать официальный виджет TikTok. Чтобы начать, выполните следующие действия:
- Перейдите на страницу TikTok Widget Creator и сгенерируйте код для встраивания своего профиля или видео в TikTok.
- Скопируйте сгенерированный код и вставьте его в HTML-код вашего сайта.
Вот фрагмент кода, который вы можете использовать для отображения своей ленты TikTok:
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@YOUR_USERNAME" data-unique-id="YOUR_USERNAME" data-embed-type="creator" style="max-width: 780px; min-width: 288px;"> <section> <a target="_blank" href="https://www.tiktok.com/@YOUR_USERNAME?refer=creator_embed">@YOUR_USERNAME</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>
Вам нужно заменить «YOUR_USERNAME» на имя пользователя вашего профиля, чтобы отобразить желаемый контент.
Лента Pinterest
Чтобы добавить ленту Pinterest на свой веб-сайт, вы можете использовать официальный конструктор виджетов Pinterest. Чтобы начать, выполните следующие действия:
- Перейдите на страницу Конструктор виджетов Pinterest и выберите тип виджета, который вы хотите создать (пин, доска или профиль).
- Настройте внешний вид вашего виджета и сгенерируйте код для встраивания.
- Скопируйте сгенерированный код и вставьте его в HTML-код вашего сайта.
Вот фрагмент кода, который вы можете использовать для отображения своей ленты Pinterest:
<script async defer src="//assets.pinterest.com/js/pinit.js"></script> <a data-pin-do="embedUser" href="https://www.pinterest.com/YOUR_PINTEREST_NAME/"></a>
Заключение
Добавляя каналы социальных сетей на свой веб-сайт, вы можете предоставлять своей аудитории свежий и интересный контент и повышать видимость своих профилей в социальных сетях. Мы надеемся, что эта запись в блоге помогла вам в процессе добавления каналов Facebook, Twitter, Instagram, TikTok или Pinterest на ваш веб-сайт с помощью простых фрагментов кода HTML.
Источник DevPicker.com
