Forum | Appery.io

I am trying to implement the facebook like button feature on page for web app (no phonegap). When I try to view page, the button is not showing (div is empty on page source). When I refresh page, button shows. I am wondering what the problem might be. When I do get button to show, it works fine- posts to facebook.

Like button docs:
https://developers.facebook.com/docs/...

On page, I added two panels:

First panel at top of page called fbPanel contains code provided by facebook like button configurator:

code
<div id="fb-root"><&#47;div>
<script>(function(d, s, id) {
var js, fjs = d&#46;getElementsByTagName(s)[0];
if (d&#46;getElementById(id)) return;
js = d&#46;createElement(s); js&#46;id = id;
js&#46;src = "&#47;&#47;connect&#46;facebook&#46;net&#47;en_US&#47;all&#46;js#xfbml=1&appId=may-app-id&quot
fjs&#46;parentNode&#46;insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));<&#47;script>
/code

The next panel where button is to be shown, showPanel is empty to start.

On the pageShow event I run this script:
code
var addedCode='<div class="fb-like" data-href="http:&#47;&#47;developers&#46;facebook&#46;com&#47;docs&#47;reference&#47;plugins&#47;like" data-width="250" data-show-faces="false" data-send="true"><&#47;div>';
Tiggzi('showPanel')&#46;append(addedCode);
/code

Hello! Please try to add http://connect.facebook.net/en_US/all.js through App settings - External resources use the following way https://getsatisfaction.com/apperyio/...

Hi
adding the link to sdk in settings seems ok, but the choices for providing a good working like button are not good. For example, if I use an iframe code, the button does create a like on FB profile, but the link back (the parameters FB added breaks Appery app page loading. (Also, I never see my comment.)

My page to be liked is created with dynamic content (query string). After service runs I have title, image url, etc. It would be nice if there was a way to add page title, image, etc like with XFBML method (with open graph tags). Although I am guessing that FB will not run javascript to get my page data to get these to begin with right?

Seems like there should be a lot better way to make a like in appery app. For example, if FB cannot scrape a dynamic page then I need to be able to add image, title, etc. somehow.

Before I thought it through, I tried to test if using XFBML and tags is possible, I tried to dynamically create new tags on page load:
$("meta[property='og:image']").attr("content");
but these tags do not show up on page source. Now I am thinking it does not matter because FB will not run javascript to get data anyway.

How can it be done with dynamic data?

Hello! Working on it, I'll update.

Hi Sean,

Did you replace "may-app-id" with your id?

yes- but that is not the problem. the problem seems to be that an app page populated with appery database data cannot be scraped by FB to get title, images, etc. because service to get data is run when page loads (or shows) and they do not run JS.

To work around the data not being available, there needs to be a way to send this info to FB. My own web site (not appery) displays dynamic content and FB can scrape it, but with Appery populated page they cannot. This means there needs to be another way of showing them this content. Maybe something like a publish function?

I wonder if anyone using jquery mobile/appery has been able to create like type functionality of dynamically populated page. If so, how?

Hello! Please try to change uploading order of Facebook JS - add this component and it's content on page Show event.

that is what I do now, but that is not the problem. if like a page populated with rest data with regular like button, it ends up on fb timeline but fb cannot scrape page you liked because JS needs to run to render page and FB does not run JS when scraping. This is similar to the reason why appery pages are not crawlable by google for search.

there needs to be a way to supply this data to FB when liking. I came across this bit of code which works on desktop test. Run this on page show event. Personalize the appiD and the portions after FB.ui but leave the method value set to feed:

code
var addedCode=' <button id="fb-publish">Share to Facebook<&#47;button> ';
Tiggzi('showPanel')&#46;append(addedCode);

(function() {
FB&#46;init({
appId: my-app-id, cookie: true, status: true, xfbml: true, oauth: true
});
$("#fb-publish")&#46;click(function() {
FB&#46;ui({
method: "feed",
link: "my web address here",
caption: "my title",
description: "Here is the text I want to share&#46;",
picture: "link to my photo"
});
});
})();
/code

Hello! Your code looks correct. Does it work as expected or something is wrong?

works perfectly - just thought someone might be able to use it for dynamic pages