提供社交媒体共享链接的最简单(也是性能最高)的方法
去年夏天,我写了社交媒体的基本元标记,内容涉及开发人员如何准备网页以在社交媒体上共享时优化其外观。 但是如何创建允许用户共享这些网页的链接呢? Facebook,Twitter和LinkedIn提供了许多方法来实现此目的,其中一些涉及按钮生成器,而另一些则需要外部JavaScript。 但是,要避免所有这些情况,您可以创建自己的链接来共享网页。 最棒的是,做自己很简单。 这是如何做。
基本概念:只是一个链接
使用链接共享网页时,实际上是在向每个社交媒体服务提供的URL提交GET请求(即单击链接)。 然后,通过在该URL的末尾附加一系列名称/值对(查询参数,如?title = Title),可以指定要共享的网页的URL,有时还可以附加信息。
现在,需要正确地对GET请求中的某些符号(称为“保留字符”)进行编码,以免干扰正常的浏览器功能。 这些字符受“ 百分比编码 ”的约束,也就是说,它们在查询参数中以“%”表示,后跟两位十六进制代码。 这些是保留字符及其百分比编码的等效项。
! | # | $ | 和 | ' | ( | ) | * | + |
---|---|---|---|---|---|---|---|---|
%21 | %23 | %24 | %26 | %27 | %28 | %29 | %2A | %2B |
, | / | : | ; | = | ? | @ | [ | ] |
---|---|---|---|---|---|---|---|---|
%2C | %2F | %3A | %3B | %3D | %3F | %40 | %5B | %5D |
注意:空格可以用“%20”或“ +”表示。
当然,不需要记住这些十六进制代码。 提供转换的资源很多( Bing在搜索引擎中内置了一种资源),正如您将很快看到的那样,JavaScript在这方面也可以应付繁重的工作。 让我们看一些较流行的社交媒体服务,并了解如何通过它们共享网页。
脸书
根据其开发人员指南 ,Facebook指定以下URL以在共享网页时提交GET请求:
https://www.facebook.com/dialog/share
尽管有四个查询参数可用,但仅需要两个参数:您要共享的网页的URL和一个应用程序ID,开发人员可以通过在Facebook上注册获得该ID。 如果您没有应用程序ID,则注册过程不会很繁琐,但是当存在更简单的解决方案时,也无需打扰。
没有任何必需的App ID的Facebook原始网页共享方法,在其任何文档中都不再提及,但仍受支持。 实际上,有无数使用此方法的网站,我无法想象它很快就会被弃用。 该URL是:
https://www.facebook.com/sharer.php
唯一可用的参数是“ u”,用于指定您要共享的网页的URL。 这是一个在Facebook上共享CSS-Tricks主页的示例-继续,剪切并粘贴到浏览器中以查看结果。
https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcss-tricks.com%2F
如前所述,共享的URL必须进行百分比编码。 另外,请注意如何“?” 指定第一个查询参数的开始。 后面的查询参数用“&”分隔,这将很快出现。
推特
Twitter指通过URL共享网页作为Tweet Web Intent –使用的URL是:
https://twitter.com/intent/tweet
与Facebook(只能指定要共享的网页)不同,Twitter与Twitter不同,Twitter允许您添加一些文本和任意数量的标签。 用户将有机会在发推文之前编辑所有这些内容,但是如果他们不被打扰,这将为他们提供一个领先的开端。 例如,假设您想发布以下信息:
参数 | 值 |
---|---|
网址 | https://openvpn-client.megasupersecretplace.com:5757/ |
文本 | 有关使用级联样式表的提示,技巧和技巧。 |
主题标签 | CSS HTML |
带有查询参数百分比编码并添加了换行符的网址(为了清楚起见)为:
https://twitter.com/intent/tweet
?url=http%3A%2F%2Fcss-tricks.com%2F
&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.
&hashtags=css,html
那给你:
您会注意到,Twitter预选择了文本,这使用户可以轻松进行编辑。 并且,请记住,该推文必须少于140个字符,因此最好不要提供太长的副本。 为了简单起见,我省略了讨论三个较少使用的参数的内容,有关这些参数的详细说明,请参见Twitter的Developers Documentation 。 这些附加参数使您可以指定与推文关联的用户名,建议的相关用户名以及相关推文的ID。
领英
在LinkedIn上共享时使用的URL是:
https://www.linkedin.com/shareArticle
总共有五个参数,详细信息如下表所示,该参数取自LinkedIn的Developers文档 :
参数 | 描述 | 最长长度 | 需要 |
---|---|---|---|
网址 | 您希望共享的页面的URL编码URL。 | 1024 | 是 |
微型 | 必填参数,其值必须始终为:true | 4 | 是 |
标题 | 您希望使用的URL编码标题值。 | 200 | 没有 |
摘要 | 您希望使用的URL编码的描述。 | 256 | 没有 |
资源 | 内容的url编码源(例如,您的网站或应用程序名称) | 200 | 没有 |
除了您要共享的网页的URL,还需要另一个名为“ mini”的查询参数。 但是,正如您所看到的,它的值永远不会改变,因此我们可以将其硬编码到URL中。 为了演示,让我们在LinkedIn上分享以下内容:
参数 | 值 |
---|---|
网址 | https://openvpn-client.megasupersecretplace.com:5757/ |
标题 | CSS技巧 |
摘要 | 有关使用级联样式表的提示,技巧和技巧。 |
资源 | CSS技巧 |
这提供了以下URL-再次为清晰起见添加了换行符:
https://www.linkedin.com/shareArticle
?mini=true
&url=https%3A%2F%2Fwww.css-tricks.com%2F
&title=CSS-Tricks
&summary=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.
&source=CSS-Tricks
尽管未在文档中明确提及,但如果省略了“ title”参数,LinkedIn将从共享页面的Open Graph标签<meta property="og:title">
获取该内容。 同样,如果省略“ summary”参数,则使用“打开图”标记<meta property="og:description">
。 至于“源”参数,文档中没有任何内容指定共享网页时如何使用或显示此值–看起来可以安全地忽略它。
知道所有这些,如果共享的网页具有适当的Open Graph标签补充,只需指定URL就足够了,因为“ title”和“ summary”参数将被适当地填充。
放在一起
既然我们知道在社交媒体上共享网页时使用的语法,那么我们究竟如何实现此代码? 也许最常见的方法是简单地列出一组使用CSS样式合适的共享链接:
<ul>
<li><a href="https://www.facebook.com/sharer.php?..." target="blank" rel="noopener noreferrer"><img src="facebook-icon.png" alt="Share Page on Facebook" /></a></li>
<li><a href="https://twitter.com/intent/tweet?..." target="blank" rel="noopener noreferrer"><img src="twitter-icon.png" alt="Share Page on Twitter" /></a></li>
<li><a href="https://www.linkedin.com/shareArticle?..." target="blank" rel="noopener noreferrer"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></a></li>
</ul>
在定位标记中添加target="_blank"
可使共享对话框显示在新窗口或新标签中,该新窗口或新标签在从台式机到移动设备的所有设备上均能正常工作。
但是,使用查询参数的百分比编码对这些链接进行硬编码可能是乏味且容易出错的。 对于由CMS动态提供服务的任何网页,这都是在服务器端执行数据整理并将其插入HTML所需位置的绝佳机会。
另一个选择是使用社交媒体共享:我在CodePen上创建的HTML链接生成器 。 这使您可以输入我们刚刚查看过的任何或所有必要参数,并将输出适当HTML供您插入自己的代码中。
见笔社交媒体共享:HTML链接发电机由亚当·科蒂( @adamcoti )上CodePen 。
作为一个几乎完全在前端工作的自由网络开发人员,我选择使用JavaScript / jQuery功能,该功能无需定制即可用作我项目的交钥匙解决方案。 这样,无论我是在静态网站上工作,自定义WordPress主题还是将模板集成到CMS中,我都可以放心地处理所有共享链接。
这是我使用HTML,其中的类指定了特定的共享服务。 在JavaScript中,当文档对象模型(DOM)准备就绪时,会调用将click
事件附加到共享按钮的setShareLinks()
函数:
<ul>
<li class="social-share facebook"><img src="facebook-icon.png" alt="Share Page on Facebook" /></li>
<li class="social-share twitter"><img src="twitter-icon.png" alt="Share Page on Twitter" /></li>
<li class="social-share linkedin"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></li>
</ul>
function socialWindow(url) {
var left = (screen.width - 570) / 2;
var top = (screen.height - 570) / 2;
var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
window.open(url,"NewWindow",params);
}
function setShareLinks() {
var pageUrl = encodeURIComponent(document.URL);
var tweet = encodeURIComponent(jQuery("meta[property='og:description']").attr("content"));
jQuery(".social-share.facebook").on("click", function() {
url = "https://www.facebook.com/sharer.php?u=" + pageUrl;
socialWindow(url);
});
jQuery(".social-share.twitter").on("click", function() {
url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
socialWindow(url);
});
jQuery(".social-share.linkedin").on("click", function() {
url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl;
socialWindow(url);
})
}
通过读取document
对象的属性,可以轻松获取当前网页的URL。 而且,对于Twitter,Open Graph标签<meta property="og:description">
方便地为默认推文提供适当的内容。
现在,应某些客户的请求,我利用window.open()
在特殊大小的辅助(弹出)窗口中启动新形成的URL。 在大多数桌面浏览器上,此窗口在屏幕上水平和垂直居中。 有趣的是,如果用户登录到其社交媒体帐户,则Facebook和LinkedIn会将此辅助窗口的大小调整为必要的尺寸。 Twitter没有,所以我使用默认的宽度和高度为其提供足够的空间。 就响应能力而言,平板电脑和移动设备将辅助窗口解释为新标签。 可以在CodePen上找到此功能的演示 。
请参阅CodePen上的Adam Coti( @adamcoti )的“笔式社交媒体共享:自动链接创建 器” 。
但是使用弹出式窗口虽然曾经很常见,但由于可访问性的原因,现在却不受欢迎。 一个简单的解决方案是在上述JavaScript中将变量params
设置为空字符串。 这样做会在新窗口或选项卡中启动URL,具体取决于用户的浏览器设置。
结论
俗话说得好,有很多方法可以给猫皮。 上面的技术只是我的首选方法。 您可能有更好,更优化的方法。 也许使用HTML中的数据属性(例如,指定主题标签),这些属性可以被JavaScript读取,并在需要时附加为查询参数。 希望这至少可以作为您自己的实现的入门。
翻译自: https://css-tricks.com/simple-social-sharing-links/
提供社交媒体共享链接的最简单(也是性能最高)的方法相关推荐
- wordpress添加媒体_如何在WordPress中添加社交媒体共享计数小部件
wordpress添加媒体 Earlier on this blog, we created a Social Media Cheat Sheet for WordPress, but that on ...
- 美国要求签证申请人提供社交媒体账号
导读 北京时间6月2日上午消息,上个月,特朗普政府正式提出对签证申请者进行更严格的审查,要求了解更多社交媒体信息.今天,美国务院正式颁布了加长版调查问卷,强制申请人披露他们过去五年在社交媒体上的活动, ...
- 美国要求签证申请人提供社交媒体账号 不给难入境
北京时间6月2日上午消息,上个月,特朗普政府正式提出对签证申请者进行更严格的审查,要求了解更多社交媒体信息.今天,美国务院正式颁布了加长版调查问卷,强制申请人披露他们过去五年在社交媒体上的活动,并追溯 ...
- 一个简单简洁的社交媒体共享菜单
效果预览 效果图如上, 也可以看在线的效果 live demo. 实现过程 1. 创建菜单像的html <div id="social_nav_horizontal"> ...
- 结合推荐营销和社交媒体的最佳实践有哪些?
推荐营销不仅仅是自己发生的,就像其他营销促销一样,你的推荐计划需要推广并输入到您的各种营销渠道中,而最强大的推广渠道之一就是社交媒体.通过结合推荐营销和社交媒体可以产生不错的效果. 推荐营销和社交媒体 ...
- 20个很棒的WordPress社交媒体插件—用于社交共享
寻找一些WordPress社交媒体插件进行社交共享? 我一直在为下一个项目寻找新的东西. 有时是关于在特定主题中看起来不错,而有时则是关于功能,有时您只需要一些额外的东西即可最大化社交共享. 这是我收 ...
- 2019年最佳WordPress社交媒体插件
您必须拥有强大的社交媒体形象,才能在当今的社交媒体驱动的世界中蓬勃发展. 您业务的主要资产是吸引受众的注意力,如今他们的注意力已转移到社交媒体上. 拥有强大的社交媒体形象将有助于您的企业吸引对其品牌的 ...
- 7个步骤轻松创建你的专属社交媒体二维码!
使用手机扫描社交媒体二维码之后,你会看到一个众多社交媒体渠道的集合页面. 社交媒体二维码,一个界面链接和连接您所有的社交媒体渠道和数字资源,从微信.微博.QQ.知乎.Bilibili.抖音.快手.小红 ...
- 突破屏蔽,提升店铺销量,你需要一个社交媒体二维码
2021"京东618,18周年庆"累计下单金额超3438亿元,创下新的纪录.236个品牌销售过亿,其中中国品牌占比达73%. 从每年的618.双12 这些购物狂欢节不断攀升的巨额成 ...
- 社交媒体营销策略——如何病毒式传播:增加受众范围的9个技巧
关键词:社交媒体营销.病毒式传播.受众 社交营销人员知道创建病毒式帖子并不是他们最重要的目标.事实上,这可能会分散他们接触目标受众和照顾团队心理健康的注意力. 这并不意味着您无法从病毒式传播的帖子和活 ...
最新文章
- vs如何将工程配置,保存到属性表
- STM32 基础系列教程 36 - Lwip_dns
- Linux 下使用 Sar 简介
- 用Apache构建WEB服务器
- iOS 字典与字符串之间的互转
- 河北大学计算机在哪学,河北大学计算机科学与技术学院
- Node.js初接触(一)
- android 引入 .so,android studio引入so库方法(示例代码)
- 图片上传组件_配置Django-TinyMCE组件 实现上传图片功能
- python绘图时的分解问题的步骤-零基础学python-15.2 分解函数
- strcpy函数_错误更正(拷贝赋值函数的正确使用姿势)
- java对象 引用 原理,java对象引用和对象值得行为
- PHP中获取CHECKBOX提交的内容及checkbox全选
- Egret中的三种单例写法
- php练手的项目,learnphp.beginmaker.com
- android gui工具,搞机助手简约易用的安卓ADB GUI玩机工具箱
- Visual Assist X 10.6.1837完美破解版(带VS2010破解)
- cmd返回上一级和根目录
- 大数据与认识论一、主体与对象
- 以图搜图新体验:图片谷歌和百度识图
热门文章
- *乐高家长分享*我们从乐高中得到了什么——与所有的爸爸妈妈们分享
- Coded UI 自动化测试的用法
- java毕业设计“多面体”艺术培训机构管理mybatis+源码+调试部署+系统+数据库+lw
- Android应用项目绑定appcom_v7打包时,出现错误:XXXisnottranslatedinaf(Afrikaans),am(Amharic),ar(Arabic).....
- 老中医推荐11个治疗咳嗽小偏方
- 绘制气象地图 Python
- 正确评估貌似可行的策略及其陷阱
- 地铁WIFI成商业WIFI最佳入口,但普及或许还未到时候
- 支付宝接口:系统有点忙,一会再试试
- 三步完成EC20/EC25通信模块的4G拨号适配,适用任何版本linux