- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Can you Embed an Instagram post into a Blog post?
SOLVEMay 2, 2017 11:41 AM
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?
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
Accepted Solutions
May 2, 2017 2:21 PM - edited May 2, 2017 2:22 PM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
May 2, 2017 2:51 PM
@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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content