前端js分享会话到facebook

最新推荐文章于 2024-05-28 00:34:47 发布

qq_45272329

最新推荐文章于 2024-05-28 00:34:47 发布

阅读量2.4k

点赞数

分类专栏： js 前端文章标签： javascript facebook jquery

本文链接：https://blog.csdn.net/qq_45272329/article/details/108255186

版权

前端同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

在做项目的时候，前端开发难免会在业务运营需要推广的情况下，需要把自己的网站分享到Facebook、Twitter和Email等平台中，以提高自己网站的曝光了，实现外部引流。
首先，我们先看一下分享到Facebook平台怎么操作。其实电商的都是有办法连接到外网的，这点不必多说，下面我们具体来看看实现方案。

首先我们需要引入facebook集成的sdk包，然后放到项目中，如下图所示：

<script type="text/javascript">
(function(d, s, id){
   	var js, fjs = d.getElementsByTagName(s)[0];
   	if (d.getElementById(id)) {return;}
   	js = d.createElement(s); js.id = id;
   	js.src = "https://connect.facebook.net/en_US/sdk.js";
   	fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

分享到facebook应用需要在我们网站主页头部中设置facebook能够识别的元信息，当我们调取facebook的sdk的时候，facebook首先会抓取我们网站的元信息，然后组成分享到Facebook应用中的内容。这个内容在第一次抓取的时候，fackbook的会把此次抓取信息缓存起来，然后下次分享会直接取facebook的缓存信息，不会在读取设置的元信息，这也会导致更该元信息之后，分享内容不能及时更新的问题,需要手动去抓取一次更新分享元信息,元信息如下图所示：

<head>
<meta charset="utf-8" />
<meta property="og:type" content="website" />
<meta property="og:url" content="your website url" />
<meta property="og:title" content="your share title" />
<meta property="og:description" content="your shared description" />
<meta property="og:image" content="your share image url" />
</head>

配置之后将代码放到服务器上去，能确保facebook能够抓取到网页元信息就行(静态文件)，结果如下图所示：
在这里插入图片描述

在代码中添加分享时的事件，部分配置如下图所示：

<script>
window.fbAsyncInit = function () {
       FB.init({
           appId  : '4424166431914XXXX', //你的应用id,需要facebook开发者账号创建
           status : true,
           xfbml  : true,
           version: 'v7.0'  //sdk版本
       });
       window.facebookShare = function( callback ) { // 点击分享按钮时触发的函数事件
           var options = ({
               method : 'share', // 方式:分享,还有分享动态,发送指令两种类型
               href   : window.location.origin // 分享地址
           }),status = '';
           FB.ui(options, function( response ){
               if (response && !response.error_code) {
                   status = 'success';
                   jQuery.event.trigger('fb-share.success'); // 分享成功回调函数
               } else {
                   status = 'error';
                   jQuery.event.trigger('fb-share.error');  // 分享失败回调函数
               }
               if(callback && typeof callback === "function") {
                   callback.call(this, status);
               } else {
                   return response;
               }
           });
       }
   };
</script>

这里面的appid是facebook开发者账号在开发者后台创建的应用id，需要配置对于的网站地址才能分享。
5. 还有一种分享方式是不需要回调的，直接使用a链接带上分享参数、地址等信息。如下图：

<a href="https://www.facebook.com/sharer.php?t=your shared title&u=your shared url"></a>

总结了facebook分享的一些经历，其中有些小散细节可能存在漏写，大家有什么不清楚的可以畅所欲言。
(附更新元信息：抓取地址)
(附配置元信息属性说明：地址)

qq_45272329

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端js分享会话到facebook

在做项目的时候，前端开发难免会在业务运营需要推广的情况下，需要把自己的网站分享到Facebook、Twitter和Email等平台中，以提高自己网站的曝光了，实现外部引流。首先,我们先看一下分享到Facebook平台怎么操作.其实能做跨境电商的都是有办法连接到外网的,这点不必多说,下面我们具体来看看实现方案。首先我们需要引入facebook集成的sdk包,然后放到项目中,如下图所示:<script type="text/javascript">(function(d, s, id){
复制链接

扫一扫

专栏目录