如何将 Facebook“分享”按钮添加到“快速查看”弹出模式？

Posted 2023-02-24

【中文标题】如何将 Facebook“分享”按钮添加到“快速查看”弹出模式？

【英文标题】：How to add a Facebook "share" button to a "quick view" pop-up modal?

【发布时间】：2014-02-07 23:29:02

【问题描述】：

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

如果您看一下我在说什么，然后当您将鼠标悬停在产品上时单击“快速查看”按钮：

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>

【问题讨论】：

能否包含用于显示点赞按钮的代码？我们知道如何从他们的文档中包含 FB JS SDK - 我们不知道您的网站用于生成类似按钮的任何变量，因此我们很难向您展示如何打开类似按钮进入分享按钮。

已编辑！寻找发布“喜欢”代码。

【参考方案1】：

好的，尝试将所有部分组装成这段代码，你可以用它来替换你为like按钮包含的代码：

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

【讨论】：

我把它粘贴进去了，现在按钮没有出现。我是不是做错了什么？

它为我出现在您的页面上 - 但我认为您可能需要调整 CSS 以对齐按钮。我的机器截图 - imgur.com/jeIazm1

现在有效，实际上。刚刚又测试了！但不适用于 FF。

奇怪，它在 FireFox 中效果不佳 - 我第一次打开快速查看覆盖时，它不显示 - 如果我关闭它并再次打开它，它可以工作

你是对的。对我也这样做。我们有什么可以做的吗？哈哈。这很奇怪。