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

    by Ginny Soskey

    Date

    September 11, 2013 at 4:00 PM

    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:

    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> 

    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

                                         

    SUBSCRIBE TO HUBSPOT'S MARKETING BLOG

    Join 280,000+ fellow marketers! Get HubSpot's latest marketing articles in your inbox. Enter your email:

    Search Inbound Hub

    Subscribe to Marketing Articles by Email

    Subscribe by RSS

    Follow HubSpot

    Call Us: 1-888-HUBSPOT