可是......最近我發現部落格側邊欄的Instagram九宮格圖片外掛又消失了，原來Instagram又再修改API規則，不需要Access Token ID的方法已經失效了，所以我威迫作為「IT狗」的安迪，為我研發一個新的解決方法！這個新方法除了參考了WFU BLOG外，還參考了jQuery Script.net的文章。本文將會教導大家如何取得Instagram Token ID來繼續使用Instagram九宮格圖片外掛。

I think every blogger may want to embed their gorgeous Instagram pictures on their website to increase Instagram exposure. Among the popular blog sites, I would say Blogger is the least favourable for content creators to add Instagram grid on their website. There are some widgets for Instagram you can find on Google, e.g. LightWidget. However, they are not FREE. For all the part-time blogger like me, I would rather invest money in a good camera. 

After hours of studying and coding, my IT guru boyfriend (aka. Andy) found a way to show Instagram grid on Blogger. In this blogpost, I will show you how to display your Instagram feed on Blogger gadget by using the new Instagram API.

1. 首先到https://developers.facebook.com/apps/?show_reminder=true，並登入Facebook帳號。

Go to https://developers.facebook.com/apps/?show_reminder=true and login to your Facebook account.

2. 按"建立應用程式"。

Click "Create App"

3. 選擇"消費者"。 

Choose "Consumer".

5. 選擇"Instagram 基本顯示"，然後按"設定"。 

Under "Instagram Basic Display", click "Set Up" .

6. 按"建立新的應用程式"。 

Click "Create New App".

7. 在"顯示名稱"隨意填寫名稱，然後按"建立應用程式"。

Type a random name in "Display Name" and then click "Create App".

8. 進入"角色"頁面，按"新增Instagram測試人員"。

Navigate to "Roles", click "Add Instagram Testers" under "Instagram Testers".

9.填寫你的Instagram ID，並按提交。

Input your Instagram ID and then click "Submit".

10. 接著在新視窗到https://www.instagram.com/accounts/manage_access/，並登入Instagram，然後到"測試員邀請"，按"接受邀請"。

Go to https://www.instagram.com/accounts/manage_access/ and then login your Instagram account. In "Tester Invites" tab, click "Accept".

11. 回到Facebook for Developers網頁，在"Instagram 基本顯示"內的"基本顯示"，按"Generate Token"。

Go back to Facebook for Developers site, navigate to "Basic Display" under "Instagram Basic Display". Click "Generate Token".

12. 登入Instagram，按"允許"。

Login in your Instagram account, then click "Allow".

13. 把"I Understand"打勾，下面顯示的就是你的Instagram Token ID，按"Copy"來複製。

Tick "I Understand" checkbox. Your Instagram Token ID will then be displayed below. Click "Copy" to copy the whole Token ID.

1. 在Blogger的後台，進入"版面配置" > 在"sidebar"下按"新增小工具" > 選擇 "HTML/JavaScript"。
Login to your Blogger admin panel. Navigate to "Layout" > Click "Add a Gadget" under "sidebar"  > Choose "HTML/JavaScript" .

2. 填入標題，貼上以下的程式碼。
Input title and paste below script to content field.

3. 修改YOUR INSTAGRAM ID為你的Instagram ID。

Change the yellow highlighted "YOUR INSTAGRAM ID" to your Instagram ID.

4. 修改YOUR TOKEN ID為你的Instagram Token ID。

Change the yellow highlighted "YOUR TOKEN ID" to your Instagram Token ID.

5. 更改你想小工具展示多少張圖片 (如想展示9張圖片便可以忽略此步驟)。

(Optional) Change the number of photos you would like to display. By default is showing 9 photos.

6. 然後按"儲存"。
Click "Save".

<div id="instagram-feed1" class="instagram_feed"></div>

<div id="ig_follow_me"><a href="https://www.instagram.com/YOUR INSTAGRAM ID" target="_blank"><i class="fa fa-instagram"></i> Follow Me</a></div>

<style>

#instagram-feed1 .instagram_new{width:calc(100% / 3);float:left;padding:5px;box-sizing:border-box}

#ig_follow_me{margin:10px 0;text-align:center}

#ig_follow_me a{display:inline-block;padding:10px;color:#fff;background:#408bd1;width:50%;border-radius:4px;font-size:16px;text-decoration:none;transition:all .1s ease-in}

#ig_follow_me a:hover{box-shadow:inset 0 0 10px 20px #359dff}

.instagram_feed {

  overflow: hidden;

}

.instagram_feed .instagram_new {

  width: 16.666%;

  float: left;

  padding: 0 1px 1px 0;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

.instagram_feed img.insta-image {

  position: absolute;

  left: 0;

  top: 0;

  object-fit: cover;

  width: 100%;

  height: 100%;

  transition: all 0.3s ease 0s;

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -ms-transition: all 0.3s ease 0s;

  -o-transition: all 0.3s ease 0s;

}

.instagram_feed .insta-link {

  position: relative;

  display: block;

  background: #232323;

  padding-top: 100%;

}

.instagram_feed .insta-link:hover .insta-image {

  opacity: 0.2;

}

</style>

<script>

// jQuery Ajax for feed Instagram Graph API

// Support us fatbjai.travel (曳豬到爆炸)

// https://fatbjai.blogspot.com

if ( $('#instagram-feed1').length != 0 ) {

    var token = 'YOUR TOKEN ID'; //Change to your token ID

    var fields = 'id,media_type,media_url,thumbnail_url,timestamp,permalink,caption';

    var limit = 9; // Number of photos to display

    $.ajax('https://graph.instagram.com/refresh_access_token?grant_type=ig_refresh_token&access_token='+token);

    $.ajax ( {

        url: 'https://graph.instagram.com/me/media?fields='+ fields +'&access_token='+ token +'&limit='+ limit,

        type: 'GET',

        success: function( response ) {

            for( var x in response.data ) {

                var link = response.data[x]['permalink'],

                    caption = response.data[x]['caption'],

                    image = response.data[x]['media_url'],

                    image_video = response.data[x]['thumbnail_url'],

                    html = '';

                if ( response.data[x]['media_type'] == 'VIDEO' ) {

                    html += '<div class="instagram_new">';

                        html += '<a class="insta-link" href="' + link + '" rel="noopener" target="_blank">';

                            html += '<img src="' + image_video + '" loading="lazy" alt="' + caption + '" class="insta-image" />';

                        html += '</a>';

                    html += '</div>';

                } else {

                    html += '<div class="instagram_new">';

                        html += '<a class="insta-link" href="' + link + '" rel="noopener" target="_blank">';

                            html += '<img src="' + image + '" loading="lazy" alt="' + caption + '" class="insta-image" />';

                        html += '</a>';

                    html += '</div>';

                }

                $('#instagram-feed1').append(html);

            }

        },

        error: function(data) {

            var html = '<div class="class-no-data">No Images Found</div>';

            $('#instagram-feed1').append(html);

            }

    });

}

</script>

7. 最後可以預覽你的Blogger了。
You can preview your Blogger.

8. 如果Instagram的圖片顯示不到，只有"Follow Me"的話，可能是因為你Blogger使用的Theme沒有jQuery，那麼你就要在程序碼的第一行加<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

If your Instagram photos cannot be displayed and only showing "Follow Me" button, it's probably because the theme you're applying on your Blogger is not jQuery enabled. Please add <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script> in the first line of the script.