Where Marketers Go to Grow

    Search HubSpot's Blogs

    Start typing...

    Press return/enter to start your search

    June 25, 2014 // 10:00 AM

    The Ultimate Guide to Embedding Social Media Posts on Your Website

    Written by Lindsay Kolowich | @

    embed_social_media_postsWhether you use them to add social proof to your content, support content with examples, or extend your social reach, embedding social media posts can add a lot of value to your website. But figuring out how to actually get them there can be a little tricky.

    In this post, you'll find the ultimate step-by-step guide to embedding social media posts on your website from Twitter, Facebook, Pinterest, Google+, YouTube, Vine, and SlideShare.

    (Unfortunately, LinkedIn still doesn't allow embedding capabilities for specific posts -- although they do offer plugins so you can embed your LinkedIn profile or page.)

    Table of Contents

    Click on a section name to scroll automatically to that section.
    1. Tweets 

    2. Facebook Posts 

    3. Pinterest Pins & Boards 

    4. Google+ Posts 

    5. YouTube Videos 

    6. Vines 

    7. SlideShare Presentations and Infographics 

    8.  

    1) Tweets

    Step 1: Find the tweet you'd like to embed. Click the ellipsis symbol (the three dots) on the bottom to pull down more options.

    tweet-embed-1

    Step 2: Choose "Embed Tweet."

    tweet-embed-2

    Step 3: Copy the code that appears, and paste it into the HTML editor on your website.

    tweet-embed-3

    Step 4: Add "tw-align-center" after the words "twitter-tweet." (You can learn more about this method here.)

    Here's what the final code should look like:

    <blockquote class="twitter-tweet tw-align-center" lang="en"><p>If you don&#39;t take risks, you&#39;ll always have regret. <a href="https://twitter.com/search?q=%23justdoit&amp;src=hash">#justdoit</a></p>&mdash; Nike (@Nike) <a href="https://twitter.com/Nike/statuses/476008225859706880">June 9, 2014</a></blockquote>
    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

    That's it! This is what it'll look like when you're done:

     

    2) Facebook Posts

    Step 1: Find the Facebook post you'd like to embed. Hover your mouse over the top right corner and click the grey arrow that appears to pull down more options.

    facebook-embed-real-1

    Step 2: Choose "Embed Post."

    If you don't see an option to embed the post, then the post is not public and is not embeddable.

    facebook-embed-real-2

    Step 3: Copy the code that appears, and paste it in your website's HTML editor.

    facebook-embed-real-4

    Step 4: Center the embedded post by adding <center> and </center> around the whole HTML snippet.

    Here's what the final code should look like:

    <center><div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-post" data-href="https://www.facebook.com/landondonovan/posts/10154276029540010" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/landondonovan/posts/10154276029540010">Post</a> by <a href="https://www.facebook.com/landondonovan">Landon Donovan</a>.</div></div></center>

    That's it! Here's what it'll look like when you're done:

     

    3) Pinterest Pins & Boards

    Pinterest Pins:

    Step 1: Go to Pinterest's Widget Builder. Select "Pin Widget" in the left-hand column.

    Step 2: Paste in the URL of the pin you'd like to embed. Click "Build It!"

    embed-pinterest-pin-1

    Step 3: Scroll down to the "Copy the code" section. Copy the code from this section, and paste it in the HTML view on your website.

    Do not paste this entire snippet more than once on a single webpage! If you want the pin to appear multiple times, you just need to copy the code right above "<!-- Please call pinit.js only once per page --> and paste it wherever you'd like it to appear on the page -- and don't forget to repeat the following steps in each version you paste. 

    Screen_Shot_2014-06-20_at_12.24.53_PM

    Step 4: Copy the snippet of code I've provided below.

    <!--pinterest-->

    Step 5: Paste that snippet of code between the opening <a> tag and the closing </a> tag, so the code looks like this:

    <a data-pin-do="embedPin" href="http://www.pinterest.com/pin/99360735500167749/"><!--pinterest--></a>
    <!-- Please call pinit.js only once per page -->
    <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

    Step 6: Center the embedded board by adding <center> and </center> around the whole HTML snippet.

    Here's what the final code should look like:

    <center><a data-pin-do="embedPin" href="http://www.pinterest.com/pin/99360735500167749/"><!--pinterest--></a>
    <!-- Please call pinit.js only once per page -->
    <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script></center>

    That's it! Here's what it'll look like when you're done:

    Pinterest Boards:

    Step 1: Go to Pinterest's Widget Builder. Select "Board Widget" in the left-hand column.

    Step 2: Paste in the URL of the board you'd like to embed and choose which size you'd like it to appear. Click "Build It!"

    Screen_Shot_2014-06-24_at_1.47.07_PM

    Step 3: Steps 3-6 are the same as Steps 3-6 above for embedding pins from Pinterest.

    That's it! Here's what an embedded board looks like:

     

    4) Google+ Posts

    Step 1: Find the Google+ post you'd like to embed. Hover your mouse over the top right corner and click the grey arrow that appears to pull down more options.

    google-plus-embed-1

    Step 2: Choose "Embed Post."

    google-plus-embed-2

    Step 3: Copy the entirety of the code that appears, and paste it in the HTML view of your website.

    google-plus-embed3

    Step 4: Center the embedded post by adding <center> and </center> around the whole HTML snippet.

    Here's what the final code should look like:

    <center><!-- Place this tag in your head or just before your close body tag. -->
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

    <!-- Place this tag where you want the widget to render. -->
    <div class="g-post" data-href="https://plus.google.com/110490539670062886957/posts/be2TCKDBMsG"></div></center>

    That's it! Here's what it'll look like when you're done:

     
     

    5) YouTube Videos

    Step 1: Find the YouTube video you'd like to embed on www.youtube.com.

    Step 2: Under the video, choose "Share." In the menu that appears, choose "Embed."

    embed-youtube-1

    Step 3: Copy the code that appears and paste it in the HTML editor of your website.

    embed-youtube-2

    Step 4: Center the embedded video by adding <center> and </center> around the whole HTML snippet.

    Here's what the final code should look like:

    <center><iframe width="560" height="315" src="//www.youtube.com/embed/vUp8xVI6elI?list=UUVeuau7DLrg7zlAjxxDbdww" frameborder="0" allowfullscreen></iframe></center>

    That's it! Here's what it'll look like when you're done:

     


    6) Vines

    Step 1: Find the vine you'd like to embed. Click the ellipsis symbol (the three dots) on the bottom to pull up more options.

    embed-vine-1

    Step 2: On the window that opens up, choose whether you want the "Simple" or "Postcard" view (I chose "Postcard" for this example), the quality of the video, and whether you want the Vine to autoplay when someone visits your webpage.

    Step 3: Copy the code on the left-hand side of your screen, and paste it into the HTML editor on your website.

    Screen_Shot_2014-06-20_at_2.40.22_PM

    Step 4: Center the embedded Vine by adding <center> and </center> around the whole HTML snippet.

    Here's what the final code should look like:

    <center><iframe class="vine-embed" src="https://vine.co/v/MXg2zdviKeT/embed/postcard" width="600" height="600" frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script></center>

    That's it! Here's what it'll look like when you're done:

     

    7) SlideShare Presentations and Infographics

    Step 1: Find the SlideShare presentation or infographic you'd like to embed on SlideShare.net, then click "Embed" in the navigation bar at the top.

    slideshare_step_1

    Step 2: If you want to customize your embeded SlideShare presentation or infographic, click "Customize" and the following options will appear. Choose the options you'd like, then copy the code in the "Embed" section and paste it in the HTML view of your website.

    Screen_Shot_2014-06-24_at_2.20.08_PM

    Step 3: Center the embedded Slideshare by adding <center> and </center> around the whole HTML snippet.

    Here's what the final code should look like:

    <center><iframe src="//www.slideshare.net/slideshow/embed_code/31128788" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen> </iframe> <div> <strong> <a href="https://www.slideshare.net/HubSpot/a-sales-and-marketing-love-story" title="A Sales and Marketing Love Story" target="_blank">A Sales and Marketing Love Story</a> </strong> from <strong><a href="http://www.slideshare.net/HubSpot" target="_blank">HubSpot</a></strong> </div></center>

    That's it! Here's what it'll look like when you're done:

    Some of these embed codes may need a little tweaking to look perfect on your blog or website, but using these steps, you should be off to great start. Happy embedding!

    Topics: Social Media

    Subscribe to HubSpot's Marketing Blog

    Join 350,000+ fellow marketers! Get HubSpot's latest marketing articles straight to your inbox. Enter your email address below:

    Comments

    Sorry we missed you! We close comments for older posts, but we still want to hear from you. Tweet us @HubSpot to continue the discussion.

    Comments