分享--内容定制-火山引擎

文档中心

导航

最近更新时间：2023.02.23 11:36:06首次发布时间：2021.04.09 18:31:35

火山引擎提供分享链接（share_url），客户侧用户可以在客户端内容场景中，点击分享按钮，将内容分享到如：微信好友，朋友圈等应用端外场景。本文主要介绍分享功能的具体技术实现。

分享方案

基于UI合规需求，图文、短视频、小视频的分享详情页在客户域名下；
客户内嵌火山引擎的分享h5页面（share_url），在h5页面内支持点击查看原文超链接，跳转到火山引擎域名下的内容详情页，且跳转后支持返回到原来的分享页面；
分享h5页面只包括正文部分，默认展开全文（不折叠）；
客户自主实现顶部UI，导流浮层，二次分享等；

分享效果

场景	分享页-客户域名	点击“查看原文”跳转到火山引擎域名
图文详情页
短视频详情页

技术实现

分享页结构

【推荐】采用iframe嵌套火山引擎H5方式构成分享页，分享域名属于客户侧。

说明

客户域名链接格式示例：
https://客户域名?shareUrl=’ + encodeURIComponent(share_url)；
分享后打开此链接时，客户域名H5壳子中处理decodeURIComponent()，将decode后的share_url填入到iframe中；

页面html示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>客户域名的H5壳子</title>
</head>
<body>
    <iframe src="shareUrl"></iframe>
    <p>客户侧自己dom</p>
</body>
</html>

参数说明

分享所需的参数均来自于“获取个性化内容”接口返回的data结构中的字段，具体如下：

参数	描述	类型
share_url	分享页H5页面	String
title	内容标题	String
abstract	内容简介	String
cover_image_list	封面图，部分内容没有封面图，建议客户添加兜底图，避免引起展示空图片问题	List

分享详情页实现

火山引擎H5（仅正文部分）+ 客户自行实现其他版块（相关推荐、导流）
这种形式，火山引擎H5会在iframe onload的时机下，向客户H5壳子以postMessage的方式同步内容高度，这个高度供客户设置iframe高度，此时iframe不可滚动。

注意

监听时机：H5页面建议尽量早通过window.addEventListener添加"message"事件监听。不要在iframe onload时才添加监听器，以避免监听不到contentHeight的情况。
监听频次：由于H5页面内的一些元素是通过接口异步获取的，首次同步的高度可能并不准确，会多次发送消息通知内容高度，因此建议客户能持续监听页面高度变化。

示例

// 客户H5 接收信息
window.addEventListener('message', function(event){
        try{
            var data = JSON.parse(event.data || '{}') || {};
            var contentHeight = data.contentHeight;
            document.getElementById('iframeId').style.height = contentHeight + 'px'
        } catch(err){
            console.log(err)
        }
}, false); // 可以看到这里data的格式是一个json字符串：{ contentHeight: 300}

火山引擎H5（正文+[相关] + 评论+无限滚动）+ 客户浮层（如浮层导流位）：
这种形式下，需要客户将iframe样式设置为：

/* iframe可滚动，并充满整个页面*/
#iframeId{
    width: 100%;
    height: 100vh;
}
/* 导流浮层 */
#fixedUgBanner{
    position: fixed;
}

样式Demo

fe_share_demo.zip

5.01KB