The Ultimate Guide to Embedding Content on Your Website

By lkolowich@hubspot.com (Lindsay Kolowich Cox)

→ Free Download: 5 Key Steps to Building and Maintaining a High Performing 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% 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% 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

How to Embed a Tweet
Embed Facebook Post or Video
Embed Facebook Feed
Embed Instagram Feed and Posts
Embed Pinterest Pins
Embed Pinterest Boards
How to Embed Google Calendar
How to Embed a YouTube Video
How to Embed a TikTok Video

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%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: