指南/建立內容/嵌入內容/顯示 Instagram 摘要

顯示 Instagram 摘要

使用「最新 Instagram 貼文」區塊,即可顯示 Instagram 帳號中最新貼文的自動更新網格。閱讀這份指引,你會了解如何將最新 Instagram 貼文摘要新增至網站。

必要:Instagram 專業帳號

只要擁有 Instagram 專業帳號 (商家或創作者),就能在網站顯示 Instagram 貼文摘要。開設 Instagram 專業帳號是免費的。你可以建立新的 Instagram 專業帳號,或將現有的 Instagram 個人帳號轉換為專業帳號。

第一次將 WordPress.com 帳號連結至 Instagram 時,系統會提示你將 Instagram 個人帳號轉換為專業帳號,或選取你建立的專業帳號

步驟 1:新增「最新 Instagram 貼文」區塊

若要顯示最新 Instagram 貼文的摘要,第一步是新增「最新 Instagram 貼文」區塊

按照以下步驟,即可新增「最新 Instagram 貼文」區塊

  1. 在 WordPress.com 網站上編輯頁面、文章或範本。
  2. 按一下「+ 區塊插入工具」(加號圖示),然後搜尋「Instagram」。
  3. 按一下「最新 Instagram 貼文」圖示,以插入「最新 Instagram 貼文」區塊
在區塊選取器中的「最新 Instagram 貼文」圖示周圍繪製的方塊。

此處有新增區塊的詳細說明。 

步驟 2:連結至 Instagram

第一次新增「最新 Instagram 貼文」區塊時,系統會提示你連結 Instagram 帳號。若你擁有啟用外掛程式的網站,則請將此網站的隱私設定設為「公開」或「即將推出」模式,而非「私人」。

按照以下步驟將網站連結至 Instagram:

  1. 按一下「最新 Instagram 貼文」區塊中的「連結至 Instagram」按鈕文」區塊。
  2. 在快顯視窗中,按一下「允許」按鈕即可核准該連結。
  3. Instagram 視窗將會關閉,而你會在 WordPress 編輯器中看到最新 Instagram 貼文的摘要。

此次並未包含在 Instagram 的協作珍藏 (分享至對談的貼文)。

顯示文章的「最新 Instagram 貼文」區塊範例。
「最新 Instagram 貼文」區塊範例

步驟 3:自訂摘要

你可以變更「最新 Instagram 貼文」區塊的設定,包括要顯示的文章數量以及這些文章在行動裝置的顯示方式。

若要自訂 Instagram 摘要顯示方式,請按照以下步驟:

  1. 按一下「最新 Instagram 貼文」區塊即可將其選取。
  2. 開啟區塊設定側邊欄
  3. 自訂帳號設定和顯示設定。

自訂選項包括下列項目:

帳號設定:檢視你已經連結的 Instagram 帳號。若你需要移除帳號或連結至其他帳號,請中斷該帳號的連結。

顯示設定:調整顯示的 Instagram 貼文數量、使用的欄位數量,以及 Instagram 網格中分隔各則貼文的空格數量 (以像素計算)。

於行動裝置上以堆疊方式顯示:啟用「於行動裝置上以堆疊方式顯示」後,左側內容會顯示於右側內容的上方 (而非桌面版畫面的並排呈現)。此作法可為行動裝置訪客提供更好的瀏覽體驗。

進階:你可透過進階分頁在區塊加入 CSS 類別,以編寫自訂 CSS 並設定區塊樣式。深入了解如何在區塊中加入 CSS 類別

區塊設定側邊欄會顯示「最新 Instagram 貼文」區塊的帳號和顯示設定。

對齊與寬度:選取區塊時出現的區塊工具列,除了提供將區塊對齊左側、中央或右側的選項外,此外若佈景主題支援使用寬或全寬的顯示畫面。

區塊工具列中醒目提示的對齊選項。

連結多個 Instagram 帳號

你可以連結最多兩個 Instagram 帳號,即可使用兩個「最新 Instagram 貼文」區塊 (也就是每個區塊各有一個帳號)。此流程需要兩組不同的 Instagram 登入資訊,若你使用同一組登入資訊來管理多個 Instagram 帳號,則此功能無法使用。

將第一個 Instagram 帳號連結至網站後,請按照下列步驟連結第二個帳號:

  1. 在新的瀏覽器分頁中,造訪 Instagram.com 並登出 Instagram 帳號 #1。
  2. 登入 Instagram 帳號 #2。
  3. 按一下以下連結,即可前往網站的「行銷連結」頁面。
  4. 在已連結的 Instagram 帳號旁邊,按一下向下箭頭。
  5. 在 Instagram 下方選取「連結不同帳號」選項。
  6. 成功連結後,即可使用兩個「最新 Instagram 貼文」區塊

管理你的 Instagram 連結

你也可以從網站的「行銷連結」頁面管理 Instagram 連結。

若要中斷 Instagram 帳號與 WordPress.com 網站的連結或將 Instagram 帳號重新連結至 WordPress.com 網站,請按照以下驟操作:

  1. 按一下以下連結,即可前往網站的「行銷連結」頁面。
  2. 在已連結的 Instagram 帳號旁邊,按一下向下箭頭。
  3. 按一下「中斷連結」按鈕,並確認你要中斷帳號連結。

接著你可以按一下「行銷連結」頁面上 Instagram 旁的「連結」,重新連結 Instagram 帳號,或連結其他帳號。

Copied to clipboard!