Question

我目前已经实现了一个类似于此处所示的垂直社交共享插件栏。

http://www.socialmediaexaminer.com/10-ways-to-add-facebook-functionality-to-your-website/

我使用了从Facebook为类似按钮生成的相同代码。我正在使用生成的HTML5代码。使用Chrome浏览器时，按下后退按钮时，Facebook like按钮会略微偏离其位置。我不确定是什么导致这种情况发生以及如何解决它。

用于Facebook的按钮代码：

<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&appId=504480219635937";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

Answer 1

当我查看您的来源时，我发现您正在使用表格（这可能是一个潜在的问题）。在正常页面加载时，设置span宽度和高度。单击后退按钮后，这些属性不会被设置（这些属性将自动计算）。在正常情况下，这将起作用，但我想当您点击后退按钮时数据不会被刷新/重新加载所以宽度和高度不会重新计算。您可以尝试设置data-width="122" data-height="20"。

例如。 <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-width="81" data-height="20" data-show-faces="true" data-share="true"></div>

或强制CSS：

.fb-like iframe {
  width: 81px !important;
  height: 20px !important;
}

另请阅读以下文章：Ajax, back button and DOM updates

编辑在做了一些研究后，另一个可能的原因与WebKit浏览器的缓存有关（很奇怪，因为它适用于我的iPhone）。他们提供的解决方案是禁用onunload功能：

window.onunload = function(){};

请参阅The Safari Back Button Problem

可能已修复：经过深入调查后，我发现Chrome在控制台中出错：fb:like failed to resize in 45s。

以下代码将是临时修复（fb:login_button failed to resize in 45s）：

#fb_login_button { 
    width: 80px; 
}
#fb_login_button span, 
#fb_login_button iframe {.
    width: 80px !important;
    height: 25px !important;
}

再次，我不确定这个

Answer 2

是的，这似乎是long-documented problem (applying to other plugins like login)，Facebook fix无法like button。

在开发论坛上提出的一个修复是非常合理的：设置data-show-faces="false"但对我没有任何作用。

显然

当错误被触发时，fb js无法为iframe（.fb_iframe_widget_lift）分配宽度/高度。因此，iframe的自动宽度/高度为300px / 1000px。

理想情况下，这可能是一个容易出错的错误，正如我们所能给出的那样   iframe最小/最大宽度/高度。但是，因为所有喜欢按钮   点击显示帖子评论模式，此解决方案不太可行。在   显示模式的box_count按钮布局部分的情况   在按钮顶部，因此限制iframe大小看起来额外   janky。

我不知道如何使用PHP（并且它在我实际编辑的网站上被屏蔽了）但是如果它可以帮助其他任何人在这里做出最终评论那么远（昨天发布）

使用代码的iframe版本，您可以在此处获取：   https://developers.facebook.com/docs/plugins/like-button/你需要   加载了Javascript SDK。

在父页面上，您需要使用PHP来捕获和存储   session变量父页面的完整URL：

<?php $fburl = (@$_SERVER["HTTPS"] == "on") ? "https://" : "http://"; if ($_SERVER["SERVER_PORT"] != "80") {
    $fburl .= $_SERVER["SERVER_NAME"] . ":" . $_SERVER["SERVER_PORT"] . $_SERVER["REQUEST_URI"]; } else {
    $fburl .= $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]; } session_start(); $_SESSION['savedurl'] = $fburl; ?>

然后，让代码在iframe中显示按钮，如下所示：

<iframe src="//www.facebook.com/plugins/like.php?href=<?php session_start(); echo $_SESSION['savedurl']; ?>&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=20&amp;appId=your-app-id-goes-here" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:20px; width:330px;" allowTransparency="true"></iframe>

更改＆＃34;你的app-id-goes-here＆＃34;到你自己的appID。

这是有效的，因为Facebook的iframe代码现在包含在您的内容中   适当大小的iframe，因此别无选择，只能适应和留下   它属于哪里......

在开发论坛上有像耐克这样的名字，它仍在不断更新，所以希望在路上能有进一步的解决方案 - 只是想我在这里提供链接和最新的信息。 / p>

在Chrome浏览器中按下后退按钮时，Facebook赞按钮会改变位置

2 个答案: