打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
bShare提供了自定义分享内容

分享到微博时的具体微博内容可以按照自己的想法来设置,而不是用bShare默认的设置,即标题在前,然后是摘要、@和话题,最后是链接。现在bShare提供了自定义分享内容的方法,可以登录后到站长后台管理中心,在网站的“分享设置”页面中设置。

设置后,bShare会在分享时把${TITLE}替换为页面标题,把${SUMMARY}替换为页面摘要,把${MENTION_TOPIC}替换为@和话题。但由于分享时URL是通过不同的参数传入的,所以无法设置URL的位置。例如按照上面图片里的设置,分享到微博里的内容会类似这样:


如果是分享到微博类平台的话,您还可以让用户在分享内容中@您的微博账户,或者添加指定的话题。如果您使用的是bShare Plus的话,您还能让用户在分享完成后提示关注您的微博账号。

您只需要登陆bShare后进入高级自定义页面,在社交网站关注设置部分,点击平台对应的连接按钮,连接到您的微博账号即可添加@和关注。每个账号下还有两个小选项,您可以分别选择是否让用户在分享时@,以及是否分享后提示关注

话题设置则更简单,您只需要输入您想要的话题,点击添加按钮即可。

设置完成后,用户的分享内容如下图所示,注意@及##部分的内容。

如果您使用的是bShare Plus,则用户分享完成后会显示如下页面,提示用户进行关注:


如果您很熟悉JavaScript、HTML及CSS,想要完全按照自己的设计实现分享按钮,但同时又希望利用bShare已有的分享及统计功能,我们也提供了JavaScript的客户端API来帮助您实现。

目前有以下API可供调用:

bShare.addEntry(entry);

用于设置分享的内容,包括标题、摘要、图片等。用法可以参考自定义分享内容及图片,一个页面放置多个bShare按钮

bShare.share(event, shortName[, entryNum]);

分享内容到指定的平台。

event对应的DOM事件,例如用户的点击事件对象。
shortName分享目标平台的代码,可以参考分享平台代码页面。
entryNum指定分享的内容,对应addEntry的调用,即如果是0则对应第1次addEntry的调用,如果是1则对应第2次addEntry的调用,以此类推。只有页面中有多个按钮时需要指定。
bShare.more(event[, entryNum]);

打开分享大弹窗,类似点击bShare上的“更多”按钮的效果。参数的意义和share方法中的相同。

bShare.init();

加载并初始化bShare分享服务。默认是会在页面内容加载完成后进行调用,也就是延迟加载。如果您想要提前加载bShare,也可以显式调用它;或者您是在页面加载完成后通过Ajax加载bShare的JS代码,则必须显式调用。

注意调用API的页面中必须包含bShare的JS嵌入代码,如果您不想显示bShare预定义的按钮,您可以将style参数设置为-1。

范例:

如果您非常了解HTML、CSS和JavaScript,并且想要完全按照自己的想法去设计分享图标的显示方式,没问题!我们提供给您最大的自由发挥的空间,同时您又能很方便的使用bShare的分享功能。

平台分享小图标

用以下的代码创建一个平台分享小图标:

<a title="飞信" onclick="javascript:bShare.share(event,'feixin',0);return false;">
<img src="//static.bshare.cn/frame/images/logos/s4/feixin.gif" style="height:16px; width:16px;"/>
<span style="padding-left: 3px;">飞信</span></a>

您应该会注意到您可以设置自己的图标和文字,您也可以使用CSS定义图标的式样。实际上,您唯一需要保留的就是在用户进行分享行为时调用bShare.share(event,'feixin',0)就可以了。当然,您也可以直接使用我们提供的图标和样式。

对我们所有的支持的平台,只要用我们的平台代码替换示例中的红色部分就可以了。

"更多..."按钮

要添加bShare的"更多..."按钮,您可以使用如下代码:

<a title="更多平台" onclick="javascript:bShare.more(event);return false;"/>
<img src="//static.bshare.cn/frame/images/more.gif" style="height:16px; width:16px;"/>
<span style="padding-left: 3px;">更多平台</span></a>

同样的,您也可以使用您自己的图片并控制它的式样。您只需要在用户点击时调用bShare.more(event)就可以了。

范例

下面是一个会显示飞信、新浪微博和更多按钮的示例:

<div style="font-size:13px;">
   <span style="font-weight:bold;vertical-align:middle;cursor:pointer;" onclick="javascript:bShare.more(event);return false;">分享到:</span>

   <a title="分享到腾讯朋友" onclick="javascript:bShare.share(event,'qqxiaoyou',0);return false;" style="cursor:pointer;color:#2e3192;">
   <img src="//image59.360doc.com/DownloadImg/2013/02/2317/30493747_7.gif" style="height:16px; width:16px; vertical-align:middle;"/>
   <span style="padding-left:2px; vertical-align:middle;">腾讯朋友</span></a>

   <a title="分享到新浪微博" onclick="javascript:bShare.share(event,'sinaminiblog',0);return false;" style="cursor:pointer;color:#2e3192;">
   <img src="//image59.360doc.com/DownloadImg/2013/02/2317/30493747_8.gif" style="height:16px; width:16px; vertical-align:middle;"/>
   <span style="padding-left:2px; vertical-align:middle;">新浪微博</span></a>

   <a title="更多平台" onclick="javascript:bShare.more(event);return false;" style="cursor:pointer;color:#000;"/>
   <img src="//image59.360doc.com/DownloadImg/2013/02/2317/30493747_9.gif" style="height:16px; width:16px; vertical-align:middle;"/>
   <span style="padding-left:2px; vertical-align:middle;">更多平台</span></a>
</div>
<script type="text/javascript" charset="utf-8" src="//static.bshare.cn/b/buttonLite.js#uuid=<你的UUID>&style=-1"></script>
这段代码会生成:   

最后,不要忘了在您的页面上必须要加载上bShare的嵌入JavaScript代码!

<script type="text/javascript" charset="utf-8" src="//static.bshare.cn/b/buttonLite.js#uuid=<你的UUID>&style=-1"></script>

注意如果您不需要显示bShare的默认按钮,您可以将style设置为-1并且设置您的UUID。当然,您也可以同时显示bShare的预定义式样的按钮。例如,你可以在文章头部放一个带分享计数的bShare分享按钮,同时在底部放上您自己设计的分享图标,这样会有更好的分享和传播效果哦。

现在,就去发挥您的想象力,试试看创建一个完全属于您的按钮式样吧!




默认的回流量统计是通过在链接上加参数的方式进行统计的。启用后,用户分享时会看到链接后面多了一个bsh_bid的参数,这个参数就是bShare用来进行回流统计的。使用这种方法,必须在实际分享的页面上有bShare的嵌入代码才可以。当用户点击带bsh_bid参数的页面链接后,bShare的JS嵌入代码会解析这个参数并统计回流量。

要注意的是有些网站使用了URL重写实现了伪静态页面,但由于重写规则没有注意处理类似bsh_bid这样的未知参数,当URL上多了这个参数时,页面会显示错误。这时一种方法是修改重写规则,使得其能正确处理未知的URL参数。另外一种方法使用burl短链接来统计回流量。

除了上述情况,有时实际分享的页面和按钮所在的页面可能不同,实际分享的页面没有bShare的JS嵌入代码,此时也可以使用bURL短链接。

bURL短链接主要用于用户分享时缩短链接的长度,但它同时也附带了回流量统计的功能。要注意的是如果您同时启用了bURL短链接和URL参数回流量统计,系统会优先使用URL参数的方式进行统计。也就是说如果您因为上述各种原因需要使用burl来统计回流量,您必须关闭URL参数回流量统计。

另外还有一种方法就是,如果您的网站使用了GA(Google Analytics)进行统计,bShare也可以和GA集成,通过GA统计回流量。启用后会在分享的链接后加上GA的参数(以utm开头的参数)。

同样的,你也可以在bShare后台的回流量追踪自定义页面进行设置:



本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
JavaScript函数声明和调用、有参函数和无参函数、返回值
jiathis和bshare分享工具对比
通过按钮执行对应操作完成javascript检测
Jquery EasyUi实战教程布局篇
实现字体大中小的另一种方法
5. li的浮动间距(同img的上下空隙相同) (亲测)
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服