{"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-03-20T11:46:07","modified_gmt":"2026-03-20T15:46:07","slug":"smashballoon","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/smashballoon\/","title":{"rendered":"Smash Balloon: Instagram Feed Pro"},"content":{"rendered":"\n<p>With its super simple setup, the <a href=\"https:\/\/smashballoon.com\/instagram-feed\/\" data-type=\"URL\" data-id=\"https:\/\/smashballoon.com\/instagram-feed\/\">Smash Balloon: Instagram Feed Pro<\/a> plugin, when used in conjunction with the Shortcode block, is a quick and easy way to display your unit\u2019s Instagram content directly on your website through the use of shortcodes. <\/p>\n\n\n\n<p>Completely responsive and mobile ready, the the Smash Balloon: Instagram Feed Pro plugin allows you to embed Instagram content that looks great on any device and is an efficient way to keep photo content updated. For a demo on using the plugin, please 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\" 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<p>The NC State Web Platform provides several styling tweaks to enable certain shortcode configurations to display optimally within brand guidelines. There are further details on which shortcodes we recommend to content maintainers in the next section, but below is an example of what shortcodes may look like when added to the Shortcode block: <\/p>\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\/smashballoon-shortcode-example.png\" data-fullsize=\"984x432\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"984\" height=\"432\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/smashballoon-shortcode-example.png\" alt=\"An example of a shortcode block with the Instagram Feed shortcode.\" class=\"wp-image-319\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/smashballoon-shortcode-example.png 984w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/smashballoon-shortcode-example-300x132.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/smashballoon-shortcode-example-768x337.png 768w\" sizes=\"auto, (max-width: 984px) 100vw, 984px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Note: <\/strong>for an alternate visual layout, the <a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/platforms\/nc-state-theme\/blocks\/instagram-feed-block\/\">Instagram Feed block<\/a> is also available for quick display of 3 Instagram feed images against a colored background with additional space for title, teaser, and CTA. This option adds additional context to the feed contents with a small page footprint. Consider using this block on landing pages as a teaser to main Instagram channel pages or alternate pages with larger areas for feed displays.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Recommended Usage<\/h2>\n\n\n\n<p>The following two examples are our preferred layouts. Settings to configure each layout can be made within the plugin settings.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Highlight Layout<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><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\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/smashballoon.com\/instagram-feed\/demo\/highlight\/\">Learn more about the Highlight Layout<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Carousel Layout<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><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\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/smashballoon.com\/instagram-feed\/demo\/carousel\/\">Learn more about the Carousel Layout<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"configuration\">Configuring Smash Ballon<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Manage Sources<\/h3>\n\n\n\n<p>To get started using Instagram feeds through the Smash Balloon plugin, you will need to connect the plugin to a specific source (i.e., Instagram account).<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to Instagram Feed &gt; Settings within the back-end menu.<\/li>\n\n\n\n<li>Under <strong>Manage Sources <\/strong>click <strong>Add Source<\/strong>.<\/li>\n\n\n\n<li>Log into the Instagram account you&#8217;d like to use to display content.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a Feed<\/h3>\n\n\n\n<p>Once a source has been connected, you can create one or more feeds. A feed is used to curate content and display it on a page.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to Instagram Feed &gt; All Feeds within the back-end menu.<\/li>\n\n\n\n<li>Click <strong>Add New<\/strong><\/li>\n\n\n\n<li>Select the source(s) created in the above steps.<\/li>\n<\/ol>\n\n\n\n<p>Click <strong>Next. <\/strong>At this point you will be redirected to the feed styling page. This is where you can choose the layout option you&#8217;d like to use.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Feed Style<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Within the <strong>Customize<\/strong> tab and under the <strong>Section <\/strong>heading<strong> <\/strong>click <strong>Posts<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Captions<\/strong>.<\/li>\n\n\n\n<li>Enter <strong>50 <\/strong>as the maximum character limit and set text size to <strong>12px<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/q0Bf4dpXVq6f3a_E586PPWn5iGLhvbyfLClsRK1aOwc6ru1sPqRPmnSQ-uqU3Gssx0uDa3aGP0pMr00HsPp8QTAgutUlfS-KGGkvMs6FbiYUL9fypS6rhg1_iSrkMoMeabXTnuS-nlIC2rPxhw\" alt=\"The post caption settings\"\/><\/figure>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Click on <strong>Customize<\/strong> to go back to the main customize menu.<\/li>\n\n\n\n<li>Under the <strong>Customize<\/strong> tab select <strong>Feed Layout<\/strong>.<\/li>\n\n\n\n<li>Select <strong>Highlight<\/strong> as your layout.<\/li>\n\n\n\n<li>Scrolling down, within the <strong>Columns<\/strong> and <strong>Number of Posts<\/strong> section enter <strong>3<\/strong> in <strong>all fields<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Save<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/hsPYs9Sa98ywCgKxrRO3shMU60wKI9eI_DcVlhmJKKZyFLdNhxDYfK_UaWU3cYtLQN7DHa_puaQE61TWZkgok_fzx-RwHy-v3HeAImoz14BXRrUFUuEgEyyg8C_I-VFzyb93oF4PzI4QReP26A\" alt=\"The Feed Layout settings for the Highlight layout\"\/><\/figure>\n\n\n\n<ol start=\"9\" class=\"wp-block-list\">\n<li>Go back to the <strong>Posts <\/strong>menu.<\/li>\n\n\n\n<li>Disable <strong>Like and Comment Summary<\/strong>.<\/li>\n\n\n\n<li>Go back to the <strong>Posts <\/strong>menu and select <strong>Hover State<\/strong>.<\/li>\n\n\n\n<li>Under <strong>information to display,<\/strong> deselect all options except for <strong>caption<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/565AuTQR5mY2wiCrTUXrh4SzYOYZXw0ei_nisKr7-5Ihy3B8aBeK8SMv7DCFGfOFdHHuIliPkPIM2AQF4MxnSZlv5R3O42TP4PeORPc8GEKhoyILu2AmMRZuf9unXVoz44zUyT4eTumkjf9Iow\" alt=\"The post hover state settings\"\/><\/figure>\n\n\n\n<ol start=\"13\" class=\"wp-block-list\">\n<li>Click on <strong>Customize<\/strong> to go back to the main customize menu.<\/li>\n\n\n\n<li>Disable <strong>Load More Button<\/strong>.<\/li>\n\n\n\n<li>Disable <strong>Follow Button<\/strong>.<\/li>\n\n\n\n<li>Under <strong>Lightbox<\/strong>, disable <strong>Comments<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Need Help? <\/h2>\n\n\n\n<p>Interested in trying the Smash Balloon: Instagram Feed Pro plugin? Request to have it installed on your site at <a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\" data-type=\"URL\" data-id=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">go.ncsu.edu\/ucomm-dev-request<\/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":17,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/298\/revisions"}],"predecessor-version":[{"id":39565,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/298\/revisions\/39565"}],"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}]}}