{"id":306,"date":"2020-05-18T22:03:47","date_gmt":"2020-05-18T22:03:47","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/platforms\/nc-state-theme\/blocks\/instagram-feed-block\/"},"modified":"2026-08-21T17:04:48","modified_gmt":"2026-08-21T21:04:48","slug":"instagram-feed-block","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/instagram-feed-block\/","title":{"rendered":"Instagram Feed Block"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Instagram Feed block is a good option for displaying visual content from an Instagram feed, as well as driving users to view and engage with Instagram channel content. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-block-example-display.png\" data-fullsize=\"3038x1150\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"388\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-block-example-display-1024x388.png\" alt=\"Example display of the Instagram Feed Block\" class=\"wp-image-327\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-block-example-display-1024x388.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-block-example-display-300x114.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-block-example-display-768x291.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-block-example-display-1536x581.png 1536w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-block-example-display-2048x775.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This block depends on installation and configuration of the <a href=\"https:\/\/smashballoon.com\/instagram-feed\/\">Instagram Feed Pro Developer<\/a> third party plugin, made by Smash Balloon. Connect an Instagram account to create a feed to use within this block.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Connect an Instagram Account<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before you can create a feed, you&#8217;ll need to connect the plugin to a source (an Instagram account).<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Log into the Instagram account you want to connect<\/li>\n\n\n\n<li>In a separate tab, navigate to your WordPress dashboard and go to <strong>Instagram Feed<\/strong> then <strong>Settings<\/strong>.<\/li>\n\n\n\n<li>Under <strong>Manage Sources<\/strong> click <strong>Add Source<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Create a Feed<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to your WordPress dashboard and go to&nbsp;<strong>Instagram Feed<\/strong>&nbsp;then&nbsp;<strong>All Feeds<\/strong><\/li>\n\n\n\n<li>Click&nbsp;<strong>Add New<\/strong><\/li>\n\n\n\n<li>Select&nbsp;<strong>User Timeline<\/strong>&nbsp;as the Feed Type and click&nbsp;<strong>Next<\/strong><\/li>\n\n\n\n<li>Select the source created in the Connect an Instagram Account section above and click&nbsp;<strong>Next<\/strong><\/li>\n\n\n\n<li>Select&nbsp;<strong>Default<\/strong>&nbsp;Theme and click&nbsp;<strong>Next<\/strong><\/li>\n\n\n\n<li>Select&nbsp;<strong>Highlight&nbsp;<\/strong>and click&nbsp;<strong>Next<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Your feed has been created, and you should now be on the Customize options page. Follow the steps below to match the styling shown in the example above. Note that these steps only cover settings you need to change. Any setting not mentioned keeps its default value.<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select&nbsp;<strong>Feed Layout<\/strong>\n<ul class=\"wp-block-list\">\n<li>Under Layout select <strong>Highlight<\/strong><\/li>\n\n\n\n<li>Under Highlight Settings set Highlight every to&nbsp;<strong>3<\/strong><\/li>\n\n\n\n<li>Under Number of Posts set Desktop to&nbsp;<strong>3<\/strong>&nbsp;and Mobile to&nbsp;<strong>1<\/strong>.<\/li>\n\n\n\n<li>Under Columns set Desktop to&nbsp;<strong>3<\/strong>, Tablet to&nbsp;<strong>3<\/strong>&nbsp;and Mobile to&nbsp;<strong>1<\/strong><\/li>\n\n\n\n<li>Click&nbsp;<strong>Customize<\/strong>&nbsp;at the top of the page to return to the customize options<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Select&nbsp;<strong>Header<\/strong>&nbsp;and click the toggle to&nbsp;<strong>Disable<\/strong>\n<ul class=\"wp-block-list\">\n<li>Click <strong>Customize<\/strong> at the top of the page to return to the customize options<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Select <strong>Posts<\/strong>\n<ul class=\"wp-block-list\">\n<li>Click <strong>Hover State<\/strong>\n<ul class=\"wp-block-list\">\n<li>Background and text colors are determined by theme<\/li>\n\n\n\n<li>Under Information to display select only <strong>Caption<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Click <strong>Customize<\/strong> at the top of the page to return to the customize options<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Select <strong>Load More Button<\/strong> and click the toggle to <strong>Disable<\/strong>.\n<ul class=\"wp-block-list\">\n<li>Click <strong>Customize<\/strong> at the top of the page to return to the customize options<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Select<strong> Follow Button<\/strong> and click the toggle to <strong>Disable<\/strong>.\n<ul class=\"wp-block-list\">\n<li>Click <strong>Customize<\/strong> at the top of the page to return to the customize options<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Select <strong>Lightbox<\/strong> and click the toggle next to Comments to <strong>Disable<\/strong>\n<ul class=\"wp-block-list\">\n<li>Click <strong>Customize<\/strong> at the top of the page to return to the customize options<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Click <strong>Save<\/strong> in the top right corner. <\/li>\n\n\n\n<li>Click <strong>&lt;\/&gt; Embed<\/strong> and take note of the <strong>number<\/strong> in the shortcode. This is your feed ID #. Your feed is now ready to add to the Instagram Feed block.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Add Feed to an Instagram Feed Block<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>After creating a feed, use the number from the <strong>&lt;\/&gt; Embed<\/strong> pop up <strong>or<\/strong> by navigating to <strong>Instagram Feed <\/strong>then <strong>All Feeds<\/strong>, locating the shortcode next to the feed name and taking note of the <strong>number<\/strong> in the shortcode. <\/li>\n\n\n\n<li>Edit the page where you would like your feed to appear<\/li>\n\n\n\n<li>Insert the <strong>Instagram Feed block<\/strong> by clicking the blue plus sign (+) within the page or the blue plus sign in the top left corner of the editor.<\/li>\n\n\n\n<li>Click the <strong>Settings<\/strong> menu near the Save button to add your feed&#8217;s ID number and adjust the block&#8217;s settings\n<ul class=\"wp-block-list\">\n<li>Note that the feed will not appear in the back end but can be seen in preview and the front end once saved<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-block-mirror.gif\" data-fullsize=\"700x248\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"248\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-block-mirror.gif\" alt=\"Different settings applied to the Instagram Feed block, including mirroring the block's layout.\" class=\"wp-image-325\"\/><\/a><\/figure>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>Click <strong>Save<\/strong><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Recommended Usage<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Instagram Feed block adds visual interest to a page and drives engagement with a unit&#8217;s social channels. For larger-scale feeds, use the Instagram Feed Pro Developer plugin with the <a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/smashballoon\/#shortcode-block\" data-type=\"link\" data-id=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/smashballoon\/#shortcode-block\" target=\"_blank\" rel=\"noreferrer noopener\">Shortcode block<\/a>.<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"In conjunction with Smash Balloon Instagram Feed Pro, this block displays a short feed of Instagram content with additional surrounding context.\"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","_links_to":"","_links_to_target":""},"availability":[49],"content-type":[51],"class_list":["post-306","reference-article","type-reference-article","status-publish","hentry","availability-nc-state-theme","content-type-block"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/reference-article"}],"version-history":[{"count":16,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/306\/revisions"}],"predecessor-version":[{"id":40292,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/306\/revisions\/40292"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=306"}],"wp:term":[{"taxonomy":"availability","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/availability?post=306"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/content-type?post=306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}