将社交媒体按钮集成到您的网站的6种方法

2020年12月30日11:07:46 发表评论 35 次浏览

本文概述

你想让你网站的访问者了解你的社交网络渠道吗?你是否希望在社交网络上共享你的文章?然后, 你需要可点击的社交媒体符号(图标)以及每个平台的相应"赞"和"共享"按钮。

在下面的文章中, 我想向你展示一些使你的网站适合社交网络的可能性。

将社交媒体图标嵌入为图像

你可以轻松地将社交网络图标作为图像嵌入到你的网站中, 然后将它们链接到你的频道地址。但是你从哪里得到的呢?互联网上有很多不错的网站, 你可以在其中免费下载各种形式的符号作为图像文件。

我推荐页面iconfinder.com, 例如。

在这里, 你只需输入所需图标的名称(例如" instagram"), 就会获得质量很好的免费可下载图像文件列表。

可以在以下位置找到其他好的图标或图标集供应商列表buffer.com.

现在, 我将向你展示如何将图标嵌入你的网站。我们假设一个名为" instagram.png"的图标与你的HTML文件位于同一文件夹中。

然后, 你可以使用以下代码段:

<a target="_blank" href="https://www.instagram.com/blaustern_fotografie/">
 <img src="instagram.png" alt="将社交媒体按钮集成到您的网站的6种方法">
</a>

a标签用于使图标成为链接。当然, 你必须用自己的Instagram个人资料地址替换上面显示的地址。通过设置属性target =" _ blank", 请确保配置文件在新的浏览器标签中打开。

如果该图标位于相对于HTML文件的子文件夹中(例如"图标"), 则必须相应地调整图像的路径:

我们为制作了一个自定义演示.
不完全是。点击这里查看.

将社交媒体按钮集成到您的网站的6种方法1
<img src="icons/instagram.png" alt="将社交媒体按钮集成到您的网站的6种方法">

当然, 你可以调整图标大小以适合你的需求。我建议你为属于同一组的所有图标定义一个CSS类, 例如" sm_icon":

<img class="sm_icon" src="icons/instagram.png" alt="将社交媒体按钮集成到您的网站的6种方法">

然后, 在网站的CSS部分中, 你可以自定义图标的大小。但是请确保你不超过图标图像文件的分辨率, 否则图像看起来会模糊。

.sm_icon{
 
  width: 50px;
  /* the height is adjusted automatically*/
}

选择图像格式:PNG或SVG?

你会注意到图像文件有不同类型的文件格式, 例如JPG, GIF, PNG或SVG。文件类型具有不同的特性, 因此在网站中使用也具有某些优点和缺点。

我们将它们分为基于栅格的格式(JPG, GIF, PNG)和基于矢量的格式SVG。基于栅格的格式具有固定的分辨率, 具有一定的高度和宽度(以像素为单位)。

使用这些格式时, 你必须始终小心选择合适的分辨率, 具体取决于屏幕的分辨率和缩放级别以及要在网站上显示的图像的大小。

如果放大时超出分辨率, 图像将显得模糊或像素化。

例如, 如果你从Iconfinder下载分辨率为64x64px的图标, 然后在CSS设置中定义200px的宽度, 则会发生这种情况。

另一方面, 使用SVG格式时, 没有预定义的分辨率。可以始终将矢量图像缩放到所需大小, 而不会降低质量。

因此, 所有屏幕尺寸和缩放级别都可以使用一个相同的文件处理。你可以像对待任何其他图像格式一样对待矢量图像, 并将它们包括为img标签在HTML代码中具有所需的高度和宽度:

<img class="sm_icon" src="instagram.svg">

如果仍然必须使用基于像素的格式, 则建议使用PNG格式。与JPG或GIF相比, 它支持透明的图像区域, 这是图标和徽标经常需要的区域。

将社交媒体图标嵌入为字体

作为图像文件的替代, 还可以使用字体库来集成图标。优点在于, 可以使用与普通文本相同的方式来格式化图标。

我将以" Font Awesome"库为例说明该过程:

在以下位置创建一个免费的用户帐户https://fontawesome.com/(现在这是导入免费或付费图标的要求)。

  • 在你的帐户中, 你现在可以找到"套件"部分。你的新套件具有一个ID, 该ID由多个数字和字母组成。单击工具包后, 将为你提供脚本代码, 你需要将其插入HTML页面的head标签之间以导入库。

在以下示例中, 我用x字符屏蔽了ID:

<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>
  • 然后, 你可以搜索图标, 例如" instagram"。对于每个图标, 你将找到有关如何将其包括在HTML代码中的说明。我决定使用名称为" instagram-square"的图标, 如下所示。
<a target="_blank" href="https://www.instagram.com/blaustern_fotografie/">
    <i class="fab fa-instagram-square"></i>
</a>
  • 你可以使用CSS设置图标样式, 例如使用不同的字体大小或颜色:
.fa-instagram-square{
    color: green;
    font-size: 18px;
}

请注意, 字体超赞脚本的链接建立了与外部服务器的连接。这可能涉及将你的网站访问者的个人数据传输给Font Awesome。

根据适用的法律法规(例如gdpr), 你可能必须告知用户有关此服务的信息。或者, 你可以放心使用它, 并自己托管图书馆。可以在这里找到有关此信息:托管很棒的字体

作为Font Awesome的替代品, 我可以推荐物质图标来自Google。此处图标的集成与Font Awesome非常相似。

手动集成不同平台的社交媒体按钮(例如共享)

如果要包括来自Facebook, Twitter和Co.的点赞, 共享和其他交互式按钮, 则必须使用各个平台提供的特殊HTML代码。

  • 在页面上开发人员Facebook, 你可以为不同的Facebook按钮生成HTML代码。
  • 在页面上网站推特, 你将找到有关嵌入推文按钮, "关注"按钮或嵌入推文的说明。
  • Instagram, Pinterest, LinkedIn等其他网络也为你提供了将按钮或小部件嵌入你的网站的可能性。

请记住, 即使没有在网站上注册, 嵌入式代码也可能会将你网站访问者的个人数据传输到相应平台!根据法律情况, 你必须在此处采取某些步骤。

例如, 获得访问者的同意或在隐私策略中告知他们有关外部代码的使用。还建议将你的用户推荐给各个平台的数据保护策略。

在特殊提供商的帮助下整合社交媒体按钮

在帖子下, 你通常会找到各种社交媒体按钮。为每个单独的按钮手动插入相应平台的给定代码非常耗时。因此, 你可以找到为你完成这项工作的提供商。你要做的就是将特定脚本嵌入到页面中, 并定义社交媒体按钮栏应出现的位置。

一个例子是分享这个。免费注册后, 你可以创建最多包含43个社交媒体按钮的按钮栏!

一旦进行了一些单独的设置(例如, 语言, 按钮上显示的信息)和视觉调整(例如, 颜色, 角, 间距), 你将从sharethis中获得一个自定义脚本, 你可以将其嵌入到页面的页眉区域中。

该脚本当然将建立与sharethis服务器的连接。你应该在你的隐私权政策中告知你网站的访问者。你也可以将它们重定向到https://sharethis.com/privacy/.

在那里, 你将找到有关sharethis收集哪些与用户相关的数据的信息。请注意, 此页面上有一个"退出"按钮, 可用于根据sharethis收集的数据阻止显示与用户相关的广告。

重要提示:你还必须告知用户有关各个平台(例如Facebook, Twitter等)的隐私权政策, 因为sharethis会将用户的数据传输到各个平台。

替代提供商是加法。这里的按钮选择更大, 即使不注册也可以获取代码。

关于数据保护, 与sharethis相同的建议适用。有关与用户相关数据的收集和使用的信息, 请参见https://www.addtoany.com/privacy.

当然, 还有更多的提供商, 例如添加这个.

WordPress的社交媒体插件

WordPress社交媒体插件领域的种类更多。你可以在此处了解有关不同插件的信息:

notlogy:适用于WordPress的10个最佳社交媒体插件(2020)

此外, 提供商sharethis和addtoany还作为WordPress插件提供其服务。

当然, 在使用社交媒体插件时, 你再次必须注意隐私政策或用户的同意。

总结

如你所见, 将交互式社交媒体按钮集成到你的网站并不难。你可以手动插入按钮, 也可以依靠各种插件提供程序的支持。最好选择最适合你的选项!如果你还注意隐私, 那将是安全的一面。

你的前端占用了用户的CPU吗?

随着Web前端变得越来越复杂, 资源贪婪功能对浏览器的需求也越来越大。如果你有兴趣监视和跟踪生产中所有用户的客户端CPU使用率, 内存使用率等,

尝试notlogy

.

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭就像Web应用程序的DVR, 它记录了Web应用程序或网站中发生的一切。你不必猜测为什么会发生问题, 而是可以汇总并报告关键的前端性能指标, 重播用户会话以及应用程序状态, 记录网络请求, 并自动发现所有错误。

现代化调试Web应用程序的方式—免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: