krpano添加分享至微博按钮

全景漫游项目在手机端和PC端有很多不同之处,其中一点就是手机端的展示平台通常自备浏览功能,例如微信右上角的三个小圆点,还有众多手机浏览器的强大分享功能。相比起手机端的分享功能,PC端的浏览器相对就差很多了。要快速将全景地址分享到微博,想通过浏览器自带的功能,并不是那么一件容易的事情。因此我们需要自己添加分享到微博的按钮。

事实上,关于分享到微博的按钮,微博本身提供了一个按钮:

http://open.weibo.com/sharebutton

 

不过这个按钮是写在HTML里,而且其固定的样式未必符合我们全景ui的要求。因此有必要在全景漫游内部自定义一个按钮。因此我们首先要有一个按钮。

<layer name=”sharebutton” align=”left” style=”skin_glow” url=”share.png” crop=”0|0|200|200″ x=”0″ width=”100″ height=”100″ onclick=”weibo();” />

 

按钮的其他属性根据设计需求安排,我这里只是直接复制某段代码,主要是看onclick的部分,是执行一个action。

devices=”desktop”

 

考虑到这样的按钮只需要在pc端上出现,因为在某个layer中设置一个devices属性是必要的。
接下来我们再来看看action。我们在skin_settings增加了几个属性,分别是selfurl和selflogourl,当然属性的名字并不重要,主要是这个属性中,我们记录了必须的网址和微博分享中缩略图地址。

<skin_settings
selfurl=”http://flvkh.soufun.com/e-book/360/zhltfrf/tour.html”
selflogourl=”http://flvkh.soufun.com/e-book/360/zhltfrf/360logo.jpg”

 

<action name=”weibo”>
txtadd(weibo_share,
‘http://service.weibo.com/share/share.php?url=’,get(skin_settings.selfurl),’&amp;type=button&amp;language=zh_cn&amp;title=’,get(title),’全景展示’,‘&amp;source=’,get(skin_settings.selfurl),’&amp;pic=’,get(skin_settings.selflogourl), );

openurl(get(weibo_share), _blank);
</action>

你只需要修改skin_settings的两个属性就可以了。如果要修改分享的文字,可以修改上述代码中红色的部分。点击按钮就会弹出分享地址。

 

注意,openurl在本地使用时会受到浏览器安全限制而失效。

QQ图片20150525143630

在 “krpano添加分享至微博按钮” 上有 1 条评论

发表评论