If I put the HTML5 Facebook like code on a Corolla theme site the theme behaves strangely:

It opens as Smartphone layout (like it should) but after 1 second it switches to what I think is tablet layout. (making the content go of the far right side of the mobile screen, screenshots are in the attached files)
And when I scroll down it goes back to smartphone layout again.
Using HTC Sensation (Android, default browser)

HTML5 Like Box Code:
https://developers.facebook.com/docs/reference/plugins/like/

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

<code><div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

Setting data-width="450" to a lower number doesn't seem to help.

Using
http://drupal.org/project/fb_social
for integration (as a block).
I also tested without this module by copy pasting the code to a block (without the module) and it still goes wrong.

CommentFileSizeAuthor
this-is-how-its-supposed-to-be.jpg.jpg82.17 KBsilkogelman
this-is-NOT-how-its-supposed-to-be.jpg57.26 KBsilkogelman

Comments

Jeff Burnz’s picture

Jeff Burnz commented
Title: Responsive to HTML5 Facebook Like code » Responsive Facebook Social Plugins

I'll commit to taking a look at these plugins and seeing what we can do, I can't promise much because it really depends on what these plugins actually embed in the page and how much we can interact with them to style theme after they have loaded - this is not always trivial with things that use iframes like most of these social widget things.

silkogelman’s picture

silkogelman commented

Thanks Jeff.

I wasn't sure if I'd put this under the Corolla theme issues, the Adaptivetheme base theme issues, or on the Adaptivethemes.com forum, because I'm not sure if this is Corolla specific or goes for all Adaptivetheme themes.

If you like I can test with premium Adaptivetheme themes too.
I'm thinking putting Like buttons (HTML5 code) on the themes is something a lot of people would want.

Jeff Burnz’s picture

Jeff Burnz commented

I havent had time to follow this up, I hope someone could possibly chime in here with a way to have these supported - I don't use Facebook very much and have never really used any of these embedded widgets. From what I have seen they usually come in an iframe with a hard coded width and are a mare to theme, but I could be wrong - for example perhaps you need to configure or custimize that code so it will fit into a smartphone view.

silkogelman’s picture

silkogelman commented

The HTML5 version of the Like code is a div.

I did some testing:
even when I use that HTML5 like code without the module it does some weird stuff.

1 - site width on mobile wider than it's supposed to be
2 - Likes not registering correctly (Liking seems to work, is posted to the FB users' stream, but are not added to the total like number)

So I'm postponing HTML5 like button code experiments untill all issues on Facebook's side are ironed out.

Will do some experimenting XFBML, keep you updated if that works ok with responsive theming (testing mostly Corolla and other Adaptivethemes themes).

Jeff Burnz’s picture

Jeff Burnz commented

I haven't implemented the following code, but are you adjusting the width? In the wizard you can set the width (on FB site), I set this to 100px:

<div class="fb-like" data-href="http://adaptivethemes.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="lucida grande"></div>

This should to the trick right? Or are we looking for something else other than just a width setting to be respected?

silkogelman’s picture

silkogelman commented

Like I stated in my issue that doesn't seem to help.
When setting it to 100 I'm still able to scroll to the right on a mobile phone.

I'll do some more testing later today / this week.

Jeff Burnz’s picture

Jeff Burnz commented

I was able to get rid of the horizontal scroll by using some CSS:

div#fb-root {
  position: absolute !important;
  height: 0 !important;
  width: 1px !important;
  left: -100000px !important;
  overflow: hidden !important;
}

The popup message box still overflows, not sure how to get around that as its hard to get the dam thing to persist on the screen to debug it.

silkogelman’s picture

silkogelman commented
Status: Active » Closed (fixed)

That piece of CSS made the overflow worse for me (added the CSS using the CSS_injector module). Thanks for the effort though.

I ended up adding the XFBML version of the Facebook Like code.
That seems to work perfectly with Corollas responsive theming: no more horizontal scroll. (hurray!!)

I added the Like button code by creating a simple Display Suite code field and adding the code to that field with a node token.

So I guess it's solved by using the XFBML version instead of the HTML5 Like button code.

cellar door’s picture

cellar door commented

If it helps any I just went through this with the Omega theme, I found that by putting the fb-root div outside the block and into the template right after the tag took care of the extra horizontal space added to the div. No extra CSS necessary.

Now I'm just working on how to get the block itself to resize responsively based on the media queries.

grienauer’s picture

grienauer
he/him
Primary language German
Location Vienna
commented

thx! WORKED!
Cost my a lot of time...