虽然在移动互联网冲击下,传统的网站已经很少人优化了,基本都是通过微信进行传播分享,但是QQ的分享也有一定需求,网页在分享出去希望出现分享的标题、摘要及图片。

本文主要针对PC端QQ和手机QQ的分享代码进行记录和分享。


参数说明

itemprop="name"

网页标题,不同社交APP截取的长度都不一样,然后手机屏幕大小也会再次不同程度裁减文字。微信只用这个标题。


itemprop="description"

网页简介/摘要,和网页标题一样有长度限制,如果小屏幕可能还会裁减。微信不会使用到这个标签。


itemprop="image"

网页缩略图/分享图标,显示在分享内容的左边,图片支持.jpg、.png等常见格式,建议使用200px*200px的图片,如果太大可能读取比较慢。


H5手Q分享通用接口演示

<meta itemprop="name" content="标题名称">
<meta itemprop="description" content="内容简介">
<meta itemprop="image" content="缩略图">

typecho的代码使用,一般用于文章页所以会做个判断是否是内容页

<?php if ($this->is('post')): ?>
<!--  #H5手Q分享通用接口开始-->
<meta itemprop="name" content="<?php $this->title() ?> - <?php $this->options->title() ?>">
<meta itemprop="description" content="<?php $this->description(); ?>">
<meta itemprop="image" content="<?php $this->fields->bimg(); ?>">
<!--  #H5手Q分享通用接口结束-->
<?php else: ?>

其中第一句是判断是否是内容页,只有内容页才会显示。

image我使用的是缩略图是自定义的,通过模板页functions.php增加的功能,如果是用的其他缩略图插件需要修改代码,这里顺便写下这个缩略图的代码

//后台编辑器添加功能
function themeFields($layout) {
$bimg = new Typecho_Widget_Helper_Form_Element_Text('bimg', NULL, NULL, _t('大封面缩略图'), _t('在这里填入一个图片 URL 地址, 以添加显示本文的大封面缩略图,留空则显示默认小缩略图'));
    $bimg->input->setAttribute('class', 'w-100');
    $layout->addItem($bimg);
}

尾语

这个代码只分享在QQ和手机上的应用,经过测试支持PC QQ直接发送链接展现分享卡片和手机QQ分享到手机QQ、QQ空间、微信、微信朋友圈。

卡片上的标题、摘要、图片是会被缓存的,所以当你发送过一次,即使做了修改也会是第一次发送时的内容。

有时会应网络、不可以知原因获取不到信息,但是出现几率极小。

这个代码纯粹做个记录,本网站很早以前就用到了,希望以后其他方面能用得到。