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>

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