FaceBook Share 功能 JS SDK 自定义图片和文字的方法

是这样的:

不管你是使用普通的网页连接分享,还是使用JavaScript SDK。 下面的方法都有效。

1. 直接在<head>标签中设置以下meta

  <meta property="fb:app_id"        content="150192****06562" />
  <meta property="og:url"           content="http://isluo.com/" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="标题,会出现在分享的标题部分" />
  <meta property="og:description"   content="简介,会出现在分享的简介部分" />
  <meta property="og:image"         content="http://isluo.com/mywork/logo.jpg" />

* fb: app_id      这个网站在facebook App中注册后得到的ID号,不写也没关系
* og: url         需要被分享的网页连接
* og: type        网页就写 website
* og: title       标题,生成的facebook分享对话框中的标题
* og: description 简介,生成的facebook分享对话框中的简介,不要太多
* og: image       图片,分享对话框中左侧的图片,最好是正方形,大小至少在90*90以上

2. 进入facebook调试工具

facebook share 调试器:
https://developers.facebook.com/tools/debug/sharing/

这个用来抓取你网页的最新信息

  • 默认的,你的网站信息会存储在facebook缓存30天
  • 所以如果你的网站有更改,你需要手动重新抓取
  • 你也可以直接在浏览器地址栏中输入这个网址测试:
    https://www.facebook.com/sharer.php?u=isluo.com(这里改成你自己的网站域名)

下面是示例:

这里写图片描述


3. 应该就可以了

不管你是普通的直接分享一个网址
还是用JS SDK的API接口弹出分享对话框分享,

注: facebook都会优先取你<head>中配置的那些<meta>标签

如果你发现没有什么变化,就等一段时间,去第2步中提到的调试工具重新抓取一下你的网站

4. 分享按钮代码生成工具

你可以在这个网址的“分享按钮配置器”自动生成Share分享按钮的代码:
https://developers.facebook.com/docs/plugins/share-button

5. 普通的分享

实际上,就算你没有配置任何facebook相关的<meta>,没有调用任何API。
直接分享时,facebook会自动抓取<title>作为标题,抓取<meta name='description'>作为简介,抓取网页中符合要求的图片(90*90以上,非异步加载的图,貌似是1~5张)作为左侧的图片展示

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页