How To Embed Content From Twitter, Facebook and Google+ Posts

You can embed more than just a Youtube video!

1.1K Flares StumbleUpon 1 Twitter 235 Google+ 671 Facebook 72 Pin It Share 56 LinkedIn 31 Buffer 57 1.1K Flares ×

How do I embed content

Have you ever watched a video on a web page?  Or a tweet right in the middle of a blog post?  Have you wondered how you can add that type of interactive content on your own site?  Well you’re in luck!  I am going to show you how.

What is Embedded Content?

Embedded content is bits of information that you add to your blog post or website from another website.  Instead of using an iframe to pull in entire pages, you can now just add targeted pieces.

Using embedded content not only adds a bit of spice to your page, it is also a great way to cross-pollinate your social media networks.   For instance, you may have a blog post that was shared on Twitter.  In that post is an embedded Google+ post.  Now you have organically exposed your Twitter follower to your Google+ presence.

Who Has Content To Embed?

There are all types of embedded content and most of the major and not so major social networks provide a means of embedding their content.  Some are easier and more seamless than others.  In this article, I am going to give you examples from my top 3:  Facebook, Google and Twitter, though many more networks come to mind, such as:

  • Facebook
  • Google+
  • Twitter
  • Instagram
  • Vine
  • YouTube
  • Pinterest

What Does Content Look Like When It Is Embedded?

Here are three examples of embedded content so you can have an idea how each looks compared to the other.

Facebook (tends to load last, if at all!)

Google+ (may not render nicely on mobile responsive websites)

Twitter (piece of cake and just as pretty)

 

How Do I Embed Content?

Using embedded content is super easy.

Embed From Facebook:

You simply click on the drop-down menu on your post.  Select “Embed post”.

How to embed a Facebook post

Then you simply, copy the embed code and add it to your page or post.

Facebook embedded post code

Embed From Google+:

The process is roughly the same as with Facebook. Select the embed post option from the drop down menu:
HowTo Embed a Google Post

Then you select the embed code. The difference with Google is that you have to insert code in two different files – but only if you do not have the +1 button already installed.

Code to embed a Google Plus Post

If you do have it installed (and I HIGHLY recommend you do), simply insert the second set of code where you want it to appear on your page/post. If you are nt sure, then insert the code into your page/post and review. If it shows up, you are good to go. If not, then select the first set of code and insert it into the header of your theme, as per the instructions.

Embed From Twitter:

If you use WordPress, you can probably just insert the tweet url.  Otherwise, you can go to the tweet you want to embed, click the drop down.

How to embed a tweet

Then you grab the embed code and insert it into your page/post wherever you want ti to appear. Twitter is super easy!

Twitter embeddable tweet code

Summary

It’s easy to embed content is an easy way to give your readers a richer reading experience.  Next time I am going to show you how to add Pinterest pins and a couple other less intuitive types of embedded content to your site.  Check back for a video tutorial also!  <– Hey, I’ll even embed the YouTube video!

Have you tried embedded content?  Do your readers like it?  Let me know your experience in the comments!

Summary
Article Name
How To Embed Content From Twitter, Facebook and Google+ Posts
Author
Description
Detailed How-To article about embedding more than just a Youtube video: Embed content on Google+, Facebook and Twitter.
Kimberly

Kimberly

CEO at SocialNotz
Christ follower. Social Media Aficionado and Chief Content Creator at SocialNotz. Founder of the Social Media Mentors community on Google+ Website Designer. Technology Geek.
Kimberly
Kimberly
Kimberly
About the Author

Kimberly Reynolds (QRKim)

Christ follower. Social Media Aficionado and Chief Content Creator at SocialNotz. Founder of the Social Media Mentors community on Google+ Website Designer. Technology Geek.

36 Comments

  1. Hi Kim,

    Nice breakdown!

    I use embedded posts from FB and twitter if I chat about each network on my blog. Like for specific examples.

    I see the benefit though; helpful for context.

    Thanks :)

    • I really wish Facebook and Google+ embedded content were responsive like Twitter. I’m researching a work around.

      • hi, Kimberly.

        I am curious as to what you find lacking in Facebook and G+ embeds compared to Twitter embeds?

        You can like/+1, comment, etc on both types on embedded posts much like you can retweet, reply etc from the Twitter embeds.

        The one thing I see is no ability to share back to G+ on that embed…which is pretty crazy not to have but I would guess it is something Google is adding at some point.

        • The primary issue with Google+ and Facebook embedded posts, as opposed to Twitter, is that they are not mobile responsive.

    • Hi Kapil. Thank you! Yes, I am working on the Pinterest post right now. Not as easy as the others, but not too hard either.

  2. Hi Kim,

    Do you know if the embeds pass any authority along? It seems an embed would be as powerful as a share or maybe more.

    Also, is it acceptable to embed someone else’s post into a page?

    Thanks, awesome stuff!
    Tom

    • Tom – that is an excellent question. I’m going to do some research today and see what I can find. I do know that when you interact with an embedded post, it is the same as if you’re interacting with the actual page, since the data is pulled in and does not reside on your server.

  3. Really great article! I saw one with a similar topic about a week ago but yours is waaaaaaaay better-written. :-)

    By the time I was halfway through your post I was like “gee, I should really be doing this. Like, a lot.”

    • Thank you so much Steph. Sometimes I find myself reluctant to trying something new because it seems overly complicated. When I started writing this post, I realized that it was so simple that naturally, I started to worry readers would get bored.

    • You are most likely right Andoni…and if they do know, they are not sure WHY they should embed. We will dig deeper in the WHYs in the next post. :)

  4. Thank you for a great article. I already do some embedding, but your article gave a lot of information I was unaware of: G+ rendering, FB loading and the share map were all good to know above and beyond the techniques for embedding.

    I am looking forward to sharing this great article.

  5. Great gouge, Kim. Great info in an easy to follow step-by-step format. This opens up a whole new world for me because I never could figure out how to embed from Google+

    • It’s actually pretty recent Nick. Funny enough, I’m working on a part 2 to this embedded content post and I’m highlighting 3 of my faves: Pinterest, IFTTT and List.ly (my current obsession!)

  6. Thanks for making embedding posts so clear, Kimberly! I don’t know if you mentioned this and I just missed it, but do you let someone know if you have embedded one of their posts? Or do they get notified via Facebook or Twitter at the time?

Leave a Reply