Effortlessly Integrate Social Media Feeds into Your Website

  • April 26, 2023
  • 4 min read

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.

Facebook Feed

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.

Twitter Feed

Embedding a Twitter feed is also straightforward. Follow these steps:

  • Go to Twitter's Publish page: https://publish.twitter.com/
  • Enter your Twitter profile URL, then select "Embedded Timeline" and click "Next".
  • Customize the appearance and click "Copy Code".

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.

Instagram Feed

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

  • Visit SnapWidget: https://snapwidget.com
  • Click "Get Started" and connect your Instagram account.
  • Choose a widget type, such as Grid, Slideshow, or Scroll.
  • Customize the appearance, size, and layout, then click "Get Widget" at the bottom of the page.

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.

TikTok Feed

To add a TikTok feed to your website, you can use TikTok's official widget. Follow these steps to get started:

  1. Go to TikTok's Widget Creator page and generate the embed code for your TikTok profile or video.
  2. Copy the generated code and paste it into your website's HTML code.

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.

Pinterest Feed

To add a Pinterest feed to your website, you can use Pinterest's official widget builder. Follow these steps to get started:

  1. Go to Pinterest's Widget Builder page and choose the type of widget you want to create (Pin, Board, or Profile).
  2. Customize your widget's appearance and generate the embed code.
  3. Copy the generated code and paste it into your website's HTML code.

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>

Conclusion

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.


social media integrationwebsite engagementFacebookTwitterInstagramTikTokPinterestweb developmentcode examples