如何重新實現 ShareThis 具有特定共用參數的按鈕
在本指南中，我們將教您如何重新初始化（重新載入）我們的 ShareThis 按鈕以使用特定的共享參數。默認情況下， ShareThis 小部件載入器在瀏覽器遇到JavaScript標籤時立即載入;通常位於網頁的代碼中。 ShareThis 資產通常從最接近使用者的CDN載入。但是，如果您希望更改預設設置，以便在網頁完成載入後載入小部件，則只需在頁面中設置一個參數即可。
重新初始化按鈕將允許您：
- 控制何時顯示按鈕，例如，直到模式或彈出窗口打開。
- 在同一頁面上具有不同配置的按鈕的不同實例，例如，如果您只想在特定部分顯示Twitter按鈕，而在另一個部分顯示Facebook按鈕。或者，如果您想在不同的按鈕集上使用不同的語言。
- 使用共用按鈕載入新連結時自動刷新共用按鈕屬性（無限滾動）。
注意： 如果您不想使用特定參數重新初始化按鈕，則可以使用 window.__sharethis__.initialize（） 函數，就像在模態、彈出視窗等時一樣。啟動。請注意，在添加上面的代碼行之前，您可能需要設置大約0.3到1秒的延遲，以便為容器顯示留出時間，否則，該函數將被過早調用
<strong>Add <div> and Javascript code</strong>
// render the html <div id="我的內聯按鈕"></div> // load the buttons 視窗.__sharethis__.load("內聯共用按鈕", {/* 這是您的配置必須位於的位置，請閱讀配置部分 */
添加代碼的上述部分後,現在能夠包括以下任何或所有配置選項。
設定選項
設定 = { 對準: 字串 // left, right, center, justified. 容器: 字串 // id of the dom element to load the buttons into 開啟: 布林 font_size: 整數 // small = 11, medium = 12, large = 16. Id: 字串 // load the javascript into a specific dom element by id attribute 標籤: 字串 // "cta", "counts", or "none" 語言: 字串 // IETF language tag in which the buttons' labels are, min_count: 整數 // minimum amount of shares before showing the count 填滿: 整數 // small = 8, medium = 10, large = 12. 半徑: 整數 // in pixels 網路: 陣列[字串], show_total: 布林 show_mobile_buttons: 布林 // forces sms to show on desktop use_native_counts: 布林 // uses native facebook counts from the open graph api 大小: 整數 // small = 32, medium = 40, large = 48. 間距: 整數 // spacing = 8, no spacing = 0. };
例子
// render the html <div id="我的內聯按鈕"></div* // load the buttons 視窗.__sharethis__.load("內聯共用按鈕", { 對準: "左", Id: "我的內聯按鈕", 開啟: 真, font_size: 11, 填滿: 8, 半徑: 0, 網路: ["信使", "推特", ' pinterest ', ' sharethis ', "短信", "微信"], 大小: 32, show_mobile_buttons: 真, 間距: 0, 網址: "https://www。 sharethis .com", // custom url 標題: "我的自定義標題", 語言: “恩”, 影像: "https://18955-presscdn-pagely.netdna-ssl.com/wp-content/uploads/2016/12/ShareThisLogo2x.png", // useful for pinterest sharing buttons 描述: "我的自定義描述", 使用者: " ShareThis " // custom @username for twitter sharing });
可用網路
| 社會服務 | 數據網路代碼 |
| 黑人的命也是命 | 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。 |
| 興 | |
| 雅虎郵件 | 雅虎郵件 |
| 尤姆利 | 美味 |
延遲載入和 ShareThis 工具
這 ShareThis 工具僅在首次載入網站時載入/顯示。如果您使用的是以下工具 圖片分享按鈕 或視頻共用按鈕，並且您的網站使用延遲載入或類似技術，一旦出現較新的元素，您將需要重新初始化工具。
因為 ShareThis 僅在該場合搜索圖像/嵌入的視頻，並且尚未載入靠近底部的圖像， ShareThis 即使它們稍後載入，也不知道它們的存在，並且不會顯示它們上的按鈕。
作為解決方法，下面的 Javascript 代碼將每 3 秒檢查一次是否完成了任何滾動，如果是這樣，它將重新初始化按鈕。我們使用滾動作為瞭解圖像是否已載入的一種方式;因為一旦訪問者滾動到該特定部分，圖像就會載入。
//state variable for scrolling
let scrolling = false;
//in case of scrolling, change the state of the scrolling variable to true
window.onscroll = function() {
scrolling = true;
}
/*create an interval that checks every 3 seconds the state of the scrolling variable, if any scrolling has been done in that interval, reinitialize the buttons*/
setInterval(() => {
if (scrolling) {
scrolling = false;
window.sharethis.initialize()
}
}, 3000);
筆記
- 請記住,在 Facebook 和其他社交管道上共用時,打開圖形標籤將優先。如果連結到自定義 URL,請確保為該頁面填寫了打開圖形標記。
- 與我們的其他工具一樣，我們建議在嘗試之前將網站移動到實時生產，因為有些資源在本地/測試環境中不會傳遞。
優先順序
重要的是要記住優先順序,其中 ShareThis 代碼進程共用屬性。通常,我們建議使用一種方法在頁面上指定共用屬性,以防止出錯。
- 任何動態指定的 JavaScript 屬性（即最高優先順序）
- 標記指定屬性（即第二優先順序）
- 開放圖協定標籤（即最低優先順序）