所以我一直试图整合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中创建app以使用此功能有关，因为这些都没有提到在他们的文件中。
是的，我正在尝试根据我的localhost设置正确的元属性和data-href，因为我正在laravel框架中构建我的Web应用程序。
答案 0 :(得分：2)
您必须在localhost上启动服务器或将其放在实时服务器上，否则它将无法运行。注释中提到的错误消息告诉我您尝试直接打开HTML文件。
您还可以将https添加到URL（https://connect.facebook.net..。），但我宁愿在localhost上使用服务器。此外，页面必须公开，以使OG标签工作。 Facebook需要能够从他们的服务器解析数据。
顺便说一句，您应该始终使用应用程序并添加应用程序ID - 使用生成器中的代码：https://developers.facebook.com/docs/plugins/share-button
答案 1 :(得分：1)
尝试了代码，我得到了错误
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
似乎有效
答案 2 :(得分：1)
不确定这是否有帮助，但我正在努力创建一个自定义共享链接，没有文字只是一个自定义图像和工作方式：
从顶部帖子中列出的链接中获取按钮配置器中的代码＆＃34; Facebook-Social-Button-Plugin＆＃34;
添加调整后的元数据显示在配置程序
重写css
`.fb-share-button，.fb_iframe_widget，＃facebook { 宽度：70px！重要; 身高：70px！重要; 保证金：0自动; margin-top：-46px！important; background：url（../ img / like.png）no-repeat！important; background-size：包含！important; }
.fb-share-button a { 宽度：70px; 身高：70px; }
.fb_iframe_widget span { display：inline-block; 位置：相对; vertical-align：bottom; 宽度：70px！重要; 身高：70px！重要; text-align：justify; }
.fb_iframe_widget iframe { 位置：绝对; 宽度：70px！重要; 身高：70px！重要; }
.fb_iframe_widget iframe #facebook .inlineBlock { display：inline-block; zoom：1; 背景：透明！重要; 宽度：70px！重要; 身高：70px！重要; }
._ 2tga._3e2a { 背景：透明！重要; 颜色：透明！重要; border-radius：35px！important; 宽度：70px！重要; 身高：70px！重要; }
path [Attributes Style] { 填充：透明！重要; }`
删除＆＃34;分享＆＃34;在锚点（我的布局只是一张图片）或更改它
可选：如果您想显示引用的文字，只需将其添加到链接的末尾，就像这样（您也可以更改链接的标题和说明）
- 可选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，但它没有用。
我希望这有助于某人！
答案 3 :(得分：0)
如果您添加数据并单击“获取代码”按钮，则会返回此标记
<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>
试试这种方式。