Facebook 社交按钮插件
Posted
技术标签:
【中文标题】Facebook 社交按钮插件【英文标题】：Facebook Social Button plugin 【发布时间】：2016-09-08 15:03:53 【问题描述】：所以我已经尝试了一段时间来集成facebook在Facebook-Social-Button-Plugin提供的这个插件
它甚至提到复制/粘贴给定的代码，以查看它的实际效果：-
<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>
但页面中没有显示任何内容 所以我是否遗漏了什么或者这个插件有什么问题，比如我需要在一个正在运行的 Web 服务器中而不是在某个 localhost 中获取它，或者它与在 fb 中创建应用程序以使用此功能有关，因为没有提到这些在他们的文档中。
是的，当我在 laravel 框架中构建我的网络应用程序时，我已经尝试根据我的本地主机放置正确的元属性和 data-href。
【问题讨论】：
浏览器控制台中是否有任何错误/警告/信息？ localhost 很好，只要您不只是在没有服务器的情况下在浏览器中打开 html 文件。但你绝对应该为它创建一个应用程序，并在 js sdk 代码中包含应用程序 ID。 啊，是的，我从没想过检查控制台，因为我信任 FB API，但这是问题所在，GET file://connect.facebook.net/en_US/sdk.js net::ERR_FILE_NOT_FOUND 虽然我想知道为什么，因为我复制粘贴了他们的代码而没有添加任何内容测试。
该代码用于您在浏览器中通过http:// 或https:// 调用的网站。以// 开头的 URL 是协议相关的，这意味着它使用与请求页面本身相同的协议完成。如果您通过本地文件系统测试您的页面，而不是通过（本地）网络服务器“正确”测试，那当然行不通。
是的，实际上我也在实时服务器中使用了它，但是出现了这个问题VM114 sdk.js:99 Uncaught Error: invalid version specified，解决方案是为 fb jdk 获取一个不同的 url，其中提到了应用程序和应用程序 ID，这是无处可去的在他们的文档中提到。
【参考方案1】：
您必须在 localhost 上启动服务器或将其放在实时服务器上，否则将无法正常工作。 cmets中提到的错误信息告诉我你试图直接打开HTML文件。
您也可以将 https 添加到 URL (https://connect.facebook.net...)，但我宁愿使用 localhost 上的服务器。此外，该页面必须公开可用才能使 OG 标签正常工作。 Facebook 需要能够解析来自其服务器的数据。
顺便说一句，您应该始终使用应用程序并添加应用程序 ID - 使用生成器中的代码：https://developers.facebook.com/docs/plugins/share-button
【讨论】：
嗯...我不确定您在做什么，但请在真实服务器上尝试一下。阅读我的编辑，无论如何您都需要一个真实的才能使 og 标签起作用。 您的服务器肯定有问题。它应该只添加协议，而不是“localhost”：//connect.facebook.net/en_US/sdk.js 将自动变为connect.facebook.net/en_US/sdk.js 我想知道怎么了，因为我又试了一次，这次我收到了这个错误sdk.js:99 Uncaught Error: invalid version specified。
哦，好吧，它工作了，问题是它需要接收一个 APP ID 和 APP NAME，我从获取代码和复制粘贴在这个例子中，但这是糟糕的文档，他们从未提及任何关于它的内容!
好吧，app id 不是必需的，但拥有它是个好主意。不过，您绝对应该添加 api 版本。始终使用生成器中的代码。【参考方案2】：
尝试了代码，我得到了错误
VM114 sdk.js:99 Uncaught Error: invalid version specified
他们的代码似乎有错误，或者该示例不是要复制和粘贴的，但是如果您通过单击获取代码按钮生成代码，您将获得一个稍微不同的代码，其中包含与您的 appID 和版本不同的 URL看起来像这样：
connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7&appId=XXXXXXXXXX
这似乎有效
【讨论】：
是的，我必须使用 APP 和 APP ID 才能连接到 facebook，但文档中没有任何相关内容。【参考方案3】：不确定这是否有帮助，但我努力了几个小时来制作一个没有文字的自定义共享链接，只是一个自定义图像，其工作方式是：
从“Facebook-Social-Button-Plugin”顶部帖子中列出的链接中的按钮配置器中获取代码
添加调整后的元数据显示在配置器下方
重写css
`.fb-share-button, .fb_iframe_widget, #facebook 宽度：70px！重要； 高度：70px！重要； 边距：0 自动； 边距顶部：-46px！重要； 背景： url(../img/like.png) 不重复！重要； 背景大小：包含！重要；
.fb-share-button a 宽度：70px； 高度：70px；
.fb_iframe_widget span 显示：内联块； 位置：相对； 垂直对齐：底部； 宽度：70px！重要； 高度：70px！重要； 文本对齐：对齐；
.fb_iframe_widget iframe 位置：绝对； 宽度：70px！重要； 高度：70px！重要；
.fb_iframe_widget iframe #facebook .inlineBlock 显示：内联块； 缩放：1； 背景：透明！重要； 宽度：70px！重要； 高度：70px！重要；
._2tga._3e2a 背景：透明！重要； 颜色：透明！重要； 边框半径：35px！重要； 宽度：70px！重要； 高度：70px！重要；
路径[属性样式] 填充：透明！重要； `
删除锚点中的“分享”（我的布局只是一张图片）或更改它
可选：如果你想显示引用的文字，只需像这样将它添加到链接的末尾（你也可以像这样更改链接的标题和描述）
https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"e=here+comes+the+quote
-可选2：如果你想分享/打开链接作为弹出，添加window.open onclick功能到锚
带有弹出框和引号的完整 div 示例：
<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>
（数据大小和数据布局并不重要，因为 css 被覆盖）
我确信有更好的方法可以做到这一点，但我找不到任何方法！我尝试使用 FB.ui，但没有成功。
我希望这对某人有帮助！
Button looked like this
【讨论】：
【参考方案4】：如果您添加数据并单击“获取代码”按钮，他们会返回此标记
<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>
试试这个方法。
【讨论】：
我已经尝试过这段代码，是的，它可以工作，但我想实现元标记以自定义我的共享模板。以上是关于Facebook 社交按钮插件的主要内容，如果未能解决你的问题，请参考以下文章