JS Blog

Post embed codes of 8 popular social networks

FacebookXRedditEmail

Here are embed codes for post of 8 popular social networks – from Facebook, YouTube, Twitter, Instagram, Reddit, Google+, Tumblr and Pinterest. I also wanted to include LinkedIn, but it doesn’t have such thing.

Some observations:

  • Facebook and YouTube have the simplest, one line of code (iframe), Instagram has the longest one.
  • Pinterest has its own embed code generator (with preview) where size of the embed post can be chosen.
  • All except the one from FB and YT rely on external script which additionally styles the post. This script is only required only once per page – if more posts from same social network are embedded, script doesn’t have to be included with each post.
  • Instagram and Pinterest use defer attribute when including script described in previous bullet point which indicate that script should load after page loads.

About embed code’s length: some CMS like WordPress offers mechanism which requires only to specify from which network to embed post and which post to embed (e.g. its URL) then the system select that network’s embed code and inserts post information in it. So practically for the end user the length of embed code doesn’t mean anything.

Here is the code of demo I used.

Facebook

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpolygon%2Fposts%2F1207194309293195&width=500" width="500" height="482" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

Youtube

<iframe width="560" height="315" src="https://www.youtube.com/embed/9ht1P7fpxoY" frameborder="0" allowfullscreen></iframe>

Twitter

<blockquote class="twitter-tweet" data-lang="en">
    <p lang="en" dir="ltr">
        Meeting new contacts is easier than you think, &amp; here&#39;s the proof: <a href="https://t.co/1fvBRG7OnW">https://t.co/1fvBRG7OnW</a> <a href="https://twitter.com/Waveworkapp">@waveworkapp</a> <a href="https://twitter.com/hashtag/waveworkapp?src=hash">#waveworkapp</a> <a href="https://t.co/EIbwYlTIGA">pic.twitter.com/EIbwYlTIGA</a>
    </p>
    &mdash; The Muse (@dailymuse) <a href="https://twitter.com/dailymuse/status/742435657012781056">June 13, 2016</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Instagram

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" 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:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
    <div style="padding:8px;">
        <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:37.5% 0; text-align:center; width:100%;">
            <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;">
            </div>
        </div>
        <p style=" margin:8px 0 0 0; padding:0 4px;">
            <a href="https://www.instagram.com/p/BGgkEIcIHmu/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">
                Work continues on preparing our new pitch!🌱 #mufc
            </a>
        </p>
        <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">
            A photo posted by Manchester United (@manchesterunited) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-06-11T09:15:27+00:00">Jun 11, 2016 at 2:15am PDT</time>
        </p>
    </div>
</blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

Reddit

<blockquote class="reddit-card" data-card-created="1465848871">
    <a href="https://www.reddit.com/r/golang/comments/4nwph3/go_vs_wordpress/?ref=share&ref_source=embed">Go vs. WordPress</a> from <a href="http://www.reddit.com/r/golang">golang</a>
</blockquote>
<script async src="//embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script>

Pinterest

<a data-pin-do="embedPin" href="https://www.pinterest.com/pin/135671007503209536"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

Google+

<div class="g-post" data-href="https://plus.google.com/+NatGeo/posts/K35zRCzN899"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Tumblr

<div class="tumblr-post" data-href="https://embed.tumblr.com/embed/post/C5BBcjXN4w8qb5uq-loaBQ/145825807167" data-did="03ef8c16844e955d93f35dea2f0798ce6e036555">
    <a href="http://psych2go.me/post/145825807167/i-love-these-10-cute-motivational-posts-from">
        http://psych2go.me/post/145825807167/i-love-these-10-cute-motivational-posts-from
    </a>
</div>
<script async src="https://secure.assets.tumblr.com/post.js"></script>

Jernej

, ,