Adding social media feeds to your website is a great way to increase engagement with your audience and keep your website content fresh and up-to-date. In this blog post, we will guide you on how to add Facebook, Twitter, Instagram, TikTok, or Pinterest feeds to your website using simple HTML code snippets.
To display a Facebook feed on your website, follow these simple steps:
Here's the code snippet example you can use to display your Facebook feed:
<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>
Replace "https://www.facebook.com/YOUR_PAGE" with your Facebook Page's URL.
Embedding a Twitter feed is also straightforward. Follow these steps:
Here's the code snippet you can use to display your Twitter feed:
<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>
Replace "YOUR_USERNAME" part with your Twitter profile URL and "YOUR_NAME" with your Twitter handle.
To add an Instagram feed to your website, you need to use 3rd-party service, there is no official easy solution, we suggest using SnapWidget
Here's the code snippet you can use to display your Instagram feed:
<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>
Replace "your-widget-id" with the unique ID generated by SnapWidget. Additionally, replace "your-width" and "your-height" with the desired width and height values for the widget.
By using SnapWidget, you can easily add a stylish and customizable Instagram feed to your website, enhancing your site's visual appeal and providing visitors with a seamless experience when browsing your Instagram content.
To add a TikTok feed to your website, you can use TikTok's official widget. Follow these steps to get started:
Here's the code snippet you can use to display your TikTok feed:
<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>
You need to replace "YOUR_USERNAME" with your own profile username to show desired content.
To add a Pinterest feed to your website, you can use Pinterest's official widget builder. Follow these steps to get started:
Here's the code snippet you can use to display your Pinterest feed:
<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>
By adding social media feeds to your website, you can provide your audience with fresh and engaging content, and increase the visibility of your social media profiles. We hope this blog post has been helpful in guiding you through the process of adding Facebook, Twitter, Instagram, TikTok, or Pinterest feeds to your website using simple HTML code snippets.