newWebView behavior with facebook plugin

Other
#1

I’m trying to place a facebook pages plugin into a newWebView.  My app has content scaling in the config file.  With iOS, I can hand the scaled content size to the iframe and things work as expected (correctly sized facebook page inside webView).  In Android, it doesn’t seem to matter what I pass in (scaled size or pixel size), I always get a facebook page that is between 1/3 and 1/2 the size of the container (webView). Because of proper behavior on iOS, this seems to be either user error or a tool issue.

========= lua function =====================

local function showFacebookFeed( event )
 if system.getInfo(“platformName”) == “Android” then
  containerHeight = dim.screenHeight - bannerHeight - adsHeight
  containerWidth = dim.screenWidth
  containerCenterX = dim.centerX
  containerCenterY = bannerHeight + math.floor( containerHeight/2 )
  borderX = 75
  borderY = 55
  diffY = bannerHeight + footerHeight + adsHeight + borderY
  diffY = tonumber(diffY) / display.contentScaleY
  diffX = borderX / display.contentScaleX
  actualHeight = math.floor( display.pixelHeight/2 )
  actualWidth = math.floor( display.pixelWidth - diffX )
 else
  containerHeight = dim.screenHeight - bannerHeight - adsHeight
  containerWidth = dim.screenWidth
  containerCenterX = dim.centerX
  containerCenterY = bannerHeight + math.floor( containerHeight/2 )
  borderX = 75
  borderY = 55
  actualHeight = dim.screenHeight - bannerHeight - footerHeight - borderY - adsHeight
  actualWidth = dim.screenWidth-borderX
 end
 createFbPage(facebookPage,facebookAppId, actualWidth, actualHeight)
 webView = native.newWebView(dim.centerX, dim.centerY, containerWidth, containerHeight)
 webView:request( tmpHtmlPage, system.DocumentsDirectory )
 webView:addEventListener( “urlRequest”, webListener )
end

=========== HTML generated by createFbPage ================

<html>
<head>
</head>
<body>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%FACEBOOKPAGE&tabs=timeline&width=245&height=315&small_header=true&adapt_container_width=false&hide_cover=false&show_facepile=true&appId=FACEBOOKAPPID"
width=“245” height=“315”
style=“border:none;overflow:hidden” scrolling=“no” frameborder=“0” allowTransparency=“true”></iframe>
</body>
</html>

#2

A few more experiments reveal that the combination of content scaling (config.lua), newWebView, and facebook iframe work as expected in the iOS simulator.  There the fb web page is configured to be the size of display.contentWidth and display.contentHeight.  Within the iOS emulator and an android device this doesn’t work (and neither does display.pixelWidth and display.pixelHeight.  It seems that the webpage is getting scaled somewhere such that it displays as <= 1/2 the width of the webView.

#3

Rob Miracle, any ideas? 

Another observation, if I scale the webView width size by a factor of 3 or 4 and pass contentWidth to the facebook iframe, the resulting facebook page will display full screen width.  Unfortunately, if you click a link on the page, the webpage that displays is also scaled by 3 or 4 and is too large for the screen.  Since a normal webpage displays at webView size, but the facebook iframe displays at a scaled size… it seems there is an interaction issue between the Facebook Pages plugin with iframe and the corona native.webView implementation.

Any ideas on workarounds? 

Option 1.  Implement with the facebook v4 plugin, do a fb.request for {page-id}/feed… then its up to me to sort out the format.

Option 2.  Load the full-size page directly into webview

?

#4

Try adding this to your HTML code: 

 \<head\> \<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"\> \<meta charset="utf-8"\> \</head\>

Rob

#5

Great help!  You’ve opened a new world.  :slight_smile:

I can confirm this worked on iOS Simulator, iOS Emulator, and Android device.

Thanks,

Al

#6

A few more experiments reveal that the combination of content scaling (config.lua), newWebView, and facebook iframe work as expected in the iOS simulator.  There the fb web page is configured to be the size of display.contentWidth and display.contentHeight.  Within the iOS emulator and an android device this doesn’t work (and neither does display.pixelWidth and display.pixelHeight.  It seems that the webpage is getting scaled somewhere such that it displays as <= 1/2 the width of the webView.

#7

Rob Miracle, any ideas? 

Another observation, if I scale the webView width size by a factor of 3 or 4 and pass contentWidth to the facebook iframe, the resulting facebook page will display full screen width.  Unfortunately, if you click a link on the page, the webpage that displays is also scaled by 3 or 4 and is too large for the screen.  Since a normal webpage displays at webView size, but the facebook iframe displays at a scaled size… it seems there is an interaction issue between the Facebook Pages plugin with iframe and the corona native.webView implementation.

Any ideas on workarounds? 

Option 1.  Implement with the facebook v4 plugin, do a fb.request for {page-id}/feed… then its up to me to sort out the format.

Option 2.  Load the full-size page directly into webview

?

#8

Try adding this to your HTML code: 

 \<head\> \<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"\> \<meta charset="utf-8"\> \</head\>

Rob

#9

Great help!  You’ve opened a new world.  :slight_smile:

I can confirm this worked on iOS Simulator, iOS Emulator, and Android device.

Thanks,

Al