The Ultimate Guide to Embedding Content on Your Website

Embedding social media content into your blog or website can significantly impact sales, audience trust, and the authenticity of your marketing initiatives. This is especially true if you’re embedding user-generated content:

• Consumers rank authentic, user-generated content as the most trustworthy form of content.
• 77{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f} of consumers would be more inclined to purchase a product or service if they incorporated user-generated content into marketing initiatives.
• Seeing photos and videos from other consumers before making a purchase reduces the likelihood of a return for 69{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f} of shoppers.

Despite the benefits, figuring out how to embed this content can be tricky. This post is a step-by-step guide to embedding social media content into your website from Twitter, Facebook, Instagram, Pinterest, Google Calendar, YouTube, and TikTok.

Table of Contents

1. Find the tweet you’d like to embed.

The first step to embedding a Tweet is finding the one you want to display in its natural habitat — Twitter. You can only get embed codes from its website.

2. Click the three dots at the top-right of the tweet.

3. Click Embed Tweet.

Clicking this arrow icon will reveal a dropdown menu of options, including one called “Embed Tweet.” Click this option.

4. Click Copy Code or make customizations.

You can customize the theme (light or dark), set a language, and hide Tweet replies. If you make customizations, click Update, then Copy Code.

5. Paste the code into your website’s HTML editor.

Paste the code into your HTML editor by opening the source code (some content management systems have a “” icon where you can access this source code) and pasting it where you want it to appear.

5. Optional: Add ‘tw-align-center’ after the words “twitter-tweet” in the embed code.

Once you pasted this code into your HTML, however, you’ll want to center-align this tweet so it doesn’t automatically appear pushed up against the left or right side of your webpage. To correct this, add the text, ‘tw-align-center’ (without quotation marks) directly after “twitter-tweet” in the embed code. You can learn more about this method here.

Here’s what the final code should look like:

blockquote class=”twitter-tweet” tw-align-center data-lang=”en”p lang=”en” dir=”ltr”Let us know! 👂brWhat type of content would you like to see from us this year? HubSpot (@HubSpot) a href=”https://twitter.com/HubSpot/status/1085634067679322114?ref_src=twsrc{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}5Etfw”January 16, 2019/a/blockquote
script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″/script

That’s it! This is what your embedded tweet will look like when you’re done:

You can embed a Facebook post or video from the content or use the Developer Embed Tool.

Embed Facebook Post or Video

1. Find the Facebook post you’d like to embed.

Navigate to the post you want to embed from a Facebook user’s profile page or your newsfeed.

2. Click the three dots on the top-right of the post.

3. Click Embed in the dropdown menu.

4. Copy and paste the code into your website’s HTML editor.

5. Optional: Add center and /center tags around the entire HTML snippet to center-align your post.

Once you paste it into your HTML, you can center-align the code so it doesn’t appear pushed up against the left or right side of your webpage. To correct this, wrap the code with ‘center’ and ‘/center’ tags so the Facebook post displays in the center of your article or webpage.

Here’s what the final code should look like with the alignment tag:

centeriframe src=”https://www.facebook.com/plugins/post.php?href=https{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}3A{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}2F{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}2Fwww.facebook.com{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}2Fthehubspotacademy{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}2Fposts{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}2F741606746226328{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}3A0&width=500″ width=”500″ height=”448″ style=”border:none;overflow:hidden” scrolling=”no” frameborder=”0″ allowTransparency=”true” allow=”encrypted-media”/iframe/center

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

1. Identify the content you want to embed and copy the page URL.
2. Navigate to Facebook’s Developer Embed Tool by clicking this link.
3. Paste the URL in the URL of the post field.
4. Set your desired width.
5. Choose whether you want to feature the full post (comments included) or the post itself.
6. Click Get Code and paste the code within your site’s HTML.

Embed Facebook Feed

You can embed an entire Facebook feed using a plugin (for WordPress users) or Facebook’s Page Plugin.

Using a WordPress Plugin

WordPress users have several Facebook feed plugins at their disposal. Here’s how to use one:

1. The Custom Facebook Feed, by Smash Balloon, is one such WordPress plugin you can download through your WordPress account. You can download this plugin here.
2. With this plugin downloaded, log into your WordPress account and activate this plugin from within the Plugins menu.
3. Use the Facebook Feed settings of your CMS to select and configure the specific Facebook feed you want to display on your website.
4. Enter the text, ‘[custom-facebook-feed]’ into your website’s HTML editor to generate your chosen Facebook feed.

Using Facebook’s Page Plugin

Facebook has its very own Page Plugin tool you can use to produce an embed code for any Facebook feed. Here’s how to use it:

1. Copy the URL of the page you want to embed.

2. Open Facebook’s Page Plugin tool and paste the URL into the Facebook Page URL field.

3. Add the tabs you want displayed alongside your embedded feed.

The plugin lets you display tabs for Events and/or to a messenger account. To add them to your embedded Facebook feed, enter the words “events” and/or “messages” next to the word “timeline,” all separated by commas into the Tabs field.

4. Customize the dimensions of your Facebook feed.

The default size for a Facebook feed embed is 340×500, but you can choose your own width (min 180 max 500) and height (min 70).

5. Customize elements of your feed embed.

Facebook automatically checks boxes that adapt the plugin to the container width, but you can un-check them for further customization. You can also choose to use a smaller-sized header or hide your overall cover photo.

5. Click Get Code.

6. Click the ‘IFrame’ tab.

The popup window that opens has a tab for JavaScript SDK and IFrame. The first tab is only useful if you’re coding a website from scratch, and IFrame is ready to be embedded into your website’s HTML. Beginners should stick with the iframe code.

7. Copy and paste the embed code into your website’s HTML editor.

8. Optional: Add center and /center tags around the entire IFrame snippet to center-align the feed.

Once you paste the code into your HTML, you can center align the code so it doesn’t appear pushed up against the left or right side of your webpage. To do this, wrap the code with ‘center’ and ‘/center’ tags so the Facebook feed displays in the center of your article or webpage.

Here’s what the final code should look like with the alignment code:

centeriframe style=”border: none; overflow: hidden;” allow=”encrypted-media” xml=”lang” src=”https://www.facebook.com/plugins/page.php?href=https{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}3A{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}2F{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}2Fwww.facebook.com{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}2Fhubspot&tabs=timeline{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}2C{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}20events{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}2C{dba7cf0ad47ab1fe8fb56afab8625a63c119729bdcb3610dd520c9b91c38e48f}20messages&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId” width=”340″ height=”500″ frameborder=”0″ scrolling=”no”/iframe/center