Can you Embed an Instagram post into a Blog post?

[Jess_171]

Hello, 

It's important for our company to be able to embed blog posts in our articles in Hubspot. 

So far, I'm seeing no where to put the embed code. Am I overlooking something, or does Hubspot just not have this option? 

If I can't embed, is the next best way to do this to screenshot the Instagram photo I want, hyperlink and credit it? 

[Ty · Accepted solution]

Hi @Jess_171,

I took a look at your problem and did some research, here is what I came up with...

First, if you check out Instagram's docs, they explain that when you choose to embed an image, it generates you HTML to use. HubSpot Blog Posts support both HTML, and JS that would be needed to pull the post from Instagram itself. This is how you would have to embed it:

Step 1: Get The Embed Code

To get the embed code, you will want to go to https://www.instagram.com/your-username-here, from there you click on the 3 circles at the bottom right and you should have a dialog pop up. In this dialog, select "embed", and you should then see this screen.

Step 2: Preparing Your Blog Post Template

It sounds like this may become a reoccuring embed in your blog posts, so I would suggest you create a new module to handle the embeds. If you take a look at the HubL Docs, we will need a "custom HTML" module for each embed you want to use, so let's creat one.

At the top of your file, write out the custom module

{% raw_html "instagram_embed_1" label="What is your Instagram embed code?" value='<div>My HTML Block</div>', export_to_template_context=True %}

Then you need to find where you want to place it in your file (I'll leave this up to you), but to reference the module you just created, you need to call it like this

<div>{{ widget_data.instagram_embed_1.value }}</div>

Now you should have the module created in your template and you're ready to embed!

Step 3: Embedding Your Post

Remember that embed code you copied from step 1? Now is the time to use it, navigate over to your blog post (via edit-post). You should see your newly created module in the module list to the left. 

Click into it, if there is any text in there already, just remove it. Now pase that embed code into the module, it should look like this (Your embed code length may vary).

Now that the embed code is placed, go ahead and hit "Save and go to module list". You should see the page reload on the right side. When the page is finished loading your Instagram embed should be on your page.

Once your Instagram embed shows up, you can save or publish your page and you're done! 🙂

This should cover your question, but please let me know if there is anything else I can explain for you, let me know how it goes!

-- Ty

[SW123]

is there a way to centre Instagram posts? when I embed them, even when clicking on the centred option in the top tool bar, it embeds the post to the left of the page.

Thanks!

[Ty · Accepted solution]

Hi @Jess_171,

I took a look at your problem and did some research, here is what I came up with...

First, if you check out Instagram's docs, they explain that when you choose to embed an image, it generates you HTML to use. HubSpot Blog Posts support both HTML, and JS that would be needed to pull the post from Instagram itself. This is how you would have to embed it:

Step 1: Get The Embed Code

To get the embed code, you will want to go to https://www.instagram.com/your-username-here, from there you click on the 3 circles at the bottom right and you should have a dialog pop up. In this dialog, select "embed", and you should then see this screen.

Step 2: Preparing Your Blog Post Template

It sounds like this may become a reoccuring embed in your blog posts, so I would suggest you create a new module to handle the embeds. If you take a look at the HubL Docs, we will need a "custom HTML" module for each embed you want to use, so let's creat one.

At the top of your file, write out the custom module

{% raw_html "instagram_embed_1" label="What is your Instagram embed code?" value='<div>My HTML Block</div>', export_to_template_context=True %}

Then you need to find where you want to place it in your file (I'll leave this up to you), but to reference the module you just created, you need to call it like this

<div>{{ widget_data.instagram_embed_1.value }}</div>

Now you should have the module created in your template and you're ready to embed!

Step 3: Embedding Your Post

Remember that embed code you copied from step 1? Now is the time to use it, navigate over to your blog post (via edit-post). You should see your newly created module in the module list to the left. 

Click into it, if there is any text in there already, just remove it. Now pase that embed code into the module, it should look like this (Your embed code length may vary).

Now that the embed code is placed, go ahead and hit "Save and go to module list". You should see the page reload on the right side. When the page is finished loading your Instagram embed should be on your page.

Once your Instagram embed shows up, you can save or publish your page and you're done! 🙂

This should cover your question, but please let me know if there is anything else I can explain for you, let me know how it goes!

-- Ty

[Jess_171]

Hi Ty, 

Thanks so much for going the extra mile and giving a step-by-step guide on how to go about this!! It's super helpful. We'll try it out on our end. 

Best,

Jessica

[stefen]

@Jess_171 you can embed instagram posts in hubspot. Just click on "Insert > video" and then paste the embed code in the embed tab.

[Jess_171]

Even then, the image isn't actually showing up. 

See screenshot attached. 

[stefen · Accepted solution]

@Jess_171 it doesn't show up in the edit page view just like videos won't show up. However, once you view the shareable preview or publish it and view the live page it works.

[Jess_171]

Aha. You are right! 

Thank you sir. I believe this will definitely be the easier way moving forward.