How to Add HTML Embed Code to your Site:
- Generate the embed code.
- Highlight the embed code, then copy it to your clipboard.
- In your content management system, open up your HTML viewer.
- Paste the HTML snippet you just copied into your HTML viewer window. Then click 'OK' or 'Save.'
- You have now embedded content onto your website or blog.
If 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>
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.
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.
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.
Note: This works for both photos and videos.
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.'
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.
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.
5) Ta-da! You have embedded content onto your website or blog. Here's what it will look like for each social network.
3 Tips to Get You Started With Photoshop [+Tutorial Videos] http://t.co/aLoXW9XEqs— HubSpot (@HubSpot) September 10, 2013
What are some ways you use embedded content in your marketing?
Image credit: racheocity