在部落格側邊欄安裝 Instagram 小工具，顯示九宮格圖片

前陣子接到一個需求，希望在網站側邊欄擺放 Instagram 小工具，能顯示 9 張圖片這樣的版面。正常來說要做到這件事不難，已經有不少現成的外掛可以直接拿來用。





不過實際測試之後，卻發現每個都有不合用的地方，只好乾脆自己寫一個來用，以下可先看範例頁面的效果。



(圖片出處: pixabay.com)

一、現有外掛整理

找了一些知名的 Instagram 外掛：

1. SnapWidget

• 官網：https://snapwidget.com/
• 免費版缺點：點擊圖片無法連到 Instagram
• 付費版費用：USD 6 / 月

2. Websta

• 官網：https://widgets.websta.me/
• 免費版缺點：點擊圖片無法連到 Instagram
• 付費版費用：USD 4.99 / 月

3. POWr

• 官網：https://www.powr.io/
• 免費版缺點：最多顯示 6 張圖
• 付費版費用：USD 8 / 月

4. Light Widget

• 官網：https://lightwidget.com/
• 免費版缺點：不支援 HTTPS 網站
• 付費版費用：USD 10

二、國外自製工具程式碼

另外找到這篇「How To Add An Instagram Widget for Blogger」，提供了程式碼可安裝在側邊欄，不過預設效果怪怪的，版面看起來不太實用。

如果熟悉 HTML/JS/CSS，可以直接修改原始碼，改成自己要的樣子，或者直接使用本篇修改的版本。

三、安裝程式碼

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

<div id="ig_sidebar"></div><div id="ig_info"><a href="https://www.wfublog.com/2019/05/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>
//<![CDATA[
(function($) {
var ig_id = xxxxxxxxxx,
ig_token = "xxxxxxxxxx.yyyyyyy.zzzzzzzzzzzzzzzzzzz",
ig_images = 9;

// Generated by CoffeeScript 1.3.3
(function(){var e,t;e=function(){function e(e,t){var n,r;this.options={target:"instafeed",get:"popular",resolution:"thumbnail",sortBy:"none",links:!0,mock:!1,useHttp:!1};if(typeof e=="object")for(n in e)r=e[n],this.options[n]=r;this.context=t!=null?t:this,this.unique=this._genKey()}return e.prototype.hasNext=function(){return typeof this.context.nextUrl=="string"&&this.context.nextUrl.length>0},e.prototype.next=function(){return this.hasNext()?this.run(this.context.nextUrl):!1},e.prototype.run=function(t){var n,r,i;if(typeof this.options.clientId!="string"&&typeof this.options.accessToken!="string")throw new Error("Missing clientId or accessToken.");if(typeof this.options.accessToken!="string"&&typeof this.options.clientId!="string")throw new Error("Missing clientId or accessToken.");return this.options.before!=null&&typeof this.options.before=="function"&&this.options.before.call(this),typeof document!="undefined"&&document!==null&&(i=document.createElement("script"),i.id="instafeed-fetcher",i.src=t||this._buildUrl(),n=document.getElementsByTagName("head"),n[0].appendChild(i),r="instafeedCache"+this.unique,window[r]=new e(this.options,this),window[r].unique=this.unique),!0},e.prototype.parse=function(e){var t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S;if(typeof e!="object"){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"Invalid JSON data"),!1;throw new Error("Invalid JSON response")}if(e.meta.code!==200){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,e.meta.error_message),!1;throw new Error("Error from Instagram: "+e.meta.error_message)}if(e.data.length===0){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"No images were returned from Instagram"),!1;throw new Error("No images were returned from Instagram")}this.options.success!=null&&typeof this.options.success=="function"&&this.options.success.call(this,e),this.context.nextUrl="",e.pagination!=null&&(this.context.nextUrl=e.pagination.next_url);if(this.options.sortBy!=="none"){this.options.sortBy==="random"?d=["","random"]:d=this.options.sortBy.split("-"),p=d[0]==="least"?!0:!1;switch(d[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",p);break;case"liked":e.data=this._sortBy(e.data,"likes.count",p);break;case"commented":e.data=this._sortBy(e.data,"comments.count",p);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){a=e.data,this.options.limit!=null&&a.length>this.options.limit&&(a=a.slice(0,this.options.limit+1||9e9)),n=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(a=this._filter(a,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){i="",o="",l="",v=document.createElement("div");for(m=0,b=a.length;m<b;m++)s=a[m],u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),o=this._makeTemplate(this.options.template,{model:s,id:s.id,link:s.link,image:u,caption:this._getObjectProperty(s,"caption.text"),likes:s.likes.count,comments:s.comments.count,location:this._getObjectProperty(s,"location.name")}),i+=o;v.innerHTML=i,S=[].slice.call(v.childNodes);for(g=0,w=S.length;g<w;g++)h=S[g],n.appendChild(h)}else for(y=0,E=a.length;y<E;y++)s=a[y],f=document.createElement("img"),u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),f.src=u,this.options.links===!0?(t=document.createElement("a"),t.href=s.link,t.appendChild(f),n.appendChild(t)):n.appendChild(f);document.getElementById(this.options.target).appendChild(n),r=document.getElementsByTagName("head")[0],r.removeChild(document.getElementById("instafeed-fetcher")),c="instafeedCache"+this.unique,window[c]=void 0;try{delete window[c]}catch(x){}}return this.options.after!=null&&typeof this.options.after=="function"&&this.options.after.call(this),!0},e.prototype._buildUrl=function(){var e,t,n;e="https://api.instagram.com/v1";switch(this.options.get){case"popular":t="media/popular";break;case"tagged":if(typeof this.options.tagName!="string")throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(typeof this.options.locationId!="number")throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(typeof this.options.userId!="number")throw new Error("No user specified. Use the 'userId' option.");if(typeof this.options.accessToken!="string")throw new Error("No access token. Use the 'accessToken' option.");t="users/"+this.options.userId+"/media/recent";break;default:throw new Error("Invalid option for get: '"+this.options.get+"'.")}return n=""+e+"/"+t,this.options.accessToken!=null?n+="?access_token="+this.options.accessToken:n+="?client_id="+this.options.clientId,this.options.limit!=null&&(n+="&count="+this.options.limit),n+="&callback=instafeedCache"+this.unique+".parse",n},e.prototype._genKey=function(){var e;return e=function(){return((1+Math.random())*65536|0).toString(16).substring(1)},""+e()+e()+e()+e()},e.prototype._makeTemplate=function(e,t){var n,r,i,s,o;r=/(?:\{{2})([\w\[\]\.]+)(?:\}{2})/,n=e;while(r.test(n))i=n.match(r)[1],s=(o=this._getObjectProperty(t,i))!=null?o:"",n=n.replace(r,""+s);return n},e.prototype._getObjectProperty=function(e,t){var n,r;t=t.replace(/\[(\w+)\]/g,".$1"),r=t.split(".");while(r.length){n=r.shift();if(!(e!=null&&n in e))return null;e=e[n]}return e},e.prototype._sortBy=function(e,t,n){var r;return r=function(e,r){var i,s;return i=this._getObjectProperty(e,t),s=this._getObjectProperty(r,t),n?i>s?1:-1:i<s?1:-1},e.sort(r.bind(this)),e},e.prototype._filter=function(e,t){var n,r,i,s,o;n=[],i=function(e){if(t(e))return n.push(e)};for(s=0,o=e.length;s<o;s++)r=e[s],i(r);return n},e}(),t=typeof exports!="undefined"&&exports!==null?exports:window,t.Instafeed=e}).call(this);

var _0x5c1b=["\x34\x20\x7A\x3D\x57\x20\x58\x28\x7B\x56\x3A\x22\x72\x22\x2C\x55\x3A\x53\x2C\x54\x3A\x59\x2C\x5A\x3A\x31\x34\x2C\x31\x35\x3A\x31\x33\x2C\x31\x32\x3A\x68\x28\x61\x29\x7B\x71\x28\x61\x29\x7D\x7D\x29\x3B\x68\x20\x71\x28\x62\x29\x7B\x34\x20\x64\x3D\x62\x2E\x73\x5B\x30\x5D\x2E\x72\x2E\x31\x31\x2C\x63\x3D\x24\x28\x22\x23\x52\x22\x29\x2C\x61\x3D\x22\x22\x3B\x24\x2E\x51\x28\x62\x2E\x73\x2C\x68\x28\x65\x2C\x67\x29\x7B\x34\x20\x66\x3D\x67\x2E\x42\x2E\x46\x2E\x45\x3B\x61\x2B\x3D\x22\x3C\x31\x20\x32\x3D\x27\x43\x27\x3E\x22\x3B\x61\x2B\x3D\x22\x3C\x61\x20\x38\x3D\x27\x22\x2B\x67\x2E\x44\x2B\x22\x27\x20\x35\x3D\x27\x37\x27\x3E\x3C\x49\x20\x4A\x3D\x27\x22\x2B\x66\x2B\x22\x27\x2F\x3E\x22\x3B\x61\x2B\x3D\x22\x3C\x31\x20\x32\x3D\x27\x4F\x27\x3E\x3C\x31\x20\x32\x3D\x27\x50\x27\x3E\x3C\x31\x20\x32\x3D\x27\x4E\x27\x3E\x22\x3B\x61\x2B\x3D\x22\x3C\x69\x20\x32\x3D\x27\x33\x20\x33\x2D\x4D\x27\x2F\x3E\x22\x2B\x67\x2E\x4B\x2E\x70\x3B\x61\x2B\x3D\x22\x20\x3C\x69\x20\x32\x3D\x27\x33\x20\x33\x2D\x31\x37\x27\x3E\x3C\x2F\x69\x3E\x22\x2B\x67\x2E\x31\x36\x2E\x70\x3B\x61\x2B\x3D\x22\x3C\x2F\x31\x3E\x3C\x2F\x31\x3E\x3C\x2F\x31\x3E\x3C\x2F\x61\x3E\x3C\x2F\x31\x3E\x22\x7D\x29\x3B\x63\x2E\x78\x28\x61\x29\x3B\x61\x3D\x22\x3C\x31\x20\x6F\x3D\x27\x76\x27\x3E\x22\x3B\x61\x2B\x3D\x22\x3C\x61\x20\x38\x3D\x27\x74\x3A\x2F\x2F\x77\x2E\x36\x2E\x41\x2F\x22\x2B\x64\x2B\x22\x27\x20\x35\x3D\x27\x37\x27\x3E\x3C\x69\x20\x32\x3D\x27\x33\x20\x33\x2D\x36\x27\x3E\x3C\x2F\x69\x3E\x20\x31\x76\x20\x31\x74\x3C\x2F\x61\x3E\x22\x3B\x61\x2B\x3D\x22\x3C\x2F\x31\x3E\x22\x3B\x63\x2E\x75\x28\x61\x29\x3B\x31\x73\x28\x21\x24\x28\x22\x23\x6B\x22\x29\x2E\x31\x78\x29\x7B\x24\x28\x22\x23\x76\x22\x29\x2E\x75\x28\x22\x3C\x31\x20\x6F\x3D\x27\x6B\x27\x20\x6D\x3D\x27\x31\x70\x2D\x31\x64\x3A\x20\x31\x65\x3B\x6C\x2D\x31\x63\x3A\x31\x62\x3B\x27\x3E\x3C\x61\x20\x6D\x3D\x27\x6C\x2D\x31\x61\x3A\x20\x31\x66\x3B\x20\x31\x67\x3A\x20\x23\x31\x6D\x3B\x20\x6A\x2D\x31\x6E\x3A\x20\x31\x6C\x2C\x20\x31\x6B\x2C\x20\x31\x68\x2D\x31\x69\x3B\x20\x6A\x2D\x4C\x3A\x20\x31\x39\x3B\x27\x20\x31\x6F\x3D\x27\x79\x20\u5074\u908A\u6B04\u5DE5\u5177\x5C\x6E\u8A2D\u8A08\uFF1A\x48\x20\x31\x30\x27\x20\x38\x3D\x27\x74\x3A\x2F\x2F\x77\x2E\x31\x6A\x2E\x41\x2F\x31\x38\x2F\x31\x71\x2F\x31\x79\x2D\x31\x77\x2D\x36\x2D\x31\x75\x2D\x39\x2D\x42\x2E\x78\x27\x20\x35\x3D\x27\x37\x27\x3E\u24E6\x20\x79\x20\x47\x3C\x2F\x61\x3E\x3C\x2F\x31\x3E\x22\x29\x7D\x7D\x7A\x2E\x31\x72\x28\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x64\x69\x76\x7C\x63\x6C\x61\x73\x73\x7C\x66\x61\x7C\x76\x61\x72\x7C\x74\x61\x72\x67\x65\x74\x7C\x69\x6E\x73\x74\x61\x67\x72\x61\x6D\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x68\x72\x65\x66\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x7C\x66\x6F\x6E\x74\x7C\x69\x67\x5F\x69\x6E\x66\x6F\x7C\x74\x65\x78\x74\x7C\x73\x74\x79\x6C\x65\x7C\x7C\x69\x64\x7C\x63\x6F\x75\x6E\x74\x7C\x64\x69\x73\x70\x6C\x61\x79\x49\x47\x7C\x75\x73\x65\x72\x7C\x64\x61\x74\x61\x7C\x68\x74\x74\x70\x73\x7C\x61\x66\x74\x65\x72\x7C\x69\x67\x5F\x66\x6F\x6C\x6C\x6F\x77\x5F\x6D\x65\x7C\x77\x77\x77\x7C\x68\x74\x6D\x6C\x7C\x49\x6E\x73\x74\x61\x67\x72\x61\x6D\x7C\x66\x65\x65\x64\x7C\x63\x6F\x6D\x7C\x69\x6D\x61\x67\x65\x73\x7C\x69\x67\x5F\x74\x68\x75\x6D\x62\x7C\x6C\x69\x6E\x6B\x7C\x75\x72\x6C\x7C\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x7C\x57\x69\x64\x67\x65\x74\x7C\x57\x46\x55\x7C\x69\x6D\x67\x7C\x73\x72\x63\x7C\x6C\x69\x6B\x65\x73\x7C\x73\x69\x7A\x65\x7C\x68\x65\x61\x72\x74\x7C\x69\x67\x5F\x69\x6E\x6E\x65\x72\x7C\x69\x67\x5F\x77\x72\x61\x70\x7C\x69\x67\x5F\x77\x72\x61\x70\x5F\x69\x6E\x6E\x65\x72\x7C\x65\x61\x63\x68\x7C\x69\x67\x5F\x73\x69\x64\x65\x62\x61\x72\x7C\x69\x67\x5F\x69\x64\x7C\x61\x63\x63\x65\x73\x73\x54\x6F\x6B\x65\x6E\x7C\x75\x73\x65\x72\x49\x64\x7C\x67\x65\x74\x7C\x6E\x65\x77\x7C\x49\x6E\x73\x74\x61\x66\x65\x65\x64\x7C\x69\x67\x5F\x74\x6F\x6B\x65\x6E\x7C\x6C\x69\x6D\x69\x74\x7C\x42\x4C\x4F\x47\x7C\x75\x73\x65\x72\x6E\x61\x6D\x65\x7C\x73\x75\x63\x63\x65\x73\x73\x7C\x74\x72\x75\x65\x7C\x69\x67\x5F\x69\x6D\x61\x67\x65\x73\x7C\x6D\x6F\x63\x6B\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x7C\x32\x30\x31\x39\x7C\x31\x31\x70\x78\x7C\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x7C\x72\x69\x67\x68\x74\x7C\x61\x6C\x69\x67\x6E\x7C\x74\x6F\x70\x7C\x31\x30\x70\x78\x7C\x6E\x6F\x6E\x65\x7C\x63\x6F\x6C\x6F\x72\x7C\x73\x61\x6E\x73\x7C\x73\x65\x72\x69\x66\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x61\x72\x69\x61\x6C\x7C\x68\x65\x6C\x76\x65\x74\x69\x63\x61\x7C\x63\x63\x63\x7C\x66\x61\x6D\x69\x6C\x79\x7C\x74\x69\x74\x6C\x65\x7C\x6D\x61\x72\x67\x69\x6E\x7C\x30\x35\x7C\x72\x75\x6E\x7C\x69\x66\x7C\x4D\x65\x7C\x77\x69\x64\x67\x65\x74\x7C\x46\x6F\x6C\x6C\x6F\x77\x7C\x73\x69\x64\x65\x62\x61\x72\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x62\x6C\x6F\x67","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x5C\x62","\x67","\x72\x65\x70\x6C\x61\x63\x65"];eval(function(_0x90dcx1,_0x90dcx2,_0x90dcx3,_0x90dcx4,_0x90dcx5,_0x90dcx6){_0x90dcx5= function(_0x90dcx3){return (_0x90dcx3< _0x90dcx2?_0x5c1b[4]:_0x90dcx5(parseInt(_0x90dcx3/ _0x90dcx2)))+ ((_0x90dcx3= _0x90dcx3% _0x90dcx2)> 35?String[_0x5c1b[5]](_0x90dcx3+ 29):_0x90dcx3.toString(36))};while(_0x90dcx3--){if(_0x90dcx4[_0x90dcx3]){_0x90dcx1= _0x90dcx1[_0x5c1b[8]]( new RegExp(_0x5c1b[6]+ _0x90dcx5(_0x90dcx3)+ _0x5c1b[6],_0x5c1b[7]),_0x90dcx4[_0x90dcx3])}};return _0x90dcx1}(_0x5c1b[0],62,97,_0x5c1b[3][_0x5c1b[2]](_0x5c1b[1])))
})(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，可移除對應的安裝碼
• 請到這個網頁 https://instagram.pixelunion.net/→ 按「Generate Access Token」→ 登入 Instagram 取得授權 → 紀錄產生的 Access Token 字串
• Token 字串的格式大致是這樣「xxxxxxxxxx.yyyyyyy.zzzzzzzzzzzzzzzzzzz」
• 紅字參數 ig_id 請填入自己的 xxxxxxxxxx 字串
• 紅字參數 ig_token 請填入自己的完整 Token 字串
• 藍字參數 ig_images 可修改顯示的圖片數

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