Question

我正在使用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]+'&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&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的prettyPhoto css代码。我还在div中放置文本以验证它是否出现在正确的位置。

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

解决方案是什么？

Answer 1

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

另一方面，您要使用的html5代码确实需要sdk来呈现它，您会看到fb-like div只是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));

获取Facebook Like按钮（由JS生成）出现

1 个答案: