0

我正在使用 PrettyPhoto 灯箱作为图片库。当图像弹出时，其下方会出现 Twitter 和 Facebook 按钮。它内置在 PrettyPhoto 插件中，并且运行良好。

问题是，Facebook 按钮是 iframe 类型（不允许用户输入评论）。我想用 HTML5 按钮替换它（单击它时会打开一个评论框，而不仅仅是喜欢）。

我想替换它（iframe 按钮的标准 FB 代码）：

<div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href='+pp_real_links[set_position]+'&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:23px;" allowTransparency="true"></iframe></div>

...使用此（HTML5 按钮的标准 fb 代码）：

<div class="fb-like" data-href="instagram.com/the-pic" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false">test text</div>

当我进行更换时，它不会出现在灯箱中。不过，它可以在网站上的其他任何地方使用。

是的，我.facebook用.fb-like. 我还将文本放入 div 以验证它是否显示在正确的位置。

我认为问题的根源在于社交链接代码是在JS中定义的；在 PrettyPhoto 设置中，有一个名为“标记”的属性，用于存储灯箱和共享按钮的 html。所以它可能没有与 FB JS 代码连接。

解决方案是什么？

4

1 回答 1

0

您发布的代码（旧的 iframe 代码）不需要使用facebook javascript sdk，因为它只是加载 iframe。

另一方面，您要使用的 html5 代码确实需要 sdk 来呈现它，您会看到fb-likediv 只是 sdk 插入新 iframe 的容器。

从您的代码中，我不能说您是否正在加载 js sdk，如果没有，则按照文档中的说明加载/初始化它，只需确保包含该xfbml属性：

FB.init({
    appId      : 'YOUR_APP_ID', // App ID
    channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
    status     : true, // check login status
    cookie     : true, // enable cookies to allow the server to access the session
    xfbml      : true  // parse XFBML
});

如果您已经在使用 js sdk，那么它应该可以工作，除非在 sdk 完成加载和初始化后动态添加类似按钮代码。
如果是这种情况，那么只需使用FB.XFBML.parse方法：

FB.XFBML.parse();

// or you can pass the container element:
FB.XFBML.parse(document.getElementById(ELEMENT_ID));
于 2012-06-04T20:21:59.400 回答