如何建立自訂分享按鈕
您願意設計自己的共用按鈕，但想利用我們的平臺來跟蹤社交活動嗎？
發佈者 當圖示希望圖示更好地與品牌和調色板對齊或針對不同的頁面定製按鈕配置時，通常從頭開始設計他們的共用按鈕。然後，他們將利用我們的免費分析平臺深入挖掘其主頁、社交管道和社交推薦。
您可以使用我們的自訂共享按鈕執行的一些操作包括：
- 使用CSS修改它們的形狀和顏色，以任何你想要反映你的品牌的方式。
- 在按鈕上寫下您想要的任何文本，這對於自定義號召性用語非常有用！
- 在同一頁面的不同部分顯示多個按鈕集/實例。
為了 ShareThis 工具在您的網站上工作，請按照以下步驟添加您的獨特 ShareThis 代碼到網站的標題部分：
- 登錄到您的 ShareThis 平台帳戶。如果您沒有 ShareThis 帳戶，免費註冊 這裡.
- 在「應用程式目錄」中，選擇「 自定義共用按鈕」。
- 選擇 右上角的 「啟動代碼」 按鈕。在彈出視窗中，按下「複製 代碼」 按鈕。
- 登入您的 HTML 網站。
- 粘貼唯一 ShareThis 從步驟 3 複製到標頭欄位中的代碼，然後按下「儲存」
- 為自訂共享按鈕建立 HTML 和 CSS。Facebook 和 Twitter 的自訂按鈕設定應類似於此：
- HTML:
- CSS:
.st-custom-button[data-network] {
background-color: #0ADEFF;
display: inline-block;
padding: 5px 10px;
cursor: pointer;
font-weight: bold;
color: #fff;
}
.st-custom-button[data-network]:hover,
.st-custom-button[data-network]:focus {
text-decoration: none;
background-color: #00C7FF;
}
例如，如果要專門更改 Facebook 按鈕的外觀，CSS 檔中的 CSS 類應為 .st-custom-button[data-network=“facebook”]
- 將資料屬性添加到特定於每個社交管道的 div，以便指定您希望我們的核心代碼在使用者按一下或點擊您的共用按鈕時執行哪些操作。
支援的社交管道包括：
| 社會服務 | 數據網路代碼 |
| 黑人的命也是命 | Blm。 |
| Blogger | Blogger |
| Buffer | 緩衝區 |
| 複製連結 | 複製 |
| Diaspora | 僑民 |
| Digg | Digg |
| 豆瓣 | 豆瓣 |
| 電子郵件 | 電子郵件 |
| Evernote | 永遠注意 |
| 翻轉板 | |
| Gmail | Gmail。 |
| 谷歌書籤 | 谷歌書記 |
| 駭客新聞 | 駭客新聞 |
| Instapaper | 因斯塔紙 |
| 艾奧比克斯 | 碘比克斯 |
| 卡高 | 卡考 |
| 咕咕咕 | 庫阿普 |
| Line | 線 |
| 即時記錄 | 現場日誌 |
| Mail.Ru | 梅魯 |
| Meneame | 梅內梅 |
| 信使 | 信使 |
| Odnoklassniki | 奧諾克拉斯尼基 |
| 展望 | 展望 |
| getpocket。 | |
| 列印 | 列印 |
| 推送到Kindle | 金德萊特 |
| Qzone | qzone。 |
| Refind | 重新發現 |
| 人人網 | 人人 |
| Skype | Skype。 |
| Surfingbird | 衝浪鳥 |
| Telegram | 電報 |
| 騰訊QQ | 騰訊客服 |
| Threema | 三馬 |
| 特雷洛 | 特雷洛 |
| Tumblr | Tumblr |
| 維伯 | 振動 |
| 斷續器 | vk |
| 微信 | 微信 |
| ShareThis | sharethis |
| 新浪微博 | 微 博 |
| 短信 | 短信 |
| Snapchat | Snapchat |
| Wordpress | Wordpress。 |
| 興 | |
| 雅虎郵件 | 雅虎郵件 |
| 尤姆利 | 美味 |
資料屬性包括：
| 資料網路 | 指定內容將共用到哪個社交平臺 |
| 資料網址 | 指定您希望分享的網址(可縮短 URL) |
| 資料短網址 | 指定可與資料網址來用於使用網址 |
| 資料標題 | 指定要分享的標題（某些電子郵件通道中的電子郵件主題） |
| 資料影像 | 指定指向要在共用內容中顯示的圖像的連結 |
| 資料描述 | 指定要分享的摘要文字/ 說明 |
| 資料使用者名稱 | 指定 Twitter 使用者名稱 |
| 資料訊息 | 指定電子郵件共享的正文複本 |
| 數據-電子郵件-主題 | 指定電子郵件的主題 |
- 導航到您網站上的頁面（例如， 部落格 、產品等），並粘貼從 ShareThis 平台，無論您想在哪裡 ShareThis 工具。
注意
- 如果您需要查看自訂共享按鈕的工作範例，您可以在此處查看： https://codesandbox.io/s/amazing-sun-0rrb2?file=/index.html
- ShareThis will look for the <div> code of the buttons along with its data attributes and ShareThis classes on your website’s code, so if you have a custom icon or image you want to set for the buttons, you will have to wrap it inside the <div> mentioned above, like this:
- One way to display the share count for each social platform is adding a span code with the <em>count</em> class<em><strong> </strong></em><strong><em>inside</em></strong> the <div> code for the buttons: