如何逐步为您的网站创建共享按钮

已发表: 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 中。