在 ShareThis 中包含內嵌社交按鈕

了解如何使用 ShareThis 將內嵌共用按鈕新增至您的 Webflow 專案。

ShareThis 讓您能夠將內嵌社交按鈕整合到您的 Webflow 專案中 - 您網站的訪客可以輕鬆分享您的內容,並且您可以監控分享。這為每個參與者創造了有益的結果!

本教學涵蓋的主題:

  1. 將您的專案新增至 ShareThis
  2. 將程式碼片段插入Webflow
  3. 整合和設計內嵌按鈕

將您的專案整合到 ShareThis

如果您還沒有註冊,請先註冊 建立一個共享此帳戶 現在。 

完成註冊後,選擇 設定新屬性 從 ShareThis 帳戶右上角的下拉式選單中,輸入項目的網域,然後按一下 添加.

將程式碼片段插入Webflow

在此步驟中,您將獲得用於合併內聯社交共享的程式碼片段。在下面 共享工具 > 內嵌社交按鈕, 點選 取得程式碼,然後按一下 複製 將片段儲存到剪貼簿。

返回 Webflow 後,透過儀表板或設計器導航至您的 項目設定 您將在其中貼上一步複製的程式碼片段。 

自訂程式碼 部分,將您的程式碼插入 頭碼 使用 Command + V(在 Mac 上)或 Control + V(在 Windows 上)字段,透過按一下儲存變更 儲存變更,然後前往右上角並選擇 發布 其次是 發佈到選定的網域.

您可以在 ShareThis 中驗證您的進度。在下面 共享工具 > 內嵌社交按鈕, 選擇 手動驗證,輸入你的項目的URL,點擊 核實, 然後繼續 更新

整合和自訂內嵌按鈕

雖然還在ShareThis平台下 共享工具 > 內嵌社交按鈕,只需點擊 複製程式碼.

現在您可以在同一介面中自訂按鈕,也可以稍後重新造訪此自訂。我們很快就會回到這個主題。

返回您的 Webflow 項目。在左側邊欄中,使用加號圖標,然後在 成分,拖曳一個 嵌入 元素會新增到您希望顯示 ShareThis 按鈕的區域。 

當。 HTML 嵌入程式碼編輯器 出現時,貼上 ShareThis 中的程式碼片段,然後選擇 儲存並關閉.

由於您剛剛插入的程式碼片段引用了上一步中整合的程式碼片段,因此您的按鈕尚不可見。若要顯示它們,請選擇 發布 從右上角開始,繼續 發佈到選定的網域,然後開啟即時網站 - 您的按鈕現在應該在指定位置可見。 

您可以回傳 ShareThis 來修改按鈕的對齊方式、顏色、語言和其他方面。對更改感到滿意後,點擊 更新。按 Command + R(在 Mac 上)或 Control + R(在 Windows 上)重新整理 Webflow 項目以查看最近的調整。

現在您可以存取 ShareThis 帳戶中的社交分析儀表板,以監控您的分享隨時間的表現。了不起的工作!

麥伊凡
Ewan Mak 的最新帖子 (看全部)