javascript - 如何将 Facebook "share"按钮添加到 "quick view"弹出模式？

Question

如何将 Facebook“分享”按钮添加到“快速查看”弹出模式？换句话说，如果有人想通过“快速查看”模式在我的网站上分享产品，我如何让 Facebook“分享”按钮分享该产品链接，因为该模式会在“/产品”中弹出"?

如果您看到我在说什么，然后将鼠标悬停在产品上并单击“快速查看”按钮:

http://shopmoonfall.bigcartel.com/products

目前，我有一个“喜欢”按钮，但这不是我想要的，我只想将它换成“分享”按钮，并在正确的页面模态链接上设置“分享”按钮.

这是 Facebook 的分享按钮的 Javascript SDK 的样子:

<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

这是插件的标准代码:

<div class="fb-share-button" data-href="http://developers.facebook.com/docs/plugins/"    data-type="button"></div>

编辑*

这是我用于“喜欢”按钮的当前代码:

 <li id="social_facebook">
 <div class="social_action">
    <iframe src="//www.facebook.com/plugins/like.php?href=http://shopmoonfall.bigcartel.com{{ product.url }}&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=lucida+grande&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 80px; height:20px;" allowTransparency="true"></iframe>
  </div>
</li>

Answer 1

好的，尝试将所有部分组装成这段代码，您可以用它来替换为“赞”按钮包含的代码:

<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<li id="social_facebook">
   <div class="social_action">
    <div class="fb-share-button" data-href="http://shopmoonfall.bigcartel.com{{ product.url }}" data-type="button"></div>
  </div>
</li>