CMS Development

Jess_171
Colaborador

Can you Embed an Instagram post into a Blog post?

resolver

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? 

0 Me gusta
2 Soluciones aceptadas
Ty
Solución
HubSpot Employee
HubSpot Employee

Can you Embed an Instagram post into a Blog post?

resolver

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.

Screen Shot 2017-05-02 at 1.56.14 PM.png

 

 

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. 

Screen Shot 2017-05-02 at 2.13.11 PM.png

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

Screen Shot 2017-05-02 at 2.14.57 PM.png

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.

Screen Shot 2017-05-02 at 2.18.23 PM.png

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

Ver la solución en mensaje original publicado

stefen
Solución
Asesor destacado | Partner
Asesor destacado | Partner

Can you Embed an Instagram post into a Blog post?

resolver

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

Stefen Phelps, Community Champion, Kelp Web Developer

Ver la solución en mensaje original publicado

0 Me gusta
7 Respuestas 7
SW123
Miembro

Can you Embed an Instagram post into a Blog post?

resolver

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!

0 Me gusta
Ty
Solución
HubSpot Employee
HubSpot Employee

Can you Embed an Instagram post into a Blog post?

resolver

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.

Screen Shot 2017-05-02 at 1.56.14 PM.png

 

 

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. 

Screen Shot 2017-05-02 at 2.13.11 PM.png

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

Screen Shot 2017-05-02 at 2.14.57 PM.png

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.

Screen Shot 2017-05-02 at 2.18.23 PM.png

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
Colaborador

Can you Embed an Instagram post into a Blog post?

resolver

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

0 Me gusta
stefen
Asesor destacado | Partner
Asesor destacado | Partner

Can you Embed an Instagram post into a Blog post?

resolver

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

Stefen Phelps, Community Champion, Kelp Web Developer
0 Me gusta
Jess_171
Colaborador

Can you Embed an Instagram post into a Blog post?

resolver

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

 

See screenshot attached. Screen Shot 2017-05-02 at 2.40.03 PM.png

0 Me gusta
stefen
Solución
Asesor destacado | Partner
Asesor destacado | Partner

Can you Embed an Instagram post into a Blog post?

resolver

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

Stefen Phelps, Community Champion, Kelp Web Developer
0 Me gusta
Jess_171
Colaborador

Can you Embed an Instagram post into a Blog post?

resolver

Aha. You are right! 

 

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

0 Me gusta