{"id":474,"date":"2021-02-23T07:51:12","date_gmt":"2021-02-23T07:51:12","guid":{"rendered":"https:\/\/exponentwptheme.com\/documentation\/?page_id=474"},"modified":"2021-02-23T07:55:43","modified_gmt":"2021-02-23T07:55:43","slug":"how-to-use-instagram-in-tatsu-gallery-module","status":"publish","type":"page","link":"https:\/\/exponentwptheme.com\/documentation\/how-to-use-instagram-in-tatsu-gallery-module\/","title":{"rendered":"How to use Instagram in Tatsu Gallery Module"},"content":{"rendered":"<div  class=\"tatsu-jFHlmAcFI6 tatsu-section  tatsu-bg-overlay   tatsu-clearfix\" data-title=\"\"  data-headerscheme=\"background--dark\"><div class='tatsu-section-pad clearfix' data-padding='{\"d\":\"90px 0px 0px 0px\"}' data-padding-top='90px'><div class=\"tatsu-row-wrap  tatsu-wrap tatsu-row-one-col tatsu-row-has-one-cols tatsu-medium-gutter tatsu-reg-cols  tatsu-clearfix tatsu-BbgGPSv7zB\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-bg-overlay tatsu-one-col tatsu-column-image-none tatsu-column-effect-none  tatsu-TyXn8nOeb\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-5uaJMUAU3  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-5uaJMUAU3.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;}<\/style><h1 style=\"text-align: center\"><strong>How to use Instagram in Tatsu Gallery Module<\/strong><\/h1><\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-column-overlay tatsu-animate-none\" ><\/div><\/div><style>.tatsu-row > .tatsu-TyXn8nOeb.tatsu-column{width: 100%;}.tatsu-TyXn8nOeb.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-TyXn8nOeb > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-TyXn8nOeb > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-TyXn8nOeb > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-TyXn8nOeb > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-TyXn8nOeb.tatsu-column{width: 100%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-TyXn8nOeb.tatsu-column{width: 100%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-TyXn8nOeb.tatsu-column{width: 100%;}}<\/style><\/div><\/div><\/div><\/div><div class=\"tatsu-section-background-wrap\"><div class = \"tatsu-section-background\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-section-overlay\"><\/div><style>.tatsu-jFHlmAcFI6 .tatsu-section-pad{padding: 90px 0px 0px 0px;}.tatsu-jFHlmAcFI6 .tatsu-section-offset-wrap{transform: translateY(-0px);}.tatsu-jFHlmAcFI6 > .tatsu-bottom-divider{z-index: 9999;}.tatsu-jFHlmAcFI6 > .tatsu-top-divider{z-index: 9999;}.tatsu-jFHlmAcFI6 .tatsu-section-overlay{mix-blend-mode: normal;}<\/style><\/div><div  class=\"tatsu-gnxisbplp9tm5lt tatsu-section  tatsu-bg-overlay   tatsu-clearfix\" data-title=\"\"  data-headerscheme=\"background--dark\"><div class='tatsu-section-pad clearfix' data-padding='{\"d\":\"90px 0px 90px 0px\"}' data-padding-top='90px'><div class=\"tatsu-row-wrap  tatsu-wrap tatsu-row-one-col tatsu-row-has-one-cols tatsu-medium-gutter tatsu-reg-cols  tatsu-clearfix tatsu-gnxisbplseesao2h\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-bg-overlay tatsu-one-col tatsu-column-image-none tatsu-column-effect-none  tatsu-gnxisbplv1ghkyjm\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-gnxisbplxpg2fr9n  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-gnxisbplxpg2fr9n.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;}<\/style><p><\/p>\n<p>In this article, we have discussed how you can configure the Facebook and Instagram app to use Instagram in Tatsu Gallery Module. The Process may be lengthy but stay along with the article and follow the steps you will get things as we move further.<\/p>\n<p><\/p>\n<p><\/p>\n<p>When you complete the tutorial you will have a basic understanding of how to get Instagram access tokens and permissions to display Instagram posts in the Tatsu Gallery Module.<\/p>\n<p><\/p>\n<p><\/p>\n<h2 class=\"wp-block-heading\" id=\"before-we-start\">Before we Start:<\/h2>\n<p><\/p>\n<p><\/p>\n<p>You will need:<\/p>\n<p><\/p>\n<p><\/p>\n<ul class=\"wp-block-list\">\n<li>A <a href=\"https:\/\/developers.facebook.com\/apps\">Facebook Developer Account<\/a>.<\/li>\n<li>An <a href=\"https:\/\/www.instagram.com\/?fbclid=IwAR0Gb0GjvXazx-_o0yVdCddILhNtJIbSV7OptfLK73posUSYl50KhhyukRQ\" target=\"_blank\" rel=\"noreferrer noopener\">Instagram account<\/a> with some media.<\/li>\n<\/ul>\n<p><\/p>\n<p><\/p>\n<h2 class=\"wp-block-heading\" id=\"step-1--create-a-facebook-app\">Step 1: Create a Facebook App<\/h2>\n<p><\/p>\n<p><\/p>\n<p>Go to <a href=\"https:\/\/developers.facebook.com\/\">developers.facebook.com<\/a>, click <strong>My Apps<\/strong>, and create a new app. When asked what your app needs to do, select <strong>Build Connected Experiences<\/strong> or <strong>Something Else\/For Everything Else<\/strong>.<\/p>\n<p><\/p>\n<p><\/p>\n<p>Next, to create an App, you will need to enter <strong>App Display Name<\/strong>, <strong>App Contact Email<\/strong> and answer <strong>Do you have a Business Manager account?<\/strong> as \u2018No\u2019 and hit the Create App button.<\/p>\n<p><\/p>\n<p><\/p>\n<p>Once you have created the app and are in the <strong>App Dashboard<\/strong>, navigate to <strong>Settings<\/strong> &gt; <strong>Basic<\/strong>, scroll to the bottom of the page, and click <strong>Add Platform<\/strong>.<\/p>\n<p><\/p>\n<p><\/p>\n<figure class=\"wp-block-image\"><a href=\"http:\/\/www.brandexponents.com\/oshine-knowledgebase\/wp-content\/uploads\/2021\/02\/Creating-facebook-app-Tatsu.png\"><img decoding=\"async\" src=\"http:\/\/www.brandexponents.com\/oshine-knowledgebase\/wp-content\/uploads\/2021\/02\/Creating-facebook-app-Tatsu-1024x754.png\" alt=\"Creating facebook app - Tatsu\" class=\"wp-image-1668\" \/><\/a><figcaption>Creating Facebook App \u2013 Tatsu<\/figcaption><\/figure>\n<p><\/p>\n<p><\/p>\n<p>Choose <strong>a Website<\/strong>, add your website\u2019s URL, and save your changes. You can change the platform later if you wish, but for this tutorial, use <strong>the Website<\/strong>.<\/p>\n<p><\/p>\n<p><\/p>\n<figure class=\"wp-block-image\"><a href=\"http:\/\/www.brandexponents.com\/oshine-knowledgebase\/wp-content\/uploads\/2021\/02\/adding-site-url.png\"><img decoding=\"async\" src=\"http:\/\/www.brandexponents.com\/oshine-knowledgebase\/wp-content\/uploads\/2021\/02\/adding-site-url-1024x757.png\" alt=\"Adding Website URL - Tatsu\" class=\"wp-image-1669\" \/><\/a><figcaption>Adding Website URL<\/figcaption><\/figure>\n<p><\/p>\n<p><\/p>\n<h2 class=\"wp-block-heading\" id=\"step-2--configure-instagram-basic-display\">Step 2: Configure Instagram Basic Display<\/h2>\n<p><\/p>\n<p><\/p>\n<p>Click <strong>Products<\/strong>, locate the <strong>Instagram Basic Display<\/strong> product and click <strong>Set Up<\/strong> to add it to your app.<\/p>\n<p><\/p>\n<p><\/p>\n<figure class=\"wp-block-image\"><a href=\"http:\/\/www.brandexponents.com\/oshine-knowledgebase\/wp-content\/uploads\/2021\/02\/Configure-Instagram-Basic-Display.png\"><img decoding=\"async\" src=\"http:\/\/www.brandexponents.com\/oshine-knowledgebase\/wp-content\/uploads\/2021\/02\/Configure-Instagram-Basic-Display-1024x705.png\" alt=\"Configure Instagram Basic Display\" class=\"wp-image-1670\" \/><\/a><figcaption>Configure Instagram Basic Display<\/figcaption><\/figure>\n<p><\/p>\n<p><\/p>\n<p>Scroll to the bottom of the page and click <strong>Create New App<\/strong>.<\/p>\n<p><\/p>\n<p><\/p>\n<figure class=\"wp-block-image\"><a href=\"http:\/\/www.brandexponents.com\/oshine-knowledgebase\/wp-content\/uploads\/2021\/02\/Create-New-App.png\"><img decoding=\"async\" src=\"http:\/\/www.brandexponents.com\/oshine-knowledgebase\/wp-content\/uploads\/2021\/02\/Create-New-App-1024x684.png\" alt=\"Create New App\" class=\"wp-image-1671\" \/><\/a><figcaption>Create New App<\/figcaption><\/figure>\n<p><\/p>\n<p><\/p>\n<p>In the form that appears, complete each section using the guidelines below.<\/p>\n<p><\/p>\n<p><\/p>\n<h3 class=\"wp-block-heading\" id=\"display-name\">Display Name<\/h3>\n<p><\/p>\n<p><\/p>\n<p>Enter the name of the Facebook app you just created.<\/p>\n<p><\/p>\n<p><\/p>\n<h3 class=\"wp-block-heading\" id=\"valid-oauth-redirect-uris\">Valid OAuth Redirect URIs<\/h3>\n<p><\/p>\n<p><\/p>\n<p>Enter your website\u2019s URL. Normally this would be a dedicated URI that can capture redirect query string parameters, but for this tutorial,  your website\u2019s URL will be fine.<\/p>\n<p><\/p>\n<p><\/p>\n<p>For example: <code>https:\/\/mywebsite.com\/auth\/<\/code><\/p>\n<p><\/p>\n<p><\/p>\n<p>After you enter a URL, save your changes and check the URL again; we may have appended a trailing forward slash depending on your URL  structure. Copy the complete URL somewhere since you will need it in later steps to get authorization codes and access tokens.<\/p>\n<p><\/p>\n<p><\/p>\n<h3 class=\"wp-block-heading\" id=\"deauthorize-callback-url\">Deauthorize Callback URL<\/h3>\n<p><\/p>\n<p><\/p>\n<p>Enter your website\u2019s URL again. Eventually, you will have to change this to a URL that can handle de-authorization notifications, but for the purposes of this tutorial, you can re-use your website URL.<\/p>\n<p><\/p>\n<p><\/p>\n<h3 class=\"wp-block-heading\" id=\"data-deletion-request-callback-url\">Data Deletion Request Callback URL<\/h3>\n<p><\/p>\n<p><\/p>\n<p>Enter your website\u2019s URL once again. Just like the Deauthorize  Callback URL, you will eventually have to change this to a URL that can handle data deletion requests, but for now, you can re-use your website  URL.<\/p>\n<p><\/p>\n<p><\/p>\n<h2 class=\"wp-block-heading\" id=\"step-3--add-an-instagram-test-user\">Step 3: Add an Instagram Test User<\/h2>\n<p><\/p>\n<p><\/p>\n<p>Navigate to <strong>Roles<\/strong> &gt; <strong>Roles<\/strong> and scroll down to the Instagram Testers section. Click <strong>Add Instagram Testers<\/strong> and enter your Instagram account\u2019s username and send the invitation.<\/p>\n<p><\/p>\n<p><\/p>\n<figure class=\"wp-block-image\"><a href=\"http:\/\/www.brandexponents.com\/oshine-knowledgebase\/wp-content\/uploads\/2021\/02\/add-instagram-tester.png\"><img decoding=\"async\" src=\"http:\/\/www.brandexponents.com\/oshine-knowledgebase\/wp-content\/uploads\/2021\/02\/add-instagram-tester-1024x726.png\" alt=\"add instagram tester\" class=\"wp-image-1672\" \/><\/a><figcaption>add Instagram tester<\/figcaption><\/figure>\n<p><\/p>\n<p><\/p>\n<p>Next, a window pops up directing you To add an Instagram tester,  \u201center their username\u201d enter the Instagram account username to send the testing invites.<\/p>\n<p><\/p>\n<p><\/p>\n<p>Open a new web browser and go to <a href=\"https:\/\/l.facebook.com\/l.php?u=https%3A%2F%2Fwww.instagram.com%2F%3Ffbclid%3DIwAR3up43jrQJwe6whaLywc79Z_CqAqX84h3Hdt69DwYtNaMduvBKsVDH2mU4&amp;h=AT0UH3UnpDm1sPmcR9DfzuPhSuO1bbSHQbI4x0-HLt3mahKMRQpnr7vJCEPogL418vqov0I8EUlPeXhl3bs7HJBYSCVe4Cd6bHPlh8xyUj7FgeFzNqonU4mIB2yzpzVaEDUs_g\" target=\"_blank\" rel=\"noreferrer noopener\">www.instagram.com<\/a> and sign in to your Instagram account that you just invited. Navigate to <strong>(Profile Icon)<\/strong> &gt; <strong>Edit Profile<\/strong> &gt; <strong>Apps and Websites<\/strong> &gt; <strong>Tester Invites<\/strong> and accept the invitation.<\/p>\n<p><\/p>\n<p><\/p>\n<figure class=\"wp-block-image\"><a href=\"http:\/\/www.brandexponents.com\/oshine-knowledgebase\/wp-content\/uploads\/2021\/02\/Testing-Invites.png\"><img decoding=\"async\" src=\"http:\/\/www.brandexponents.com\/oshine-knowledgebase\/wp-content\/uploads\/2021\/02\/Testing-Invites.png\" alt=\"Testing Invites\" class=\"wp-image-1673\" \/><\/a><figcaption>Testing Invites<\/figcaption><\/figure>\n<p><\/p>\n<p><\/p>\n<p>After completing the above steps now you need to copy the Instagram Token by navigating to the Instagram Basic Display.<\/p>\n<p><\/p>\n<p><\/p>\n<h2 class=\"wp-block-heading\" id=\"step-4-generating-instagram-user-token\">Step 4: Generating Instagram User Token<\/h2>\n<p><\/p>\n<p><\/p>\n<p>Navigate to the <strong>Instagram Basic Display<\/strong> &gt; <strong>Basic Display<\/strong> &gt; <strong>User Token Generator<\/strong> and hit the Generate Token button.<\/p>\n<p><\/p>\n<p><\/p>\n<p>Copy the Generated Token String and Paste it on a notepad or a sticky note on the computer itself temporarily.<\/p>\n<p><\/p>\n<p><\/p>\n<h2 class=\"wp-block-heading\">Step 5: Pasting the Copied Instagram User Token<\/h2>\n<p><\/p>\n<p><\/p>\n<p>From the Exponent Theme Navigate to <strong>Appearance<\/strong>\u00a0&gt;\u00a0<strong>Customize<\/strong>\u00a0&gt;\u00a0<strong>Global\u00a0Site\u00a0Settings\u00a0<\/strong>&gt;\u00a0<strong>Other settings<\/strong> &gt; I<strong>nstagram\u00a0Access\u00a0Token <\/strong>here you need to paste the token and Save the  Changes.<\/p>\n<p><\/p>\n<p><\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"754\" src=\"https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/02\/image-1024x754.jpg\" alt=\"Enter Instagram Access Token\" class=\"wp-image-472\" srcset=\"https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/02\/image-1024x754.jpg 1024w, https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/02\/image-300x221.jpg 300w, https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/02\/image-768x566.jpg 768w, https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/02\/image-1160x854.jpg 1160w, https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/02\/image-68x50.jpg 68w, https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/02\/image-650x479.jpg 650w, https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/02\/image-1000x736.jpg 1000w, https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/02\/image-50x37.jpg 50w, https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/02\/image.jpg 1256w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption> Enter Instagram Access Token <\/figcaption><\/figure>\n<p><\/p>\n<p><\/p>\n<p>After this, you can start creating new sections and adding images<\/p>\n<p><\/p>\n<p><\/p>\n<h2 class=\"wp-block-heading\" id=\"step-6-using-gallery-section\">Step 6: Using Gallery Section<\/h2>\n<p><\/p>\n<p><\/p>\n<p>Create a new Page\/Post and add a Gallery Section. From the Image Source Drop Down select Instagram and hit the save button.<\/p>\n<p><\/p>\n<p><\/p>\n<figure class=\"wp-block-image\"><a href=\"http:\/\/www.brandexponents.com\/oshine-knowledgebase\/wp-content\/uploads\/2021\/02\/Gallery-Section-in-Tatsu-1.png\"><img decoding=\"async\" src=\"http:\/\/www.brandexponents.com\/oshine-knowledgebase\/wp-content\/uploads\/2021\/02\/Gallery-Section-in-Tatsu-1-1024x743.png\" alt=\"Gallery Section in Tatsu -\" class=\"wp-image-1677\" \/><\/a><figcaption>Gallery Section in Tatsu<\/figcaption><\/figure>\n<p><\/p>\n<p><\/p>\n<p>You will see the images from the linked Instagram Account appear in the gallery section and you can customize the appearance as per your needs and make it look much more appealing and enticing using various customization options.<\/p>\n<p><\/p>\n<\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-column-overlay tatsu-animate-none\" ><\/div><\/div><style>.tatsu-row > .tatsu-gnxisbplv1ghkyjm.tatsu-column{width: 100%;}.tatsu-gnxisbplv1ghkyjm.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-gnxisbplv1ghkyjm > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-gnxisbplv1ghkyjm > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-gnxisbplv1ghkyjm > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-gnxisbplv1ghkyjm > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}<\/style><\/div><\/div><\/div><\/div><div class=\"tatsu-section-background-wrap\"><div class = \"tatsu-section-background\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-section-overlay\"><\/div><style>.tatsu-gnxisbplp9tm5lt .tatsu-section-pad{padding: 90px 0px 90px 0px;}.tatsu-gnxisbplp9tm5lt > .tatsu-bottom-divider{z-index: 9999;}.tatsu-gnxisbplp9tm5lt > .tatsu-top-divider{z-index: 9999;}.tatsu-gnxisbplp9tm5lt .tatsu-section-overlay{mix-blend-mode: normal;}<\/style><\/div>","protected":false},"excerpt":{"rendered":"<div><a href=\"https:\/\/exponentwptheme.com\/documentation\/how-to-use-instagram-in-tatsu-gallery-module\/\" class=\"exp-read-more exp-read-more-underlined\">Read More<\/a><\/div>\n","protected":false},"author":41,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-474","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=474"}],"version-history":[{"count":0,"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/474\/revisions"}],"wp:attachment":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}