Typecho网页手机QQ分享卡片通用接口代码

虽然在移动互联网冲击下，传统的网站已经很少人优化了，基本都是通过微信进行传播分享，但是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空间、微信、微信朋友圈。

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

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

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