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
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!
@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.
Yes, you can definitely embed Instagram posts in your HubSpot blog. While it might not be immediately obvious, you just need to use the embed code provided by Instagram.
Here’s how you can do it:
Go to the Instagram post you want to embed and click on the three dots (...) on the top right corner of the post.
Select “Embed” and copy the code.
In your HubSpot blog editor, switch to the HTML mode and paste the embed code where you want the post to appear.
If you can't find the option or it doesn’t work for you, You might also consider using a social media aggregator to display multiple posts in one place, which can be a great way to showcase your content.
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.
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
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!
@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.