在 Webflow 網頁上插入互動式 Twitter 分享按鈕

重要的： 本指南利用 Webflow 的嵌入元件來合併個人化程式碼。嵌入元素可透過任何付費站點方案以及核心、成長、代理商和自由工作者工作空間方案存取。 

利用動態嵌入，您可以為網站上的內容設計個人化的 Twitter 分享按鈕，例如來自部落格文章彙編、音樂評論、活動等的資料。 

在本教程中，您將發現： 

1. 從 Twitter 取得嵌入程式碼的過程
2. 在 Webflow 網頁上嵌入互動式 Twitter 分享按鈕

如何從 Twitter 取得嵌入程式碼 

若要從 Twitter 取得嵌入程式碼： 

1. 造訪 Twitter 嵌入產生器
2. 按 推特按鈕
3. 選擇 分享按鈕
4. 打 設定自訂選項
5. 在中輸入任何範例文字（例如“試用文字”） 您想預先填寫推文文字嗎？ 部分 - 稍後，您將用生動的文字替換它
6. （可選）配置其他自訂選項（例如按鈕比例等） 
7. 按 更新 
8. 按 複製程式碼 複製您的嵌入程式碼

如何在 Webflow 網頁上插入互動式 Twitter 分享按鈕

重要的： 確保您已經制定了 CMS 編譯（例如，「部落格文章」、「音樂評論」等）並創建了至少 1 個事件編譯元素。 CMS 提供有用的模板來幫助您建立編譯。

在這裡，我們將檢查在您的網頁上插入一個互動式 Twitter 分享按鈕，以傳播來自任何 CMS 編譯的內容。 

我們將分兩步驟進行： 

1. 為您的推文文字建立一個編譯字段
2. 產生動態嵌入 

為您的推文文字建立一個編譯字段

您可以為推文文字設計一個新的明文字段（即，當網站訪客點擊整合的 Twitter 分享按鈕時您希望合併到推文中的文字），也可以使用現有的編譯欄位。 

若要為您的推文文字建立新的編譯欄位： 

1. 揭開 內容管理系統面板
2. 將滑鼠懸停在您的編輯上並點擊設定“齒輪” 顯示的圖標 
3. 按 新增字段
4. 挑選 純文字
5. 為您的欄位指定名稱（例如「推文文字」） 
6. 按 保存欄位

產生動態嵌入

動態嵌入僅對動態內容進行操作，這意味著您只能將它們附加到編譯頁面或固定頁面上的編譯清單中。您需要將嵌入的 Twitter 分享按鈕合併到與您想要分享的內容連結的編輯頁面（例如，「部落格文章」、「音樂評論」、「食譜」等），或加入編輯清單以您打算在Twitter 上分享內容的集合。

若要附加動態嵌入：

1. 導航 新增面板 > 先進的
2. 包括一個 嵌入 元素到畫布
3. 將您的 Twitter 分享按鈕嵌入程式碼貼上到程式碼編輯器中 
4. 在程式碼中的“data-text=”後面找到您在 Twitter 自訂選項中輸入的範例文本
5. 反白引號內的範例文本
6. 按 新增字段
7. 選擇您希望共享內容的編輯欄位（例如「推文文字」）
8. 按 儲存並關閉 

準備完畢後，首次亮相您的網站，公開您的小說 Twitter 分享按鈕。一旦網站訪客點擊您的 Twitter 分享按鈕，他們的推文將自動填入您的編譯中每個項目的編譯欄位的值。 

專家提示： 您可以利用編譯頁面和編譯清單中的條件可見性來隱藏編譯元素的 Twitter 分享按鈕，而無需推文文字。

‍重要的： 您的 Twitter 分享按鈕不會顯示在設計器畫布上 - 換句話說，您將無法預見設計器中的共用按鈕，而是顯示一個佔位符。發布或匯出您的網站後，Twitter 分享按鈕將在您放置的位置上展示（即展示）。如果您需要在個人化網域上啟用您的網站之前預覽共享按鈕，您可以在 webflow.io 臨時子網域上啟動您的網站。