网页上facebook分享功能的具体实现

1，一个链接：参数是要分享的页面的链接

代码如下:

<a style="width:35px; height:40px; position:relative; top:10px; left:48px; " title="Share on Facebook" target="_blank"

οnclick="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent('https://www.baidu.com')+'&t='+encodeURIComponent(document.title), 'newWindow', 'width=800, height=400','center');void(0);">

2.fb识别的标签：

代码如下:

<title>test</</span>title>
<meta property="og:image" content="test/test.jpg" />
<meta property="og:description" content="test>" />
<meta property="og:url" content="https://www.baidu.com" />

注意：
1.title fb可以自动读取要分享页面的title 这个要设置在fb的sharer.php参数里
你也可以自己设置方式就是

2.image标签可以写多个分享人可以自己选择图片
3.url就是你的要分享的页面
4.description 介绍信息

提示：
图片像素必须是100*100 这样的格式我用90*90 就是OK的
例如：300*100 150*50在www.facebook.com图片会截取90x90图片显示就不正确了
如果图片小了更不行了，分享的那个弹出框就不会显示你的图片这个情况发生在图片小于90x90的情况吧

facebook分享理解：要分享的页面传递url过去，facebook通过这个url自动的去抓取符合要求的图片和标题和description。url后面可以带titile参数，带image和description 参数无效。

注意 ---》实际工作中遇到一个问题，使用

<title>test</</span>title>
<meta property="og:image" content="test/test.jpg" />
<meta property="og:description" content="test>" />
<meta property="og:url" content="https://www.baidu.com" />

这种方式去分享到facebook中，分享发给facebook过去的链接是上面meta的这个页面地址（因为要抓取的内容都在meta标签中写了）；而分享成功之后点击分享的内容，并没有跳转到https://www.baidu.com；

这个问题我用的解决方法是

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

就是页面跳转，看着有点别扭

应该换成google facebook 给出的官方分享代码

https://developers.facebook.com/docs/javascript/examples

网页上facebook分享功能的具体实现相关推荐

微信公众平台开发之在网页上添加分享到朋友圈，关注微信号等按钮
微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享 ...
Android微信h5分享,H5网页实现微信分享功能
H5网页实现微信分享功能一,首先在公众号管理后台"公众号设置"的"功能设置"里填写JS接口安全域名,域名需要通过ICP备案,没有备案域名可以用SAE.BAE等 ...
使用FastReport.net 报表在网页上实现打印功能
这些年的工作当中,最早是在8年前接触到FastReport这个报表工具,从名字上来看,直译过来就是快速报表,正所谓天下武功,唯快不破,FastReport报表早些年确实是制作报表的不二之选,8年前的工 ...
Android 集成Facebook分享功能
1,配置build.gradle 项目级别的gradle: repositories {mavenCentral() } app级别的gradle: dependencies { implementa ...
优酷复制的html代码怎么用,关于网页上增加视频功能的代码
在开发网站上时候,不知道怎么在自己的网站上增加视频播放功能.后来找了许多资料,不管怎么说,还是在自己的网站上挂上了视频页面及播放窗口,尽管很小白,记录下来,以成长精进之用. 1直接利用优酷代码先复制 ...
新版H5微信网页JS-SDK自定义分享功能实现
1.先用微信官方文档demo,下载下来去改就行, 概述 | 微信开放文档 2.(后端)填写上认证后的,公众号appid,appsecret. 3.(前端代码) 配置好需要的接口(调试打开debug ...
vue 分享给好友点击分享按钮_点击网页分享按钮，触发微信分享功能
微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享 ...
点击网页分享按钮，触发微信分享功能
微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享 ...
在网页上添加微信分享按钮，关注微信号等按钮
转自:http://www.cnblogs.com/GmrBrian/p/3593071.html 微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹 ...

网页上facebook分享功能的具体实现

网页上facebook分享功能的具体实现相关推荐

最新文章

热门文章