How to Embed Social Media Posts on Your Website

Social Media updates are great. They are all about sharing moments, information, opinion… with others. And, as you know, most social media platforms can also be linked between themselves and this way, you can share your instagram on Facebook, your pins on Twitter, etc, etc…

Well did you know you can also share these within your websites or blogs? Embedded posts bring a nice “live” feeling to your blogposts as they remain fully interactive (readers can like your posts, comment or even share in some cases, directly from the website they are reading them from).

Embedding social media posts on your website is a great way to boost engagement.

Click To Tweet

In this post we will review how to embed Facebook Posts, Instagram photos, Twitter updates, YouTube videos and even Pinterest Boards.

1. Facebook Posts

With Facebook it is rather straight forward. Choose which post you would like to embed and then simply click on little arrow located in the top-right corner of the post and then select “Embed Post”.

Once you click on “Embed Post”, Facebook will give you the html code you will simply need to add to your website or blogpost to embed the post. For example, the following Facebook post was embedded below just by adding the code provided:

Post by We are Social Media.

Yes it is that easy to embed a Facebook post on any website. And see how you can like or comment directly from here! Even Like the page (Have you liked us yet? :P)

2. Instagram Photos

With Instagram, it is not more difficult. Go on to instagram.com and select the pic you would like to embed on your website or blog. Click on the pic to enlarge it and look for a “3 dots” button located in the bottom-right of the window, click on it and select “Embed”.

A pop up will open and give you the html code you will need to copy/paste within your website for the specific picture to be embedded, as per our example below (this my dog by the way)

Again, piece of cake, no? But the effect is great!

3. Twitter Updates

On Twitter, everything is ready for you to embed any tweets you’d like. Simply find the tweet you want, click on the 3-dots in the bottom menu and select “Embed Tweet”

Again the process is very similar. Copy/Paste the html code Twitter is giving you, onto your website. The result is as follow:

Facehawk – Your Facebook Timeline As a Music Video http://t.co/XDHTOzjpSJ

— We are Social Media (@WeRSM) September 5, 2013

Pretty cool, uh? Especially since you can RT, Mention or Favorite the tweet right from here!

4. Pinterest Boards

Embedding a Pinterest board is somewhat slightly more difficult. But not impossible of course! You will have to pay a visit to Pinterest’s Widget Builder and select “Board Widget”. Copy/Paste the url of the Pinterest board you want to embed and Pinterest will provide the html code you will copy/paste where you want the board to be embedded. However you will also have to add the javascript provided below it. Note that the javascript can be added anywhere in your code and only needs to be added once, no matter how many boards you will embed on your site.

The Javascript is as follows:

<script type=”text/javascript”>
(function(d){
var f = d.getElementsByTagName(‘SCRIPT’)[0], p = d.createElement(‘SCRIPT’);
p.type = ‘text/javascript’;
p.async = true;
p.src = ‘//assets.pinterest.com/js/pinit.js’;
f.parentNode.insertBefore(p, f);
}(document));
</script>

And the result:

5. YouTube videos

Probably the oldest of all when it comes to embedded psots, YouTube is also one of the easiest. Every video you watch on the social video platform can be easily shared on most social networks and embedded on any website.

For this, you just have to click on “Share” and them “Embed”. You can even choose the size of the video you will embed! And the result is always so great! Now time to enjoy a bit of music before your like this post :)