Facebook 网页分享

最近公司有个需求需要把网页分享到facebook,顺带写一篇文章记录一下吧

首先,当然得申请一个facebook应用啦,在这里申请一个应用:"https://developers.facebook.com/apps/"
其中一些前置要求:
1.服务器要在境外或能翻墙,这台服务器需要能访问facebook,(如果不用facebook-sdk自动生成分享按钮的也可以不需要)
2.应用申请,网站需要是https的

现在开始写代码:
在html代码上需要加上

    <meta property="fb:app_id" content="应用appid"/>
    <meta property="og:url" content="需要分享的网页地址" />
    <meta property="og:type" content="article" /><!--article不变,还有其他方式请参考facebook文档--->
    <meta property="og:title" content="标题" />
    <meta property="og:description" content="内容" />
    <meta property="og:image" content="图片地址" />

生成facebook按钮的第一种方式:
facebook分享的文档在:"https://developers.facebook.com/docs/plugi..."
可以参考文档获取分享按钮,把js代码和按钮代码复制过来用就可以了,要求是网站服务器能访问到facebook,不然生成不了按钮样式;

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=你的分享地址,需要urlencode" class="fb-xfbml-parse-ignore">分享</a></div>

生成facebook按钮的第二种方式:
facebook按钮样式可以自己写,这样可以不需要获取facebook的js代码,有mate部分的内容就可以了
例如:

<a  target="_blank"  href="https://www.facebook.com/sharer/sharer.php?u=你要分享的网站地址" >
       分享到facebook
</a>

最后测试
在分享调试器下"https://developers.facebook.com/tools/debu..." 输入你的要分享的网址,在输入框下方没有看到有警告提示性的内容,说明可以分享成功,有警告的话,根据警告的信息再做修改.最终分享出去的是有标题有图片的内容.

就这样吧,写的不好请见谅

本作品采用《CC 协议》，转载必须注明作者和本文链接