用智慧型手機上的 Instagram 拍攝、自訂和分享相片與短片。本指引將說明如何在網站中嵌入 Instagram 貼文。
在此指南中
影片逐字稿
你好,本影片將說明如何用 WordPress 編輯器嵌入 Instagram 貼文。
首先我們可以新增 Instagram 區塊。
接下來,從區塊複製現有貼文的連結。我已經複製好一個連結了。
將連結直接貼到按鈕中。接著按一下嵌入內容,即可在新增連結的頁面或文章中看到貼文。
這個方式也適用於影片。
嵌入 Instagram 貼文後,網站訪客便可直接在網站上檢視照片或影片,無須造訪 Instagram 網站。你可以嵌入照片、影片與連續短片。若要嵌入 Instagram 貼文,步驟如下:
- 從網頁瀏覽器的網址列或 Instagram 應用程式複製 Instagram 貼文的 URL,看起來會像這樣:
https://www.instagram.com/p/CuzSGmjO5MP
- 在 WordPress 編輯器中,於新的一行貼上 URL,無須輸入任何文字或空格。系統會自動將貼文嵌入嵌入內容區塊。URL 會預設為嵌入圖片的最大檔案大小:612px 寬。
- (選用) 你可在嵌入內容上/下方的工具列中,將內容靠左對齊、置中,或靠右對齊。
- (選用) 可在區塊設定啟用「為較小的裝置調整大小」選項,便能在不同的瀏覽器大小中保持長寬比。
影片嵌入內容看起來十分相似,但會出現三角形「播放」符號:
若嵌入內容無法正常運作,可查看疑難排解嵌入連結指引了解原因。
使用 Instagram 最新貼文區塊,即可顯示 Instagram 個人檔案中最新貼文的自動更新網格。
若要新增 Instagram 最新貼文區塊,請按一下 + 區塊插入工具圖示,然後搜尋「Instagram」。按一下Instagram 最新貼文,即可將區塊加入文章或頁面。
此處有新增區塊的詳細說明。
新增 Instagram 最新貼文區塊後,系統會提示你連結 Instagram 帳號。若你擁有啟用外掛程式的網站,則請將此網站的隱私設定設為「公開」或「即將推出」模式,而非「私人」。
按照以下步驟將你的網站連結至 Instagram:
- 按一下連結 Instagram。
- 在快顯視窗中,按一下「允許」即可核准連結。
- 選取你想要連結的帳號,如下方圖片所示。
- 再按一下「連結 Instagram」。
你會看到最近期九篇 Instagram 貼文以九宮格方式嵌入於網頁。此次並未包含協作珍藏 (分享至對談的貼文)。前往下一步驟,了解如何自訂網格。
你可以前往「工具」→「行銷」→「連結」(或如果使用 WP 管理員,則前往「主機」→「連結」),在儀表板中從 Instagram 連結網站或中斷網站連結。若你在此處中斷 Instagram 連結,系統會移除該 Instagram 帳號與 WordPress.com 帳號中所有網站的連結。
選取區塊時,右側邊欄會出現其他區塊設定。如果沒有出現側邊欄,請按一下右上角的「設定」圖示叫出設定。此圖示外觀為正方形中有兩個大小不同的欄位:
選項包括:
帳號設定:檢視你已經連結的 Instagram 帳號。若你需要移除帳號或連結至其他帳號,請中斷該帳號的連結。
顯示設定:調整顯示的 Instagram 貼文數量、使用的欄位數量,以及 Instagram 網格中分隔各則貼文的空格數量 (以像素計算)。
於行動裝置上以堆疊方式顯示:啟用「於行動裝置上以堆疊方式顯示」後,左側內容會顯示於右側內容的上方 (而非桌面版畫面的並排呈現)。此作法可為行動裝置訪客提供更好的瀏覽體驗。
進階:你可透過進階分頁在區塊加入 CSS 類別,以編寫自訂 CSS 並設定區塊樣式。深入了解如何在區塊中加入 CSS 類別。
對齊與寬度:Instagram 的最新貼文區塊工具列包含的選項,可以將區塊靠左對齊、置中或靠右對齊;此外,若佈景主題支援使用寬或全寬的顯示畫面:
你可以連結最多兩個 Instagram 帳號,即可使用兩個 Instagram 最新貼文區塊 (也就是每個區塊各有一個帳號)。此流程需要兩組不同的 Instagram 登入資訊,若你使用同一組登入資訊來管理多個 Instagram 帳號,則此功能無法使用。
連結第一個 Instagram 帳號至網站後,請按照下列步驟連結第二個帳號:
- 在新的瀏覽器分頁中,造訪 Instagram.com 並登出 Instagram 帳號 #1。
- 登入 Instagram 帳號 #2。
- 前往網站的儀表板。
- 前往「工具」→「行銷」→「連結」(如果你使用 WP 管理員,則前往「主機服務」→「連結」)。
- 在 Instagram 下方,點選下拉式選單的箭頭,並選取「連結不同帳號」。
- 成功連結後,即可使用兩個 Instagram 最新貼文區塊。
還有其他將網站與 Instagram 整合的選項,包含:
- 運用社交網路服務圖示區塊,顯示連結至你個人檔案的 Instagram 標誌。
- 自動分享貼文至 Instagram Business 帳號。