如何逐步為您的網站創建共享按鈕

已發表: 2021-05-21

社交分享按鈕是每個網站不可或缺的元素。 無論是個人博客還是商業博客、在線作品集或電子商務項目，社交按鈕都可以讓客戶輕鬆地在 Facebook、Twitter、Instagram 或 Pinterest 上傳播有關您的內容的信息。 在您的網絡資源中實施簡單的社交分享按鈕時，您可以顯著擴大您的影響範圍並歡迎新客戶來到您的網站以尋找有價值的內容或商品。 如今，不應低估社交媒體網絡的力量。 如果在 Facebook 或 Instagram 上找不到企業，它就會錯失接觸目標受眾並向更多人推銷其商品和服務的機會。 顧名思義，社交分享按鈕使您的內容在網絡上更易於分享。 現代用戶在他們的 Facebook 頁面上分享他們喜歡的產品的鏈接是一種常見的做法。 與您的客戶具有相同興趣和偏好的關注者可以訪問每個社交帖子。

此外，通過社交媒體按鈕，您可以輕鬆地在社交媒體組中或向選定的個人廣播您的內容。 社交媒體分享的數量指出了人們認為更有價值和更具吸引力的內容。 因此，許多品牌都在努力增加社交媒體份額並提高品牌知名度。

只需單擊幾下，就可以輕鬆傳播有關首選內容的信息。 社交按鈕可讓您的客戶在您的網站上停留時廣播鏈接。 在大多數情況下，只需點擊分享按鈕並選擇他們希望您的鏈接出現的社交媒體平台。

如何逐步創建共享按鈕

互聯網上到處都是不同的分享按鈕，主要任務是選擇正確的。 有時您甚至不了解自己博客上需要哪些社交按鈕。 有時您找不到設計符合您需求的按鈕。 有時您找不到任何簡單而酷的方法來在您的博客上實現共享按鈕。 不要恐慌！ 在本文中，我們將向您展示如何創建一些基本的社交分享按鈕。

網頁設計課程

  • 在家學習的在線編碼課程
  • 完整的 Photoshop 精通套裝

如果您不想處理龐大、擁擠的代碼和復雜的細節定制，本教程正是為您準備的。 即使是 HTML 新手也會發現它很容易上手。 所以，係好安全帶，讓我們開始吧！

步驟1

您應該做的第一件事是打開您的 HTML 文件並粘貼下面的代碼

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>
或者
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

如何為您的網站逐步創建共享按鈕 1

第2步

現在創建一個包含此類信息的 js 文件：

Share = {
facebook: function(purl, ptitle, pimg, text) {
url = 'http://www.facebook.com/sharer.php?s=100';
url += '&p[title]=' + encodeURIComponent(ptitle);
url += '&p[summary]=' + encodeURIComponent(text);
url += '&p[url]=' + encodeURIComponent(purl);
url += '&p[images][0]=' + encodeURIComponent(pimg);
Share.popup(url);
},
twitter: function(purl, ptitle) {
url = 'http://twitter.com/share?';
url += 'text=' + encodeURIComponent(ptitle);
url += '&url=' + encodeURIComponent(purl);
url += '&counturl=' + encodeURIComponent(purl);
Share.popup(url);
},
popup: function(url) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');
}
};

就是這樣:) 一個非常簡單的方法來跟踪點擊直接放在共享頁面上的共享按鈕的統計信息。 借助數據庫中的表和簡單的 ajax 解決了這個問題：

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

此腳本從 URL 獲取 id，將標籤添加到表格和/或將特定社交網絡的計數器增加一。 這是共享按鈕的簡單解決方案。 您可以通過 CSS 輕鬆更改按鈕的外觀，您可以在 Photoshop 中設計自己的按鈕並在此處使用它們。 你幾乎可以做任何事情！

當然，這個例子有點原始，但是開始創建自己的酷分享按鈕是一個很酷的點。 搏一搏！

流行的社交媒體網絡允許您生成自定義代碼，我們可以將這些代碼嵌入到網站的帖子或頁面中，讓人們廣播他們喜歡的內容。 Facebook 和 Twitter 是支持各自功能的兩個最受歡迎的社交網絡。 讓我們看看如何將這些社交按鈕集成到您的網站中。

如何添加 Facebook 分享按鈕

Facebook 分享按鈕可讓您的客戶通過一段自定義文字分享指向您網站上的帖子或交易的鏈接。

要將此按鈕添加到您的網站，您首先需要轉到此頁面。

現在讓我們看看設置頁面上的一些字段的含義。

  • URL to Like - 此字段添加我們要在 Facebook 上分享的網站頁面。
  • 寬度 - 此處設置按鈕的寬度。
  • 要顯示的動詞 - 在這裡我們可以選擇“喜歡”或“我推薦”按鈕中的文本。
  • 配色方案 - 在這裡您可以選擇淺色或深色網站的按鈕設計。
  • 字體 - 選擇按鈕標籤的字體。

選擇設置後，找到“獲取代碼”按鈕並單擊它。 接下來，將顯示一個帶有代碼的窗口，它也需要分兩個階段插入：

在 <body> 標記之後插入代碼。

顯示按鈕的代碼：

將此代碼粘貼到應顯示 facebook 按鈕的位置：

如何添加 Twitter 分享按鈕

在將 Twitter 分享按鈕添加到您的網站時，Twitter 開發人員建議您牢記以下幾點：

  • 如果用戶未登錄他或她的 Twitter 帳戶，他們將被要求登錄以調整您的消息。
  • 該推文將鏈接到一個人訪問過的網頁。 用戶可以隨意按照他/她想要的方式調整推文的消息。
  • 單擊“推文”後，彈出框將顯示 Twitter 上的相關帳戶列表。 用戶可以決定在哪里關注他們或忽略他們。
  • 每天的次數沒有限制，同一用戶可以在時間軸上發布推文。

要添加 Twitter 分享按鈕，請執行以下操作：

  • 轉到 publish.twitter.com 並點擊 Twitter 按鈕。
  • 選擇您想要添加到您的網站的 Twitter 分享按鈕類型。
  • 調整推文及其將包含的消息，同時提及您希望它提及的@account。
  • 完成後，將代碼複製並粘貼到您的站點中。

差不多就是這樣。 我們希望您會發現本指南對您有所幫助。 最好的一點是，您不應該具備任何深厚的編碼技能來將社交分享按鈕添加到您的網站。 自動化代碼生成器為您提供現成的解決方案，您可以直觀地調整、複製和粘貼到您網站的 HTML。