Facebook Like button changes position when back button is pressed in chrome browser

Question

I have currently implemented a vertical social-share plugin bar similar to one shown here.

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

I have used the same code generated for the like button from Facebook. I am using the HTML5 code generated. When using the Chrome browser, the Facebook like button displaces from its position slightly when the back button is pressed. I am not sure what is causing this to happen and how to resolve it.

Used code for the Facebook like button:

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

Microvolt

Hi, how did you go about this one? – Chlorosis

Can you supply a link @Microvolt – Purchasable

@Kekito yes, that is the issue. I have tried using css to fix the position, but it still does not work. Seems like a compatibility issue with the chrome browser. – Microvolt

@Microvolt I'm curious of the problem is resolved? – Haematic

@Haematic Yes I see that they have made changes to resolve this issue. Facebook button no longer displaces its position. – Microvolt

Answer 1

When I look at your source, I see that you are using tables(that could be a potential problem). At a normal page load the span width and height are set. After you click on the back button these properties aren't set(these will be automatically calculated).In normal situations this will work, but I guess the data isn't refreshed/reloaded when you hit the back button and so the width and height will not be recalculated. You could try to set data-width="122" data-height="20".

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

or force by CSS:

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

Also read following article: Ajax, back button and DOM updates

Edit: After doing some research another possible reason why this happens is related to the cache of WebKit browsers(strange, because it works on my iPhone). The solution they provide is to disable the onunload function:

window.onunload = function(){};

See The Safari Back Button Problem

Probably fix : After some deeper investigation I found out that Chrome gives an error in the console: fb:like failed to resize in 45s.

Following code would be a temporary fix(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;
}

Again, I'm not sure about this

Haematic

this issue seems to be happening only in chrome. – Microvolt

Answer 2

Yup, this seems to be a long-documented problem (applying to other plugins like login) which Facebook weren't able to fix for the like button.

One fix suggested on the dev forums is a very reasonable one: set data-show-faces="false" but does nothing for me.

Apparently

When the bug is triggered fb js fails to assign the iframe (.fb_iframe_widget_lift) a width/height. As a result the iframe has an auto width/height of 300px/1000px.

Ideally this would be an easy bug to patch around, as we could give the iframe a min/max width/height. However, since all Like button clicks show the post comment modal, this solution is less viable. In the case of the box_count button layout part of the modal is displayed atop the button, therefore constraining the iframe size looks extra janky.

I don't know how to use PHP (and it's blocked on the site I'm editing actually) but in case it can help anyone else here's the final comment so far (posted yesterday)

Use the iframe version of the code, which you can get here: https://developers.facebook.com/docs/plugins/like-button/ You need the Javascript SDK loaded as well.

On the parent page, you need to use PHP to capture and store in a session variable the complete URL of the parent page:

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

Then, make the code to show the button(s) in the iframe like this:

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

Change "your-app-id-goes-here" to your own appID.

This works because Facebook's iframe code is now contained within your properly sized iframe, and therefore has no choice but to fit and stay where it belongs...

There are names like Nike on the dev forum and it's still getting updated so hopefully further resolution's on the way – just thought I'd provide links and the latest available info here.

Moazami

Some notes on the FB JS SDK which may or may not be use to anyone too – Moazami