Javascript Facebook社交按钮插件
所以我已经尝试了一段时间来集成facebook在 在那里，它甚至提到了复制/粘贴给定代码，以查看其实际操作：-Javascript Facebook社交按钮插件,javascript,facebook,facebook-graph-api,facebook-javascript-sdk,social-networking,Javascript,Facebook,Facebook Graph Api,Facebook Javascript Sdk,Social Networking,所以我已经尝试了一段时间来集成facebook在 在那里，它甚至提到了复制/粘贴给定代码，以查看其实际操作：- <html> <head> <title>Your Website Title</title> <!-- You can use Open Graph tags to customize link previews. Learn more: https://developers.facebook.com/docs/sharing/w
<html>
<head>
<title>Your Website Title</title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your share button code -->
<div class="fb-share-button"
data-href="http://www.your-domain.com/your-page.html"
data-layout="button_count">
</div>
</body>
</html>
你的网站标题
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js#xfbml=1”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
但页面中没有显示任何内容 那么，我是否遗漏了一些东西，或者这个插件是否有任何问题，比如我需要在运行的web服务器中获得它，而不是在某个本地主机中，或者它必须在fb中创建应用程序才能使用此功能，因为他们的文档中没有提到这些
是的，当我在laravel框架中构建web应用程序时，我尝试根据我的本地主机放置正确的元属性和数据href。如果您添加数据并单击“获取代码”按钮，他们会返回此标记
<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 class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse">Share</a></div>
尝试这种方法。如果您添加数据并单击“获取代码”按钮，他们会返回此标记
<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 class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse">Share</a></div>
这样试试。尝试了代码，我得到了错误
VM114 sdk.js:99未捕获错误：指定的版本无效 connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7&appId=XXXXXXXXXX
这似乎有效尝试了代码，我得到了错误
VM114 sdk.js:99未捕获错误：指定的版本无效 connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7&appId=XXXXXXXXXX
这似乎是可行的您必须在本地主机上启动服务器或将其置于实时服务器上，否则它将无法工作。注释中提到的错误消息告诉我您试图直接打开HTML文件 您还可以将https添加到URL（.），但我更愿意使用localhost上的服务器。此外，该页面必须公开，以使OG标记正常工作。Facebook需要能够解析来自其服务器的数据
顺便说一句，您应该始终使用应用程序并添加应用程序ID-使用生成器中的代码：您必须在本地主机上启动服务器或将其放置在实时服务器上，否则它将无法工作。注释中提到的错误消息告诉我您试图直接打开HTML文件 您还可以将https添加到URL（.），但我更愿意使用localhost上的服务器。此外，该页面必须公开，以使OG标记正常工作。Facebook需要能够解析来自其服务器的数据
顺便说一句，您应该始终使用应用程序并添加应用程序ID-使用生成器中的代码：不确定这是否有帮助，但我花了数小时努力创建一个自定义共享链接，没有文本，只是一个自定义图像，其工作方式是：
- 从“Facebook社交按钮插件”顶部的帖子中列出的链接中获取按钮配置器的代码
- 添加调整后的元数据，如配置器下方所示
- 重写css `.fb共享按钮、.fb_iframe_小部件、#facebook{ 宽度：70px！重要； 高度：70px！重要； 保证金：0自动； 利润率顶部：-46px！重要； 背景：url（../img/like.png）不重复！重要； 背景尺寸：包含！重要； } .fb共享按钮a{ 宽度：70px； 高度：70像素； } .fb_iframe_小部件范围{ 显示：内联块； 位置：相对位置； 垂直对齐：底部对齐； 宽度：70px！重要； 高度：70px！重要； 文本对齐：对齐； } .fb_iframe_小部件iframe{ 位置：绝对位置； 宽度：70px！重要； 高度：70px！重要； } .fb_iframe_widget iframe#facebook.inlineBlock{ 显示：内联块； 缩放：1； 背景：透明！重要； 宽度：70px！重要； 高度：70px！重要； } ._2tga._3e2a{ 背景：透明！重要； 颜色：透明！重要； 边界半径：35px！重要； 宽度：70px！重要； 高度：70px！重要； } 路径[属性样式]{ 填充：透明！重要； }`
- 删除锚点中的“共享”（我的布局只是一张图片）或更改它
- 可选：如果您想显示引用的文本，只需像这样将其添加到链接的末尾（您也可以像这样更改链接的标题和说明）
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"e=here+comes+the+quote','popup','width=600,height=500'); return false;" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"e=here+comes+the+quote"></a></div>
我不确定这是否有帮助，但我花了几个小时努力制作一个自定义共享链接，没有文本，只有一个自定义图像，其工作方式是：
- 从“Facebook社交按钮插件”顶部的帖子中列出的链接中获取按钮配置器的代码
- 添加调整后的元数据，如配置器下方所示
- 重写css `.fb共享按钮、.fb_iframe_小部件、#facebook{ 宽度：70px！重要； 高度：70px！重要； 保证金：0自动； 利润率顶部：-46px！重要； 背景：url（../img/like.png）不重复！重要； 背景尺寸：包含！重要； }