[Plugin: Facebook] Comment box compatibility issues with WPtouch

jeffreyrgomez
(@jeffreyrgomez)

11 years, 10 months ago

I currently am using WPtouch to render the mobile version of my site. The Facebook comments box works great on the desktop site, but there are scaling and alignment issues on the mobile version. Normally the comment box doesn’t show up at all and leaves a large blank space on the post. When I mess around with it, I can get it to appear, but way off to the right.

I think WPtouch is a very common mobile plugin, and I’m sure a lot of people would appreciate it if the Facebook WordPress plugin was compatible with this mobile theme. Or am I the only one? Thanks.

http://wordpress.org/extend/plugins/facebook/

Viewing 6 replies - 1 through 6 (of 6 total)

BraveNewCode Inc.
(@bravenewcode)

11 years, 10 months ago

Does the plugin you’re using render the comments box inside an iFrame? If so, know that iFrames are notoriously erratic on mobile devices. You may want to search for an alternative to the plugin you’re using. Many of our WPtouch and WPtouch Pro customers use a variety of Facebook plugins with great success.

Thread Starter jeffreyrgomez
(@jeffreyrgomez)

11 years, 10 months ago

I figured the iFrame was the problem so I used an html based one and it is working fine. I just think it would be nice if the official facebook plugin worked better on mobile devices and mobile themes.

Rafael Fischmann
(@rfischmann)

11 years, 9 months ago

Same issue here. Would love for these two plugins to work together nicely.

bwhurd
(@bwhurd)

11 years, 9 months ago

I solved this issue for my particular scenario where the iframe width was wider than the wpTouch width. I changed the iframe width from a fixed pixel width to “auto”.

Here’s the code that worked, where “auto” was 450px prior to fix:

<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FEngageTalentGroup&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:auto; height:35px;" allowTransparency="true"></iframe>

BraveNewCode Inc.
(@bravenewcode)

11 years, 9 months ago

Thank you for sharing your solution. iFrames behave inconsistently on mobile devices in general but yes, flexible dimensions are preferable to fixed ones when it comes to mobile sites.

Plugin Contributor Rishi Gharpuray
(@rgharpuray)

11 years, 9 months ago

This issue should be resolved in the latest version, and the comment box should now work with wptouch! Let me know if you’re still seeing the bug.