Facebook 社交按钮插件

Question

所以我已经尝试了一段时间来集成 facebook 在 Facebook-Social-Button-Plugin

提供的这个插件

它甚至提到了 copy/paste 给定的代码，以查看它的实际效果：-

<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>

但是页面中没有显示任何内容 所以我是不是遗漏了什么或者这个插件有什么问题，比如我需要在运行网络服务器中获取它而不是在某些本地主机中，或者它与在 fb 中创建应用程序有关以使用此功能，因为none 他们的文档中提到了这一点。

是的，当我在 laravel 框架中构建我的网络应用程序时，我已经尝试根据我的本地主机放置正确的元属性和数据 href。

Answer 1

如果您添加数据并单击 "Get Code" 按钮，他们会返回此标记

<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&amp;src=sdkpreparse">Share</a></div>

试试这个方法。

Answer 2

尝试了代码，我得到了错误 VM114 sdk.js:99 Uncaught Error: invalid version specified 似乎他们的代码有错误，或者该示例不打算被复制和粘贴，但是如果您通过单击获取代码按钮生成代码，您将得到一个略有不同的代码，其中包含不同的 url你的 appID 和版本看起来像这样：

 connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7&appId=XXXXXXXXXX

这似乎有效

Answer 3

您必须在本地主机上启动服务器或将其放在实时服务器上，否则将无法运行。评论中提到的错误消息告诉我你试图直接打开 HTML 文件。

您还可以将 https 添加到 URL (https://connect.facebook.net..)，但我宁愿使用本地主机上的服务器。此外，该页面必须在 public 中可用才能使 OG 标签起作用。 Facebook 需要能够解析来自其服务器的数据。

顺便说一句，您应该始终使用 App 并添加 App ID - 使用生成器中的代码：https://developers.facebook.com/docs/plugins/share-button

Answer 4

不确定这是否有帮助，但我花了几个小时努力制作一个没有文字的自定义分享 link 只有一个自定义图像，工作方式是：

从顶部 post 中列出的 link 按钮配置器中获取代码 "Facebook-Social-Button-Plugin"
添加配置器下方显示的调整后的元数据
重写css

`.fb-share-button, .fb_iframe_widget, #facebook { 宽度：70px ！重要；高度：70px ！重要；保证金：0自动； margin-top: -46px !important; 背景：url(../img/like.png) no-repeat !important; background-size：包含！重要； }

.fb-share-button一个{ 宽度：70px；高度：70px； }

.fb_iframe_widget 跨度 { 显示：inline-block；位置：相对； vertical-align：底部；宽度：70px ！重要；高度：70px ！重要； text-align：证明； }

.fb_iframe_widget iframe { 位置：绝对；宽度：70px ！重要；高度：70px ！重要； }

.fb_iframe_widget iframe #facebook .inlineBlock { 显示：inline-block；缩放：1；背景：透明！重要；宽度：70px ！重要；高度：70px ！重要； }

._2tga._3e2a { 背景：透明！重要；颜色：透明！重要； border-radius: 35px !important; 宽度：70px ！重要；高度：70px ！重要； }

路径[属性样式] { 填充：透明！重要； }`
删除锚点中的"Share"（我的布局只是一张图片）或更改它
可选：如果你想显示引用的文本，只需像这样将其添加到 link 的末尾（你也可以更改 link 的标题和描述像这样)

https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse&quote=here+comes+the+quote

-可选2：如果你想share/open把link当成popup，在anchor

上添加window.openonclick函数

完整的 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&amp;src=sdkpreparse&quote=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&amp;src=sdkpreparse&quote=here+comes+the+quote"></a></div>

（data-size 和 data-layout 不重要，因为 css 被覆盖了）

我确定有更好的方法，但我找不到！我尝试使用 FB.ui 但它没有用。

希望对大家有所帮助！

Button looked like this

Facebook 社交按钮插件

Facebook Social Button plugin

javascript

facebook

social-networking

facebook-graph-api

facebook-javascript-sdk