跳至主要內容
用益網路科技
用益網路科技

把會員還給品牌商-會員數據精準掌握

  • 產品服務
    • 雲端服務
    • 系統整合
    • 系統維運服務
    • 客製化軟體開發服務
    • mCRM系統
    • 網頁視覺設計
  • 客戶案例
  • 聯繫顧問
  • meta微商實驗室
    • meta微商實驗室
    • Joan 問AB答:創業代際的那些大小事
    • Elementor教學
    • mShop教學
    • 影音專區
用益網路科技
用益網路科技

把會員還給品牌商-會員數據精準掌握

如何在網頁上實現無縫的社交分享功能

  • 2024-08-02
  • [email protected]

1. Social Share

  1. 拖放社交分享小工具:在Elementor編輯器中,從元素庫中將「Social Share」小工具拖放到頁面上。
  2. 選擇社交平台:在小工具的內容設置中,選擇你想要的社交平台(如Facebook、Twitter等)。
  3. 自定義圖標和樣式:調整圖標的外觀、大小、間距和樣式,使其符合網站的整體設計。
  4. 設置分享URL:確保分享的URL正確指向當前頁面或指定的頁面。
  5. 保存和預覽:保存更改並預覽頁面,確保社交分享按鈕正常運作。

2. Instagram Feed

以下是範例展示,會呈現IG內文

獲取您的Instagram應用API詳細信息

產生存取權杖:

  1. 需要從您的Instagram帳戶獲取貼文/資料,首先需生成存取權杖。

取得應用程式ID和應用程式金鑰:

  1. 返回您的應用程式儀表板(開發人員元資料)。在這裡,點擊您的應用程式並導航至 Instagram基本顯示 > 基本顯示。
  2. 向下滾動至Instagram應用程式ID和Instagram應用程式秘密部分。複製這些並保存以供以後使用。

產生使用者令牌:

  1. 進一步向下滾動到「使用者令牌生成器」部分。找到測試用戶列表,點擊您之前新增的用戶的“生成令牌”按鈕。在彈出窗口中按一下「允許」。
  2. 生成存取權杖後,複製該令牌並與您的App ID和App Secret一起儲存。
  3.  

設定您的Instagram Feed小工具

  1. 登入您的網站並導航至 儀表板 > 設定 > UAE。
  2. 向下滾動至「Instagram Feed」,確保該小工具處於活動狀態。
  3. 點擊「設定」,輸入之前保存的App ID、App Secret和存取權杖,完成設置。

將Instagram Feed新增置網頁上

  1. 拖放Instagram Feed小工具:從元素庫中拖放「Instagram Feed」小工具到頁面上。
  2. 連接Instagram帳號:在內容設置中,點擊連接Instagram帳號,授權訪問你的Instagram數據。
  3. 設置顯示選項:選擇顯示方式,如網格布局、幻燈片顯示等,並設置顯示的圖片數量。
  4. 自定義樣式:調整圖片的間距、邊框、圓角等樣式,確保符合網站設計。
  5. 保存和預覽:保存更改並預覽頁面,確保Instagram Feed正常顯示。

3. Twitter Feed

以下是範例展示,會呈現Twitter內文

獲取您的Twitter應用API詳細信息

創建Twitter應用:

  1. 步驟 1–登入您的Twitter 開發者帳號。在這裡,點擊右上角的「開發者入口網站」
  2. 步驟 2 – 接下來,您需要建立一個專案和應用程式。點擊中間“建立項目”按鈕並按照說明進行操作。
  3. 請添加您的項目名稱、設定用例(在網站中嵌入推文)、描述和應用程式名稱。項目和應用程式名稱可以是您喜歡的任何名稱。

申請基本存取權限:WP使用 Twitter API v2 來獲取 Twitter 數據,因此在免費訪問下,無法檢索推文。因此,我們需要基本存取權限才能從 API v2 取得數據

  1. 申請基本存取權限可以使用此連結
  2. 在最後一步看到 API 金鑰。安全保存這些內容,然後將它們添加到設定中。

設定您的Twitter Feed小工具

  1. 登入您的網站並導航至 儀表板 > 設定 > UAE。
  2. 向下滾動至「Twitter Feed」部分,確保該小工具處於活動狀態。
  3. 點擊「設定」,輸入之前保存的API Key、API Secret Key、Access Token和Access Token Secret,完成設置。

將Twitter Feed新增置網頁上

  1. 拖放Twitter Feed小工具:從元素庫中將「Twitter Feed」小工具拖放到頁面上。
  2. 連接Twitter帳號:在內容設置中,點擊連接Twitter帳號,授權訪問你的Twitter數據。
  3. 選擇顯示類型:選擇要顯示的推文類型,如時間軸、特定用戶的推文或特定話題的推文。
  4. 自定義顯示設置:設置顯示的推文數量、樣式和其他選項,使其與網站風格一致。
  5. 保存和預覽:保存更改並預覽頁面,確保Twitter Feed正常顯示。
Metabiz 是專注於 HTML 客製化與程式開發的專業團隊,致力於為客戶提供簡潔、高效、易於維護的網頁設計與程式解決方案。我們的目標是通過技術實現創新,協助客戶在數位時代中脫穎而出。若您有相關需求,歡迎隨時與我們聯繫,一起實現您的網頁和程式開發目標。
上一頁適合打造專業品牌形象的元件: Elementor教學
在網站上添加Google Map和Hotspot的詳細指南下一篇
  • 產品服務
    • 雲端服務
    • 系統整合
    • 系統維運服務
    • 客製化軟體開發服務
    • mCRM系統
    • 網頁視覺設計
  • 客戶案例
  • 聯繫顧問
  • meta微商實驗室
    • meta微商實驗室
    • Joan 問AB答:創業代際的那些大小事
    • Elementor教學
    • mShop教學
    • 影音專區

關於我們

  • 客戶案例
  • 聯繫顧問
  • meta微商實驗室

產品服務

  • 社群電商
  • 品牌官網
  • 雲端服務
  • 系統整合
  • mCRM系統
  • 退款政策
  • 隱私權政策
  • 服務條款
  • 消費者權益說明

Copyright © 2025 用益網路科技 | Powered by 用益網路科技