Viewing Facebook Public page in app

Corona Marketplace Corona Community Plugins
#1

I’d like to be able to view a facebook page from within a Corona-based app.  Facebook has a Page Plugin.  If you go to this site, you can impose a URL and parameters.  As a result you get a javascript and an HTML reference.  I can create a local html file with the results and use a webPopup to show.  However, i end up with a hyperlink that you must click to see the page.  Can i avoid the hyperlink and show the page directly?  Is there a better way with Graph API?  [i generated the output below from the referenced facebook developer page]

https://developers.facebook.com/docs/plugins/page-plugin

---- JAVA SCRIPT —

<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/sdk.js#xfbml=1&version=v2.7&appId=1760582670857920”;
  fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

– HTML CODE —

<div class=“fb-page” data-href=“https://www.facebook.com/Board-of-Genii-1763535667233752” data-tabs=“timeline” data-small-header=“false” data-adapt-container-width=“true” data-hide-cover=“false” data-show-facepile=“true”><blockquote cite=“https://www.facebook.com/Board-of-Genii-1763535667233752” class=“fb-xfbml-parse-ignore”><a href=“https://www.facebook.com/Board-of-Genii-1763535667233752”>Board of Genii</a></blockquote></div>

#2

bad question?

#3

I wouldn’t say “bad” question, but it’s a tough question. Most of the people around here are not used to Javascript and HTML code. After looking at the FB page, they are giving you drop-in code to an existing HTML page. I think it would be helpful to see your webView code, how you’re creating it, what the full HTML you’re providing it is for someone to give you an answer.

Rob

#4

A novice myself.  Since facebook provides a direct method to get the HTML code, seems there should be an easy way to utilize it.  I create the temporary HTML file listed below in the documents directory of the device.  I then use this lua code to attempt to open the page.  The result is a web popup with only a hyperlink named “facebook”.  It seems there would be a way to mimic clicking the hyperlink (reload or onLoad), but I don’t see the trick.  To make this a more direct Corona question, is there a better way to get the Page result with the facebook plugin ( I was trying to avoid requesting facebook permissions within the app).

====== 

local bannerHeight = 48
local tmpHtmlPage= “fbTmpPage.html”
local options =
 {
     baseUrl = system.DocumentsDirectory, – default: nil
     hasBackground = true,  – default: true
     autoCancel = false,  – default: true (Android)
     urlRequest = listener  – default: nil
 }
 native.showWebPopup(0, bannerHeight, dim.screenWidth, dim.screenHeight-bannerHeight, tmpHtmlPage, options)

====== HTML FILE ===============

<html>

<head>
</head>
<body>
<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/sdk.js#xfbml=1&version=v2.7&appId=XXXXXXXXXXXXXX”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’);
</script>
<div class=“fb-page”

  data-href="https://www.facebook.com/facebook"  

  data-tabs=“timeline”

  data-small-header=“true” data-adapt-container-width=“true” data-hide-cover=“false” data-show-facepile=“false”>

  <blockquote

      cite="https://www.facebook.com/facebook"

      class=“fb-xfbml-parse-ignore”>

      <a href="https://www.facebook.com/facebook">Facebook</a>

    </blockquote>

  </div>
</body>
</html>

#5

Turns out Facebook provides an iFrame version of the same code (no javascript) and it works directly.

======= HTML FILE =============

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

#6

I messed around with it yesterday and I was just getting the link too. The iFrame method worked much better.

Rob

#7

Thanks for taking the time.  The effort is appreciated.