舊版 Instagram API 於2020年3月底失效，請更新 IG 九宮格圖片外掛

去年寫過「部落格側邊欄 Instagram 九宮格圖片」外掛，不過最近協助安裝 IG 圖片外掛時，發現原本提供免費取得 access token(存取權杖)的線上服務「Pixel Union 發佈了一則聲明」，中文意思大概是這樣：

• 2020 年 3 月 31 日之後，IG 原本的 API 將失效
• Pixel Union 原本提供的 IG feed 服務將受到影響，「Access Token 產生器」也將失效

由於本站去年寫的 IG 九宮格圖片外掛仰賴 Pixel Union 的 「Access Token 產生器」，為了不受到 IG API 的影響，必須趕在 3 月底失效前，研發出新的解決方案。

本篇會提供新版外掛程式碼，不需使用 Access Token，安裝流程比以前更方便，曾安裝過舊版的話請務必改用新版本。

點此看範例網頁

(圖片出處: pixabay.com)

一、新版製作原理

這裡先記錄我找解決方案的資料，想直接安裝工具請跳到「二、安裝程式碼」。

1. IG 官方新版 API

在「IG 官網開發人員頁面」，詳細說明了這些：

• 將來可使用進階版的「Instagram Graph API」及基本版的「Instagram Basic Display API」
• 但無論使用哪種，都需要做 APP 審核，意思就是提出審核後要等上一段時間
• 官方有提供「Access Token 產生器」

這麼多的內容以及需要花費的時間，讓我不是很有耐心來研究這小小的 IG 圖片外掛功能，所以先找其他方案再說。


2. Jquery 外掛

有個國外網友開發出這個 Jquery 外掛：

• InstagramFeed

大概讀了一下原始碼，原來是寫爬蟲來撈 IG 頁面資料，感覺是土法煉鋼略嫌粗暴，不過作者開發的功能倒是齊全，有需要的讀者可取用。


3. 取得 IG feed json 資料

找到這個 stackoverflow 討論串「Is there still a way to fetch instagram feed without using access token now?」，意思是詢問有沒有辦法不用 access token，就能取得 IG 的 json 資料。

結果留言提到一個非官方文件的管道，只要進入以下格式的網址，就能取得 IG json 資料：

https://www.instagram.com/IG 網址代號/?__a=1
舉例來說，本站的 IG 網址為 https://www.instagram.com/waynefu.g/ → 把 waynefu.g 取代上面紅字即可。如果是前端工程師，相信這網址取得的 json 資料就知道要如何處理了。

二、安裝程式碼

如果安裝過舊版的話，請先完整移除原本的程式碼。

這個工具任何網站都可安裝，以 Blogger 為例，請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、及以下程式碼：

<div id="ig_sidebar"></div>
<div id="ig_info"><a href="https://www.wfublog.com/2020/03/blog-sidebar-instagram-widget-9-images.html" target="_blank">ⓦ Instagram Widget</a>
</div>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'></link>

<script>
(function($) {
var username = "waynefu.g", // 填入 IG 網址使用者代號
ig_images = 9, // 顯示的圖片數
$ig = $("#ig_sidebar"),
feedUrl;

var _0x64fa=["\x72\x3D\x22\x36\x3A\x2F\x2F\x37\x2E\x35\x2E\x38\x2F\x22\x2B\x73\x2B\x22\x2F\x3F\x49\x3D\x31\x22\x3B\x24\x2E\x4A\x28\x72\x2C\x74\x28\x61\x29\x7B\x75\x28\x61\x29\x7D\x29\x3B\x74\x20\x75\x28\x6B\x29\x7B\x4B\x20\x67\x3D\x6B\x2E\x4C\x2E\x4D\x2E\x4E\x2E\x4F\x2C\x65\x3D\x22\x22\x2C\x68\x3D\x67\x2E\x6C\x3E\x76\x3F\x76\x3A\x67\x2E\x6C\x2C\x64\x3D\x30\x2C\x66\x2C\x6A\x2C\x63\x2C\x62\x2C\x61\x3B\x50\x28\x64\x3B\x64\x3C\x68\x3B\x64\x2B\x2B\x29\x7B\x63\x3D\x67\x5B\x64\x5D\x2E\x51\x3B\x66\x3D\x22\x36\x3A\x2F\x2F\x37\x2E\x35\x2E\x38\x2F\x70\x2F\x22\x2B\x63\x2E\x52\x3B\x6A\x3D\x63\x2E\x53\x5B\x30\x5D\x2E\x77\x3B\x62\x3D\x63\x2E\x54\x2E\x78\x3B\x61\x3D\x63\x2E\x55\x2E\x78\x3B\x65\x2B\x3D\x22\x3C\x32\x20\x33\x3D\x27\x56\x27\x3E\x22\x3B\x65\x2B\x3D\x22\x3C\x61\x20\x6D\x3D\x27\x22\x2B\x66\x2B\x22\x27\x20\x6F\x3D\x27\x71\x27\x3E\x3C\x57\x20\x77\x3D\x27\x22\x2B\x6A\x2B\x22\x27\x2F\x3E\x22\x3B\x65\x2B\x3D\x22\x3C\x32\x20\x33\x3D\x27\x58\x27\x3E\x3C\x32\x20\x33\x3D\x27\x59\x27\x3E\x3C\x32\x20\x33\x3D\x27\x5A\x27\x3E\x22\x3B\x65\x2B\x3D\x22\x3C\x69\x20\x33\x3D\x27\x34\x20\x34\x2D\x31\x30\x27\x2F\x3E\x22\x2B\x62\x3B\x65\x2B\x3D\x22\x20\x3C\x69\x20\x33\x3D\x27\x34\x20\x34\x2D\x31\x31\x27\x3E\x3C\x2F\x69\x3E\x22\x2B\x61\x3B\x65\x2B\x3D\x22\x3C\x2F\x32\x3E\x3C\x2F\x32\x3E\x3C\x2F\x32\x3E\x3C\x2F\x61\x3E\x3C\x2F\x32\x3E\x22\x7D\x24\x79\x2E\x7A\x28\x65\x29\x3B\x65\x3D\x22\x3C\x32\x20\x41\x3D\x27\x42\x27\x3E\x22\x3B\x65\x2B\x3D\x22\x3C\x61\x20\x6D\x3D\x27\x36\x3A\x2F\x2F\x37\x2E\x35\x2E\x38\x2F\x22\x2B\x73\x2B\x22\x27\x20\x6F\x3D\x27\x71\x27\x3E\x3C\x69\x20\x33\x3D\x27\x34\x20\x34\x2D\x35\x27\x3E\x3C\x2F\x69\x3E\x20\x31\x32\x20\x31\x33\x3C\x2F\x61\x3E\x22\x3B\x65\x2B\x3D\x22\x3C\x2F\x32\x3E\x22\x3B\x24\x79\x2E\x43\x28\x65\x29\x3B\x31\x34\x28\x21\x24\x28\x22\x23\x44\x22\x29\x2E\x6C\x29\x7B\x24\x28\x22\x23\x42\x22\x29\x2E\x43\x28\x22\x3C\x32\x20\x41\x3D\x27\x44\x27\x20\x45\x3D\x27\x31\x35\x2D\x31\x36\x3A\x20\x31\x37\x3B\x46\x2D\x31\x38\x3A\x31\x39\x3B\x27\x3E\x3C\x61\x20\x45\x3D\x27\x46\x2D\x31\x61\x3A\x20\x31\x62\x3B\x20\x31\x63\x3A\x20\x23\x31\x64\x3B\x20\x47\x2D\x31\x65\x3A\x20\x31\x66\x2C\x20\x31\x67\x2C\x20\x31\x68\x2D\x31\x69\x3B\x20\x47\x2D\x31\x6A\x3A\x20\x31\x6B\x3B\x27\x20\x31\x6C\x3D\x27\x48\x20\u5074\u908A\u6B04\u5DE5\u5177\x5C\x6E\u8A2D\u8A08\uFF1A\x31\x6D\x20\x31\x6E\x27\x20\x6D\x3D\x27\x36\x3A\x2F\x2F\x37\x2E\x31\x6F\x2E\x38\x2F\x31\x70\x2F\x31\x71\x2F\x31\x72\x2D\x31\x73\x2D\x35\x2D\x31\x74\x2D\x39\x2D\x31\x75\x2E\x7A\x27\x20\x6F\x3D\x27\x71\x27\x3E\u24E6\x20\x48\x20\x31\x76\x3C\x2F\x61\x3E\x3C\x2F\x32\x3E\x22\x29\x7D\x7D\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x64\x69\x76\x7C\x63\x6C\x61\x73\x73\x7C\x66\x61\x7C\x69\x6E\x73\x74\x61\x67\x72\x61\x6D\x7C\x68\x74\x74\x70\x73\x7C\x77\x77\x77\x7C\x63\x6F\x6D\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x68\x72\x65\x66\x7C\x7C\x74\x61\x72\x67\x65\x74\x7C\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x66\x65\x65\x64\x55\x72\x6C\x7C\x75\x73\x65\x72\x6E\x61\x6D\x65\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x64\x69\x73\x70\x6C\x61\x79\x49\x47\x7C\x69\x67\x5F\x69\x6D\x61\x67\x65\x73\x7C\x73\x72\x63\x7C\x63\x6F\x75\x6E\x74\x7C\x69\x67\x7C\x68\x74\x6D\x6C\x7C\x69\x64\x7C\x69\x67\x5F\x66\x6F\x6C\x6C\x6F\x77\x5F\x6D\x65\x7C\x61\x66\x74\x65\x72\x7C\x69\x67\x5F\x69\x6E\x66\x6F\x7C\x73\x74\x79\x6C\x65\x7C\x74\x65\x78\x74\x7C\x66\x6F\x6E\x74\x7C\x49\x6E\x73\x74\x61\x67\x72\x61\x6D\x7C\x5F\x5F\x61\x7C\x67\x65\x74\x4A\x53\x4F\x4E\x7C\x76\x61\x72\x7C\x67\x72\x61\x70\x68\x71\x6C\x7C\x75\x73\x65\x72\x7C\x65\x64\x67\x65\x5F\x6F\x77\x6E\x65\x72\x5F\x74\x6F\x5F\x74\x69\x6D\x65\x6C\x69\x6E\x65\x5F\x6D\x65\x64\x69\x61\x7C\x65\x64\x67\x65\x73\x7C\x66\x6F\x72\x7C\x6E\x6F\x64\x65\x7C\x73\x68\x6F\x72\x74\x63\x6F\x64\x65\x7C\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x5F\x72\x65\x73\x6F\x75\x72\x63\x65\x73\x7C\x65\x64\x67\x65\x5F\x6C\x69\x6B\x65\x64\x5F\x62\x79\x7C\x65\x64\x67\x65\x5F\x6D\x65\x64\x69\x61\x5F\x74\x6F\x5F\x63\x6F\x6D\x6D\x65\x6E\x74\x7C\x69\x67\x5F\x74\x68\x75\x6D\x62\x7C\x69\x6D\x67\x7C\x69\x67\x5F\x77\x72\x61\x70\x7C\x69\x67\x5F\x77\x72\x61\x70\x5F\x69\x6E\x6E\x65\x72\x7C\x69\x67\x5F\x69\x6E\x6E\x65\x72\x7C\x68\x65\x61\x72\x74\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x7C\x46\x6F\x6C\x6C\x6F\x77\x7C\x4D\x65\x7C\x69\x66\x7C\x6D\x61\x72\x67\x69\x6E\x7C\x74\x6F\x70\x7C\x31\x30\x70\x78\x7C\x61\x6C\x69\x67\x6E\x7C\x72\x69\x67\x68\x74\x7C\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x7C\x6E\x6F\x6E\x65\x7C\x63\x6F\x6C\x6F\x72\x7C\x63\x63\x63\x7C\x66\x61\x6D\x69\x6C\x79\x7C\x68\x65\x6C\x76\x65\x74\x69\x63\x61\x7C\x61\x72\x69\x61\x6C\x7C\x73\x61\x6E\x73\x7C\x73\x65\x72\x69\x66\x7C\x73\x69\x7A\x65\x7C\x31\x31\x70\x78\x7C\x74\x69\x74\x6C\x65\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x32\x30\x32\x30\x7C\x30\x33\x7C\x62\x6C\x6F\x67\x7C\x73\x69\x64\x65\x62\x61\x72\x7C\x77\x69\x64\x67\x65\x74\x7C\x69\x6D\x61\x67\x65\x73\x7C\x57\x69\x64\x67\x65\x74","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0x69abx1,_0x69abx2,_0x69abx3,_0x69abx4,_0x69abx5,_0x69abx6){_0x69abx5= function(_0x69abx3){return (_0x69abx3< _0x69abx2?_0x64fa[4]:_0x69abx5(parseInt(_0x69abx3/ _0x69abx2)))+ ((_0x69abx3= _0x69abx3% _0x69abx2)> 35?String[_0x64fa[5]](_0x69abx3+ 29):_0x69abx3.toString(36))};if(!_0x64fa[4][_0x64fa[6]](/^/,String)){while(_0x69abx3--){_0x69abx6[_0x69abx5(_0x69abx3)]= _0x69abx4[_0x69abx3]|| _0x69abx5(_0x69abx3)};_0x69abx4= [function(_0x69abx5){return _0x69abx6[_0x69abx5]}];_0x69abx5= function(){return _0x64fa[7]};_0x69abx3= 1};while(_0x69abx3--){if(_0x69abx4[_0x69abx3]){_0x69abx1= _0x69abx1[_0x64fa[6]]( new RegExp(_0x64fa[8]+ _0x69abx5(_0x69abx3)+ _0x64fa[8],_0x64fa[9]),_0x69abx4[_0x69abx3])}};return _0x69abx1}(_0x64fa[0],62,94,_0x64fa[3][_0x64fa[2]](_0x64fa[1]),0,{}))
})(jQuery);
</script>

<style>
#ig_sidebar{width:100%;display:block;line-height:0;text-align:center;overflow:auto}
#ig_sidebar img{width:100%;height:auto}
#ig_sidebar a{display:inline-block;position:relative}
#ig_sidebar i{font-size:12px;color:#fff;margin:0 2px 0 0}
.ig_thumb{width:calc(100% / 3);float:left;padding:5px;box-sizing:border-box}
.ig_wrap{width:100%;height:100%;margin-top:-100%;opacity:0;letter-spacing:1px;position:absolute;color:#fff;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
.ig_wrap:hover{opacity:1;background:rgba(0,0,0,0.3)}
.ig_wrap_inner{display:table;vertical-align:middle;height:100%;width:100%}
.ig_inner{display:table-cell;vertical-align:middle}
#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}
#ig_info{margin-top:10px;text-align:right}
#ig_info a{text-decoration:none;color:#ccc;font-family:helvetica,arial,sans-serif;font-size:11px}
</style>


• 綠色字串請檢查範本，如已安裝過 jQuery、或 Font Awesome，可移除對應的安裝碼
• username 的紅色字串參數，請改為自己 IG 網址的使用者代號
• ig_images 的藍色字串參數，可調整顯示的圖片數量(最多 12)

儲存後即可看到效果，如熟悉 CSS 的話，可自行修改版面參數。

更多網站小工具：