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 协议》,转载必须注明作者和本文链接
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 1

你好,我使用了addthis分享按钮,Facebook分享时无标题和图片,后来添加了property="og:title"这个元标签,但是还是没有任何效果。请问可能是什么原因呢?

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!