最近想慢慢把粉專弄的美一點、增加資訊

第一個想到的就是把IG崁入側邊欄

原本以為是很簡單的事情

但google了半天「痞客邦側欄崁入IG」「怎麼在痞客邦崁入IG帳號」「崁入IG程式碼」

總之搜尋了好幾個關鍵字

找出來的方式都蠻奇怪的,有的還要在網頁裡面先註冊帳號或登入IG

結果都蠻失敗的,就先不貼了,直接來講比較簡單直觀的方式

當然在成功前你可能也嘗試過一些方法,像是:

🚫錯誤方式

有人(就是我)會想說用網頁版的IG貼文直接選擇內崁程式碼

但這樣的程式碼長度超長、超亂,讓我有點無從下手修改

出現在側欄就會超出範圍

 

⭕️正確方式

1. 找一個部落格,他的側欄已經有你喜歡的IG畫面

2. (用chrome瀏覽器)右鍵點擊,跳出選單後選擇「檢查」

3. 複製下方的程式碼

我人很好,直接貼給你們

只要在網頁版的網址中,選一則任何你想要分享的貼文

然後複製網頁網址最後面的編碼,取代下面框框中紅色的部分

<iframe class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/BxRVGbfHCbr/embed/captioned/" allowtransparency="true" allowfullscreen="true" frameborder="0" height="400" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="background: white; max-width: 298px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid rgb(219, 219, 219); box-shadow: none; display: block; margin: 0px 0px 12px; padding: 0px;"></iframe>

4. 進入側邊欄管理頁面,新增一個欄位,把代碼貼上去

其中height="400"的部分,裡面數字可以自行修改

數字少一點,可以像我一樣只顯示照片(至於數字是多少自己嘗試,要一直重整部落格看)

數字多一點,可以連貼文內容跟留言都顯示出來

5. 回到部落格檢查,應該就會出現這樣的畫面~完成!

 

但其實我蠻想直接顯示打開手機IG個人頁面會看到的畫面

就是有一格一格貼文圖片預覽(九宮格那樣)

也有嘗試把剛剛上面程式碼中的網址換成IG帳號頁面的網址

但會失敗QQ

今天時間只夠研究到這,之後有空研究出來再來更新吧!

 

CT

 

❤️生活分享請追蹤IG:https://www.instagram.com/connie_teng_/

🧡好物分享請追蹤IG:https://www.instagram.com/ctblog.tw

💛廠商欲合作歡迎來信📪 ctblog.work@gmail.com  

 

 


    CT 發表在 痞客邦 留言(6) 人氣()