Skip to main content

Embedding Social Media Content in HTML (Live Playground)

Introduction​

Embedding social media content into your web pages can help boost engagement and keep your site's content fresh and dynamic. In this tutorial, we will cover how to embed content from popular social media platforms like Twitter, Facebook, and Instagram.

Twitter​

To embed a tweet, follow these steps:

  • Go to the tweet you want to embed on Twitter's website.
  • Click on the dropdown menu at the top-right corner of the tweet.
  • Select "Embed Tweet."
  • Copy the generated HTML code and paste it into your web page.

Example:

HTML
<!-- Embedded Tweet -->
<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">
    This is an example tweet.
    <a href="https://twitter.com/hashtag/Example?src=hash&amp;ref_src=twsrc%5Etfw">#Example</a>
  </p>
  &mdash; Example User (@exampleuser)
  <a href="https://twitter.com/exampleuser/status/1234567890123456789?ref_src=twsrc%5Etfw">April 27, 2023</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

The HTML code includes a <blockquote> element that displays the tweet's content, along with a <script> tag that loads Twitter's JavaScript library for styling and interactivity.

Live Playground, Try it Yourself

Facebook​

To embed a Facebook post, follow these steps:

  • Go to the post you want to embed on Facebook's website.
  • Click on the dropdown menu at the top-right corner of the post.
  • Select "Embed."
  • Copy the generated HTML code and paste it into your web page.

Example:

HTML
<!-- Embedded Facebook Post -->
<div id="fb-root"></div>
<script
  async
  defer
  crossorigin="anonymous"
  src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v11.0"
></script>
<div
  class="fb-post"
  data-href="https://www.facebook.com/FacebookApp/posts/1234567890123456"
  data-show-text="true"
  data-width="auto"
>
  <blockquote cite="https://www.facebook.com/FacebookApp/posts/1234567890123456" class="fb-xfbml-parse-ignore">
    <p>Example Facebook post.</p>
    Posted by <a href="https://www.facebook.com/FacebookApp/">Facebook App</a> on&nbsp;<a
      href="https://www.facebook.com/FacebookApp/posts/1234567890123456"
      >April 27, 2023</a
    >
  </blockquote>
</div>

The HTML code includes a <div> element that displays the post's content, along with a <script> tag that loads Facebook's JavaScript SDK for styling and interactivity.

Live Playground, Try it Yourself

Instagram​

To embed an Instagram post, follow these steps:

  • Go to the post you want to embed on Instagram's website.
  • Click on the three-dot menu at the top-right corner of the post.
  • Select "Embed."
  • Copy the generated HTML code and paste it into your web page.

Example:

HTML
<!-- Embedded Instagram Post -->
<blockquote
  class="instagram-media"
  data-instgrm-permalink="https://www.instagram.com/p/ABCDEFGHIJKLMNOP/?utm_source=ig_embed&amp;utm_medium=loading"
  data-instgrm-version="14"
  style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"
>
  <div style="padding:16px;">
    <a
      href="https://www.instagram.com/p/ABCDEFGHIJKLMNOP/?utm_source=ig_embed&amp;utm_medium=loading"
      style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;"
      target="_blank"
    >
      <div style=" display: flex; flex-direction: row; align-items: center;">
        <div
          style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"
        ></div>
        <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;">
          <div
            style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"
          ></div>
          <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div>
        </div>
      </div>
      <div style="padding: 19% 0;"></div>
      <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"></div>
      <div style="padding-top: 8px;">
        <div
          style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"
        >
          Click to view Instagram post
        </div>
      </div>
    </a>
  </div>
</blockquote>
<script async src="//www.instagram.com/embed.js"></script>

The HTML code includes a <blockquote> element that displays the Instagram post's content, along with a <script> tag that loads Instagram's JavaScript library for styling and interactivity.

Live Playground, Try it Yourself

Conclusion​

Embedding social media content in your web pages can help increase user engagement and add a dynamic element to your website. Always remember to follow the guidelines and terms of service for each social media platform when embedding content.