2 Accepted solutions
Accepted Solutions
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
Even then, the image isn't actually showing up.
See screenshot attached.
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