当前位置

AMP和MIP网页的社会化分享按钮插件

James Qi 在 2018年3月7日 - 07:37 提交

  这几天在各个系列网站上添加社会化分享按钮,国内使用百度分享,国外使用AddThis。在普通的PC版本、手机版本或者自适应版本上添加都没有问题,但要在AMP(谷歌推出的Accelerated Mobile Pages)MIP(百度推出的Mobile Instant Page)版本里面添加还有所不同,今天专门看了看,记录如下。

  AMP里面有专门的amp-social-share插件,代码示范如下:

<head>
...
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
...
</head>
<body>
...
<amp-social-share type="email"></amp-social-share>
<amp-social-share type="facebook"
    data-param-app_id="254325784911610"></amp-social-share>
<amp-social-share type="gplus"></amp-social-share>
<amp-social-share type="twitter"></amp-social-share>
<amp-social-share type="whatsapp"></amp-social-share>
...
</body>

  更详细的例子情况:amp-social-share,以及验证amp-social-share rules

  同样,在MIP中也有对应的mip-share 分享组件,示范代码如下:

<body>
....
<div class="mip-share-container">
    <mip-share></mip-share>
</div>
....
<script src="https://c.mipcdn.com/static/v1/mip-share/mip-share.js"></script>
....

</body>

  这个代码很简单,是默认提供的分享按钮,也可以自己根据文档来进行细节调整或者添加默认不存在的分享按钮。