<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1657797781133784&amp;ev=PageView&amp;noscript=1">

Where Marketers Go to Grow

September 11, 2013 // 4:00 PM

How to Add HTML Embed Codes to Your Website [Quick Tip]

Written by | @

how_to_embed_html_codeIf you want to curate others' content from social media or just make your own visual social media content work harder for your overall content strategy, you need to know how to embed HTML code onto your blog or website.

But wait a second ... before we get into the nitty gritty of this tip, what the heck does "embed" mean? And what is HTML? I don't know how to code at all! Let's take a second to break it down:

What is an embed code?

The "embed code" is a block of HTML which is embedded in the page-source and creates an object in doing so. 

HTML: one of the most basic languages used on the web, used to design and lay out web pages. You often see this code when you're in the "back end" of your blog post

Here's what a string of HTML code looks like:

<a href=http://blog.hubspot.com/>HubSpot Blog</a> Download our free guide here for even more helpful HTML tips. 

Embed: the process of putting something into a website or blog post. It's often referenced with HTML to designate interactive content taken from social and content networks. It's a great way to get interactive, visual content on your blog without designing a thing.

Okay, now that we're all on the same page, let's get on with the rest of the post. Here's how you can embed code on any page of your website or blog, featuring embedded content from the top social networks.

how-to-embed-summary

1) Generate the embed code.

Here's how you do it on most of the major social and content networks. On some, you will be able to customize what you'd like to embed before you generate the code.

Facebook

Facebook_embed

Twitter

Twitter_embed

Pinterest

Note: You can embed any post, profile, or board from this page if you have the URL of the object you'd like to embed.

Pinterest_embed

YouTube

YouTube_embed

Google+

google_plus_embed

SlideShare

SlideShare_embed

Instagram

Note: This works for both photos and videos. 

Instagram_embed

2) Highlight the embed code, then copy it to your clipboard.

On Windows, press Control + C. On Mac, press Command + C. Or, right click on your selection and choose 'Copy.' 

step_two_copy_paste

Instagram

Note: This works for both photos and videos on Instagram.

3) In your content management system, open up your HTML viewer. 

Although every CMS is different, you probably can find the HTML viewer with similar steps. Here's how to open the HTML viewer in the HubSpot CMS, HubSpot COS, and WordPress.

HubSpot CMS

open_HTML_CMS

HubSpot COS 

open_HTML_COS

WordPress 

open_HTML_WordPress

4) Paste the HTML snippet you just copied into your HTML viewer window. Then click 'OK' or 'Save.'

Be sure you're not pasting it within another snippet of code -- otherwise you will see errors on your web page. This step is the same regardless of content management system.

paste_HTML

5) Ta-da! You have embedded content onto your website or blog. Here's what it will look like for each social network. 

Facebook 

 

Twitter

Pinterest

YouTube

 

Google+

 

SlideShare

 

Instagram

What are some ways you use embedded content in your marketing?

Image credit: racheocity

free HTML hacks guide

                                     

Topics: Design Content Marketing

Subscribe to HubSpot's Marketing Blog

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

5 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.

5 Comments
subscribe to hubspot's marketing blog
X

Join 300,000 Fellow Marketers

Get expert marketing tips straight to your inbox, and become a better marketer. Subscribe to the Marketing Blog below.