{"id":2720,"date":"2020-05-29T15:37:49","date_gmt":"2020-05-29T15:37:49","guid":{"rendered":"https:\/\/taggbox.com\/support\/?p=2720"},"modified":"2026-04-27T06:56:55","modified_gmt":"2026-04-27T06:56:55","slug":"embed-instagram-feed-on-html-website","status":"publish","type":"post","link":"https:\/\/taggbox.com\/support\/embed-instagram-feed-on-html-website\/","title":{"rendered":"How To Embed Instagram Feed On HTML Website Using Taggbox"},"content":{"rendered":"\n<p>Looking to embed an Instagram feed on HTML website? Displaying your latest Instagram posts directly on your site is a great way to engage visitors and keep your content dynamic. Follow the steps below to integrate your Instagram feed into your HTML website, making your site more interactive and visually appealing.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-text-align-center wp-element-button\" href=\"https:\/\/app.taggbox.com\/accounts\/register\/\" style=\"background-color:#e02d3c\" target=\"_blank\" rel=\"noreferrer noopener\">Create Your Taggbox Account Now<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Add Instagram Feed to an HTML Website<\/strong><\/h2>\n\n\n\n<div style=\"height:19px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1 \u2013 Log In to Your Taggbox Account<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, create your <a href=\"https:\/\/app.taggbox.com\/widget\/\" target=\"_blank\" rel=\"noreferrer noopener\">Taggbox Widget<\/a> account or Log in to your existing account<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"752\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image.png\" alt=\"Log in taggbox account\" class=\"wp-image-12086\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image.png 1600w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-300x141.png 300w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-1024x481.png 1024w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-768x361.png 768w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-1536x722.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 2 &#8211; Pick the Experience for Building Your Feed<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose <strong>\u201cSocial Feed on Website\u201d<\/strong> to Create Your Instagram Feed<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1221\" height=\"602\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-1.png\" alt=\"select social feed on websie\" class=\"wp-image-12087\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-1.png 1221w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-1-300x148.png 300w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-1-1024x505.png 1024w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-1-768x379.png 768w\" sizes=\"(max-width: 1221px) 100vw, 1221px\" \/><\/figure>\n<\/div>\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em><strong>Tip:<\/strong> You can also add multiple feeds from multiple sources like Instagram, Facebook, Twitter, Youtube, etc all in one widget.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3\u00a0 &#8211; Select your Source Network and Create your feed<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click <strong>\u201cInstagram\u201d <\/strong>under the All Networks section.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1547\" height=\"615\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-2.png\" alt=\"choose instagram as source network\" class=\"wp-image-12088\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-2.png 1547w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-2-300x119.png 300w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-2-1024x407.png 1024w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-2-768x305.png 768w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-2-1536x611.png 1536w\" sizes=\"(max-width: 1547px) 100vw, 1547px\" \/><\/figure>\n<\/div>\n\n\n<p>Now, choose one of the following options:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Hashtag (#)<\/strong> \u2013 Create and <a href=\"https:\/\/taggbox.com\/blog\/embed-instagram-hashtag-feed-on-website\/\" target=\"_blank\" rel=\"noreferrer noopener\">embed Instagram hashtag feed<\/a> on your website using selected hashtags.<\/li>\n\n\n\n<li><strong>My Handle<\/strong> \u2013 Link your own Instagram account to display your posts.<\/li>\n\n\n\n<li><strong>Handle (@)<\/strong> \u2013 Pull feeds from any public Instagram account.<\/li>\n\n\n\n<li><strong>Stories<\/strong> \u2013 Connect your profile to display an <a href=\"https:\/\/taggbox.com\/blog\/embed-instagram-stories\/\" type=\"link\" id=\"https:\/\/taggbox.com\/blog\/embed-instagram-stories\/\" target=\"_blank\" rel=\"noreferrer noopener\">Instagram Stories widget<\/a> on your website.<\/li>\n\n\n\n<li><strong>Mentions<\/strong> \u2013 Display posts where your account is mentioned on Instagram.<\/li>\n\n\n\n<li><strong>Tagged (Insta)<\/strong> \u2013 Show posts where your profile is tagged on Instagram.<\/li>\n\n\n\n<li><strong>Tagged (FB)<\/strong> \u2013 Show posts where your profile is tagged on Facebook.<\/li>\n\n\n\n<li><strong>Reels<\/strong> \u2013 Connect to <a href=\"https:\/\/taggbox.com\/blog\/embed-instagram-reels-on-website\/\" target=\"_blank\" rel=\"noreferrer noopener\">add Instagram Reels on website<\/a> pages in your feed.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1075\" height=\"390\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-3.png\" alt=\"Create your instagram feed\" class=\"wp-image-12089\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-3.png 1075w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-3-300x109.png 300w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-3-1024x371.png 1024w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-3-768x279.png 768w\" sizes=\"(max-width: 1075px) 100vw, 1075px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 4 \u2013 Personalize and Moderate Your Instagram Feed<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pick the posts you want to feature on your HTML website instagram feed and mark them as<strong> public or private <\/strong>based on your preference.<\/li>\n\n\n\n<li>Now, click on the Publish Button.<br><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"754\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-5.png\" alt=\"moderate your instagram feed for HTML website\" class=\"wp-image-12091\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-5.png 1600w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-5-300x141.png 300w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-5-1024x483.png 1024w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-5-768x362.png 768w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-5-1536x724.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose a feed layout and customize its colors, fonts, and styling to fit your website design. Then your <a href=\"https:\/\/taggbox.com\/instagram-widget\/html\/\" target=\"_blank\" rel=\"noreferrer noopener\">Instagram feed widget<\/a> will be ready.&nbsp;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"709\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-4.png\" alt=\"customize your instagram feed for HTML website\" class=\"wp-image-12090\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-4.png 1600w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-4-300x133.png 300w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-4-1024x454.png 1024w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-4-768x340.png 768w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-4-1536x681.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Once done, click on <strong>\u201cGenerate Code\u201d.<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5 &#8211; Choose Your Platform and Get the Code<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the<strong> \u201cHTML\u201d<\/strong> option to get the embed code for your HTML website.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"717\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-6.png\" alt=\"select HTML as your Platform\" class=\"wp-image-12092\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-6.png 1600w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-6-300x134.png 300w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-6-1024x459.png 1024w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-6-768x344.png 768w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-6-1536x688.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n\n\n<p>Copy the code provided to <a href=\"https:\/\/taggbox.com\/blog\/embed-instagram-feed-on-website\/\" target=\"_blank\" rel=\"noreferrer noopener\">display your Instagram feed<\/a> on an HTML website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to connect the Instagram Feed to the HTML Website with the embed code:&nbsp;<\/h2>\n\n\n\n<p>Here\u2019s a simple way to do it:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Log in to your HTML website and open the page where you want the Instagram feed to appear.<\/li>\n\n\n\n<li>Paste the Instagram feed HTML code into the desired section (such as a page, blog post, or sidebar).&nbsp;<\/li>\n\n\n\n<li>Save or apply the change.&nbsp;<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"639\" height=\"414\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-7.png\" alt=\"embed code for instagram feed\" class=\"wp-image-12093\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-7.png 639w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2020\/05\/image-7-300x194.png 300w\" sizes=\"(max-width: 639px) 100vw, 639px\" \/><\/figure>\n<\/div>\n\n\n<p>Great! You have successfully embedded Instagram feeds on your HTML website.<\/p>\n\n\n\n<p>If you have any questions or need help, please <a href=\"https:\/\/taggbox.com\/contact-us\/\" target=\"_blank\" rel=\"noreferrer noopener\">contact us<\/a> or write us at support@taggbox.com<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Looking to embed an Instagram feed on HTML website? Displaying your latest Instagram posts directly on your site is a great way to engage visitors and keep your content dynamic. Follow the steps below to integrate your Instagram feed into your HTML website, making your site more interactive and visually appealing. Add Instagram Feed to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41],"tags":[174,175,176],"class_list":["post-2720","post","type-post","status-publish","format-standard","hentry","category-getting-started-widget","tag-embed-instagram-feed-on-html-website","tag-instagram-feeds-on-html","tag-embed-instagram-feeds-on-html"],"_links":{"self":[{"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/posts\/2720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/comments?post=2720"}],"version-history":[{"count":8,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/posts\/2720\/revisions"}],"predecessor-version":[{"id":12266,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/posts\/2720\/revisions\/12266"}],"wp:attachment":[{"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/media?parent=2720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/categories?post=2720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/tags?post=2720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}