{"id":298,"date":"2020-05-18T21:08:22","date_gmt":"2020-05-18T21:08:22","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/platforms\/nc-state-theme\/third-party-support\/smashballoon\/"},"modified":"2026-08-21T17:05:16","modified_gmt":"2026-08-21T21:05:16","slug":"instagram-feed-pro-plugin","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/instagram-feed-pro-plugin\/","title":{"rendered":"Instagram Feed Pro Developer Plugin"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/smashballoon.com\/instagram-feed\/\">Instagram Feed Pro Developer<\/a> third party plugin, made by Smash Balloon, is a quick, mobile-ready way to display your unit&#8217;s Instagram content on your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a demo, see the video below.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"The Instagram Feed Pro WordPress Plugin v6\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/gGb_vSPqM6g?feature=oembed&#038;enablejsapi=1&#038;origin=https:\/\/university-communications.ncsu.edu\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Display Options<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are two ways to add an Instagram feed to your page, both of which require additional configuration in the plugin.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-red-heading-stripes\"><table class=\"has-fixed-layout\"><thead><tr><th>Block<\/th><th>Description<\/th><th>Use Case<\/th><\/tr><\/thead><tbody><tr><td><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/instagram-feed-block\/\" data-type=\"link\" data-id=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/instagram-feed-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">Instagram Feed Block<\/a><\/td><td>Displays visual content from an Instagram feed in a small, styled block with space for a title, teaser and call to action button.<\/td><td>Pages where you want a quick preview that links to your Instagram page. More purposefully drives engagement with your Instagram.<\/td><\/tr><tr><td><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\">Shortcode Block<\/a><\/td><td>A more flexible option that supports two recommended custom layouts (Highlight and Carousel) that highlight your Instagram&#8217;s imagery.<\/td><td>Pages that need more visual content that has already been curated in your Instagram feed. More about the visuals, less about engagement.<\/td><\/tr><\/tbody><\/table><\/figure>\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\" id=\"instagram-feed-block\">Instagram Feed Block<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><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=\"3038\" height=\"1150\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-block-example-display.png\" alt=\"The Instagram Feed block showing a heading, sub text, a button and a collage of three images importing from an Instagram feed.\" class=\"wp-image-327\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-block-example-display.png 3038w, 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-1024x388.png 1024w, 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: 1500px) 100vw, 1500px\" \/><\/a><figcaption class=\"wp-element-caption\">Example of the Instagram Feed Block<\/figcaption><\/figure>\n\n\n\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<p class=\"wp-block-paragraph\">View the <a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/instagram-feed-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">Instagram Feed block documentation<\/a> to set up this block.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"shortcode-block\">Shortcode Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use the Shortcode block to display Instagram feed content in a custom layout, using shortcode generated after configuring the feed and its layout settings in the plugin.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the Shortcode block, we recommend creating either a Highlight feed or a Carousel feed. Follow the instructions below for whichever layout fits your page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create a Highlight Feed<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/highlight-smashballoon-example.gif\" data-fullsize=\"600x585\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"585\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/highlight-smashballoon-example.gif\" alt=\"A cursor hovers over a collage of images in the highlight layout, showing a red image overlay with white caption text.\" class=\"wp-image-315\" style=\"width:400px\"\/><\/a><figcaption class=\"wp-element-caption\">Example of the Highlight Feed set up using the Shortcode block<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to your WordPress dashboard and go to <strong>Instagram Feed<\/strong> then <strong>All Feeds<\/strong><\/li>\n\n\n\n<li>Click <strong>Add New<\/strong><\/li>\n\n\n\n<li>Select <strong>User Timeline<\/strong> as the Feed Type and click <strong>Next<\/strong><\/li>\n\n\n\n<li>Select the source created in the Connect an Instagram Account section above and click <strong>Next<\/strong><\/li>\n\n\n\n<li>Select <strong>Default<\/strong> Theme and click <strong>Next<\/strong><\/li>\n\n\n\n<li>Select <strong>Highlight <\/strong>and click <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.<\/strong> <strong>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 <strong>Feed Layout<\/strong>\n<ul class=\"wp-block-list\">\n<li>Under Highlight Settings set Highlight every to <strong>6<\/strong><\/li>\n\n\n\n<li>Under Padding input <strong>0<\/strong><\/li>\n\n\n\n<li>Under Number of Posts set Desktop to <strong>35<\/strong> and Mobile to <strong>35<\/strong>. This is what displays in the above example, but you change this number to fit your needs.<\/li>\n\n\n\n<li>Under Columns set Desktop to <strong>6<\/strong>, Tablet to <strong>6<\/strong> and Mobile to <strong>3<\/strong><\/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>Header<\/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>Posts<\/strong>\n<ul class=\"wp-block-list\">\n<li>Click <strong>Hover State<\/strong>\n<ul class=\"wp-block-list\">\n<li>Change Background to <strong>#CC0000<\/strong><\/li>\n\n\n\n<li>Change Text to <strong>#FFFFFF<\/strong><\/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>\n<ul class=\"wp-block-list\">\n<li>Under Color change Background to <strong><strong>#CC0000<\/strong><\/strong>, Hover State to <strong>#990000<\/strong> and text to <strong>#FFFFFF<\/strong><\/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>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 copy the shortcode. Your feed is now ready to add to a page.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Create a Carousel Feed<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/carousel-smashballoon-example.gif\" data-fullsize=\"750x189\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"189\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/carousel-smashballoon-example.gif\" alt=\"A cursor hovers over a row of images in the carousel layout, showing a red overlay with white caption text and how to make the row slide left to show more images.\" class=\"wp-image-312\"\/><\/a><figcaption class=\"wp-element-caption\">Example of the Carousel Feed set up using the Shortcode block<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to your WordPress dashboard and go to <strong>Instagram Feed<\/strong> then <strong>All Feeds<\/strong><\/li>\n\n\n\n<li>Click <strong>Add New<\/strong><\/li>\n\n\n\n<li>Select <strong>User Timeline<\/strong> as the Feed Type and click <strong>Next<\/strong><\/li>\n\n\n\n<li>Select the source created in the Connect an Instagram Account section above and click <strong>Next<\/strong><\/li>\n\n\n\n<li>Select <strong>Default<\/strong> Theme and click <strong>Next<\/strong><\/li>\n\n\n\n<li>Select <strong>Default <\/strong>and click <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.<\/strong> <strong>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 <strong>Feed Layout<\/strong>\n<ul class=\"wp-block-list\">\n<li>Under Layout select<strong> Carousel<\/strong><\/li>\n\n\n\n<li>Under Padding input <strong>0<\/strong><\/li>\n\n\n\n<li>Under Number of Posts set Desktop to <strong>15<\/strong> and Mobile to <strong>15<\/strong><\/li>\n\n\n\n<li>Under Columns set Desktop to <strong>5<\/strong>, Tablet to <strong>5<\/strong> and Mobile to <strong>3<\/strong><\/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>Header<\/strong>\n<ul class=\"wp-block-list\">\n<li>To follow the example above, click the toggle to <strong>Disable<\/strong><\/li>\n\n\n\n<li>If you would like to use a header, keep it toggled to <strong>Enable<\/strong> and adjust these settings: \n<ul class=\"wp-block-list\">\n<li>Under Text set Color to <strong>#CC0000<\/strong><\/li>\n\n\n\n<li>Click the toggle to <strong>Disable <\/strong>Show Bio Text<\/li>\n\n\n\n<li>Click the toggle to <strong>Disable <\/strong>Include Stories<\/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<\/ul>\n<\/li>\n\n\n\n<li>Select <strong>Posts<\/strong>\n<ul class=\"wp-block-list\">\n<li>Select <strong>Caption<\/strong> and click the toggle to <strong>Disable<\/strong>.\n<ul class=\"wp-block-list\">\n<li>Click <strong>Posts<\/strong> at the top of the page to return to the posts options<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Select <strong>Like and Comment Summary<\/strong> and click the toggle to <strong>Disable<\/strong>.\n<ul class=\"wp-block-list\">\n<li>Click <strong>Posts<\/strong> at the top of the page to return to the posts options<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Click <strong>Hover State<\/strong>\n<ul class=\"wp-block-list\">\n<li>Change Background to <strong>#CC0000<\/strong><\/li>\n\n\n\n<li>Change Text to <strong>#FFFFFF<\/strong><\/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 copy the shortcode. Your feed is now ready to add to a page.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Add a Feed to a Page<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-pro-developer-feed-shortcode-block.jpg\" data-fullsize=\"1318x742\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1318\" height=\"742\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-pro-developer-feed-shortcode-block.jpg\" alt=\"The shortcode block with shortcode from the Instagram Feed Pro Developer plugin that displays a configured feed\" class=\"wp-image-40226\" style=\"width:400px\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-pro-developer-feed-shortcode-block.jpg 1318w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-pro-developer-feed-shortcode-block-300x169.jpg 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-pro-developer-feed-shortcode-block-1024x576.jpg 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/instagram-feed-pro-developer-feed-shortcode-block-768x432.jpg 768w\" sizes=\"auto, (max-width: 1318px) 100vw, 1318px\" \/><\/a><figcaption class=\"wp-element-caption\">Example of Instagram feed shortcode in the Shortcode block<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Copy your feed&#8217;s shortcode by clicking <strong>&lt;\/&gt; Embed<\/strong> after configuring your custom options or by navigating to <strong>Instagram Feed <\/strong>then <strong>All Feeds<\/strong>, locating the Shortcode next to the feed name and clicking the Copy Shortcode button <\/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>Shortcode block<\/strong> and paste in your feed&#8217;s shortcode\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\n\n\n<li>Click <strong>Save<\/strong><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Additional Plugin Display Options<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Instagram Feed Pro Developer plugin also allows you to customize the feed to show general content or highlight a specific event, by <a href=\"https:\/\/smashballoon.com\/doc\/displaying-an-instagram-hashtag-feed-on-your-website\/?instagram\" data-type=\"link\" data-id=\"https:\/\/smashballoon.com\/doc\/displaying-an-instagram-hashtag-feed-on-your-website\/?instagram\" target=\"_blank\" rel=\"noreferrer noopener\">displaying an Instagram hashtag feed<\/a> or <a href=\"https:\/\/smashballoon.com\/doc\/displaying-photos-multiple-ids-hashtags-feed\/\" data-type=\"link\" data-id=\"https:\/\/smashballoon.com\/doc\/displaying-photos-multiple-ids-hashtags-feed\/\" target=\"_blank\" rel=\"noreferrer noopener\">displaying photos from multiple user accounts in the same feed<\/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\":\"Display customizable and responsive Instagram feeds from your unit's Instagram account.\"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","_links_to":"","_links_to_target":""},"availability":[49],"content-type":[52],"class_list":["post-298","reference-article","type-reference-article","status-publish","hentry","availability-nc-state-theme","content-type-third-party-plugin"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/298","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":36,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/298\/revisions"}],"predecessor-version":[{"id":40293,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/298\/revisions\/40293"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=298"}],"wp:term":[{"taxonomy":"availability","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/availability?post=298"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/content-type?post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}