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

问题描述 投票：8回答：3

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

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

我使用了从Facebook为“赞”按钮生成的相同代码。我正在使用生成的HTML5代码。使用Chrome浏览器时，按下后退按钮时，Facebook赞按钮会从其位置稍微移开。我不确定是什么原因导致这种情况的发生以及如何解决。

用于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>
facebook html5 google-chrome facebook-like facebook-social-plugins
3个回答
4
投票

[查看源代码时，我发现您正在使用表（这可能是潜在的问题）。在正常页面加载中，将设置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

Edit：经过研究后，发生这种情况的另一个可能原因与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;
}

同样，我不确定

1
投票

是，这似乎是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的尺寸显得多余简陋。

我不知道如何使用PHP（它实际上在我正在编辑的网站上已被阻止），以防万一它可以帮助其他人，这是到目前为止的最后评论（昨天发布）

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

在父页面上，您需要使用PHP捕获并存储在会话变量父页面的完整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>

将“您的应用ID转到此处”更改为您自己的appID。

之所以有效，是因为Facebook的iframe代码现在包含在您的尺寸合适的iframe，因此别无选择，只能适应并保持它属于哪里...

[开发论坛上有像耐克这样的名字，并且它还在不断更新，所以希望有进一步的解决方案–只是我想在这里提供链接和最新的可用信息。

-1
投票

使用现金应用程序号获得立即补救以处理现金问题是否有任何与现金应用相关的问题？为什么不使用Cash App Number获得最佳解决方案以及技术补救措施？它将使您与可用的技术人员联系，他们将为您提供有关解决方案的正确指导，以正确的方式兑现相关问题。

https://www.contact-mail-support.com/phone-number/square-cash

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.