部落格側邊欄覺得空蕩蕩？來放個Instagram 增添一點繽紛色彩，同時也可以曝光你的IG。網路上很多第三方的Instagram Widget 小工具，但偏偏就是Instagram官方沒有推出漂亮的。如果想要使用的話，可以找一找第三方工具，這回要分享的是由「WEBSTA」提供的IG小工具，不過使用之前你必須要授權您的權限給他讓他讀取你的資料之後才能使用。

一般網路上常見的Instagram Widget都是可以直接輸入hash tag或者是使用者帳號就能出現幾張小縮圖，然後把代馬塞到網站上。不過這次介紹的由WEBSTA WIDGETS提供的則是需要您授權，您能分享的IG小工具也只有您的帳號內容而已，雖然限制較多，但是他支援SSL連線(HTTPS)，不然網路上一般都沒有支援SSL造成小工具放了之後都空白。

Instagram API 最近有個大變動，從2016年6月1日開始會將在2015年11月7日以前建立的API APP全部丟到沙盒模式，一旦丟進去等同於使用該API的程式無法執行。更簡單的說法就是網路上會有很多的Instagram APP/ Instagram Widget 會失效無法使用，這當然也包含版型開發內的Instagram、WordPress Instagram外掛，原先顯示IG的地方會直接空白或是出現錯誤訊息。

Instagram 公告原文：

Instagram Platform and documentation update. Apps created on or after Nov 17, 2015 will start in Sandbox Mode and function on newly updated API rate-limits and behaviors. Prior to going Live, and being able to be used by people other than the developers of the app, these apps will have to go through a new review process. Please read the API documentation or the Change Log for more details.

Any app created before Nov 17, 2015 will continue to function until June 1, 2016. On that date, the app will automatically be moved to Sandbox Mode if it wasn’t approved through the review process. The previous version of our documentation is still available here.

所以這個狀況可能就會在最今開始發生，如果你發現你網站的IG變空白了，首要就是去找替代或者是改寫程式。一般人都是用外部第三分工具，如果你的異常了那就來使用「WEBSTA WIDGET」提供的小工具吧！只要授權你的IG帳號，就能輕鬆建立兩個IG小工具。因為他有分為免費和付費版本，我們一般人使用免費板就可以滿足大多數的需求了。現在就讓我們替網站/部落格加入漂亮的Instagram widget吧！

• 網站名稱：Websta Widgets for Instagram
• 網站網址：http://widgets.websta.me/

第1步  首先來到WEBSTAWIDGETS網站，點選右上角﹝LOG IN﹞。

第2步  接著登入你IG帳號，帳號就是平常給人追蹤的ID，密碼您自己回憶一下(有時候可能跟Facebook是同一組密碼)。

第3步  登入後需要驗證您的信箱，請輸入您信箱後點﹝UPDATE﹞，再到信箱收信，如果沒有收到可以點「Click here to resend verification email」請系統重發。如果網頁不小心變成日文版，右下角有「English」可以切換。

第4步  接著請點選﹝Confirm your Email Address﹞。

第5步  認證完畢後會出現「Verified」。接著點右上角【CREATE】。

第6步  進入後他只能讓你抓你的個人帳號，其餘然位可以依序輸入。

• WIDGET NAME：小工具名稱
• DOMAIN NAME：輸入你要放置此小工具的網站網址
• LAYOUT：顯是排版方式與數量
• THUMBNAIL SIZE：縮圖尺寸
• PHOTO SPACE：照片間距
• RESPONSIVENESS：自動適應網頁大小，如果覺得尺寸很難算可以選他。
• BORDER：圖片加外邊線

下半部的部分，功能設定說明如下：

• BACKGROUND COLOR：小工具底色
• ADBANCE：點一下可開啟進階設定。
• HOVER EFFECT：滑過去特效
• SHARE BUTTON：滑過去顯示分享按鈕

第7步  以上設定完後點選﹝CREATE WIDGET﹞。

第8步  接著下方會顯示語法，請將WIDGET CODE複製貼到網站。

第9步  如果要建立更多(免費板可以兩個)，或者是你要調整他的樣式都可以點右上角的帳號頭像，再點【WIDGET LIST】即可進入。

第10步  以WordPress來說，登入後台：外觀→小工具，新增「文字」小工具，把語法貼上並按下﹝儲存﹞。

第11步  前台就會看到Instagram加入到網站側邊欄囉！這個WEBSTA WIDGETS唯一缺點是他會有一個LOGO壓在上面。

或許網路上還有更好用的工具，不過這個也不算太差，主要是因為他支援SSL(HTTPS)，雖然要授權麻煩一點，但這也表示比較不會被氾濫使用，服務的穩定性會相對比較好。

相關文章

[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告

免用Photoshop！Adobe Express 免費線上圖片裁切服務

[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？

[教學]如何領取TPASS 悠遊卡補助100元？

免註冊帳號！ChatGPT 開放免費使用並且無任何限制！

[教學]如何申請台北捷運誤點證明？

菲律賓遊學攻略｜語言學校太多難以抉擇？看這篇就對了！

[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？

Line Mobile 月租24元！中華電信隱藏資費方案(附邀請碼+申請教學)