I'm trying to use Facebook Like button in my Phonegap (HTML + JS) app, but it doesn't work.
If I test it in the browser (local test), the button appears.
But when I build it with Phonegap BUild and run it in my smartphone, the button is not showed.
I'm using the code below:
<div class="fb-like" data-href="https://www.facebook.com/pages/Save-Points/293951217439051" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
The current way to implement the like action is by using the open graph object og.like - FB's documentation here. It's important to note that this method requires the publish_actions permission from the user. It's a bit of work to get this all running smoothly, but it is possible.
The phonegap-facebook-plugin has provided a guide here. Below are the instructions with some of my comments:
Your like button must not be the same (graphically) as the Facebook like button
This means no "thumbs up" symbol - quite a frustration!
When you display your page / button you have to call the getLoginStatus method first to know if the current user is connected to its Facebook account. If he is connected then call GET https://graph.facebook.com/me/og.likes?access_token=FB_ACCESS_TOKEN&object=URL_TO_LIKE with the Facebook Access Token returned by the g3. etAccessToken method (if this returns data then style your like button with a red heart for example, a grey heart if the call returns an empty array).
Along with checking a user is logged in, to reiterate you must check your app has publish_actions permission for the user. Though you could possibly request this upon the Like action.
Also, the array is in the data property of the response object. If you're checking as to whether the user has liked this URL, you'll basically want to check response.data.length > 0.
To create a like (when your user clicks on your like button and your like button is a grey heart) do a POST on https://graph.facebook.com/me/og.likes?access_token=FB_ACCESS_TOKEN&object=URL_TO_LIKE NOTE: You must have publish_actions permission to do this
After doing this, the URL has been successfully liked by the user, and now the GET method will return an array with one object. Calling this when the user already has liked the URL will result in an error.
To remove a like (when your user clicks on your like button and your like button is a red heart) do a DELETE on https://graph.facebook.com/LIKE_IDENTIFIER?access_token=FB_ACCESS_TOKEN. The LIKE_IDENTIFIER is returned from steps 2 or 3.
The unlike (DELETE) method is different to the rest - it's not based off /me, and instead of filtering via URL, you use the like id. You'll likely have to call the previously described GET method to get the ID (do response.data[0].id).
Related
Salon owners can create an account with their salon information on our platform and they get a page that they can use as a tab app.
I want to be able to serve all these pages from one app instead of having to install each one seprately and I also want to make the life of the salon owner easier by helping them to install the tab.
I know about the link I can create to help them install the app and I know that when a visitor visits the app that facebook will send the page ID. So far so good.
https://developers.facebook.com/docs/appsonfacebook/pagetabs/
But how do I make sure that when the salonowner follows the link to install the app that I get the page ID back (through callback or other) so that I can register which page ID belongs to which salon account.
I've read sone 2011 article about a callback but I can't find any recent info on this.
I think it should be possible as a lot of sites offer easy fb apps to businesses.
Any help would be welcome!
EDIT: Could this last piece of info in the Facebook link above be used to do this? I don't quite get it yet.
In addition, your app will also receive a string parameter called app_data as part of signed_request if an app_data parameter was set in the original query string in the URL your tab is loaded on. It could look like this: "https://www.facebook.com/YourPage?v=app_1234567890&app_data=any_string_here". You can use that to customize the content you render if you control the generation of the link.
Well... Preventing users from adding your application to their page is impossible. You can't prevent that.
What you will be able to do is to detect who has added your application and according to that, change the content (or not display it at all). So you'll have to start with a list of "allowed" page_ids to match to the accounts you want.
Your application will receive a signed_request each time a user arrives at your application (within a page). Inside that signed_request is information not only on the user but also on the page that the application is on (provided it is a page tab app).
Once you have obtained the signed_request, it will hold a page key which contains:
A JSON object containing the page id string, the liked boolean (set to
true if the user has liked the page, false if not) and the admin
boolean (set to true if the user is an admin of the page, false if
they're not). This field is only present if your app is being loaded
within a Page Tab.
So you'll be able to access the page_id from within this variable and make a decision on the type of content you want to be displayed.
Ok, after running some tests I found out that when you add a URL as 'next' parameter to the install URL Facebook will send the admin(user) back to this URL while adding an array to the request containing all the page Id's the app was installed to.
Like this: YOUR_CALLBACK_URL?tabs_added[ID]=1
Proved to be quite easy in the end
I have a question about an app page function on Facebook.
https://www.facebook.com/InternationalDelight/app_481604621851046?ref=ts
in the link above there is the blue stick header, followed by a silver or white bar with four items.
An avitar/icon image
A button that allows a direct link to the owner's Facebook page attached to a another drop down button.
Now the last button is the one I am curious about. It allows the splash page (in the content area) to be liked then it redirects the person to the offer.
I have my app in sandbox mode, I am wondering:
Is this is an app that I can add
Is it a custom built function
A standard feature that I have not seen because my page is not live.,
How I can duplicate the functionality of the entire bar?
I have dived into Facebook the API and Facebook graph but I honestly don't know what to look for or what it is called.
On inspection the container div says...'stickeyheader' probably becasue it is sticking itself to the blue header...or timeline and 'timelineStickyHeader' and 'visible'... but how they got it to behave this way is beyond me.
Anyone familiar with this action/event? Let me know if I need to add more details.
Thanks!
Here is the answer (in case anyone bumps into this down the road). There are a few steps to putting your app on Facebook via and iFrame (basically a application that is hosted somewhere else but that requires some Facebook like button interception.
First you build your application. Creating a landing page (this will be tabbed later). In the header of that page look to intercept the user Facebook date to see if they currently like your page. If they don't then set up a function that stops them. If they like the post back/processing of the page on the like button click will set the conditions for the user to pass through to the app. This is like-gating.
Now, to develop the application you have to go to developer.facebook.com and create an account. There are two ways you can intercept the like/user date...
Here was my original code (it is in Coldfusion and Javascript):
<cfscript>
//Decode the signed request
fb_str = listToArray(FORM.signed_request, '.');
//Facebook use strtr
fb_str = replacelist(fb_str[2], "-,_", "+,/");
//For some reason their base64 needs padding out to match a base64 length
pad = repeatstring("=", 4-len(fb_str) mod 4);
//Decode it
result = ToString(BinaryDecode(fb_str & pad, 'base64'));
//JSON-ify it
liked = deserializeJSON(result);
//Clean up and release memory
fb_str = pad = result = '';
</cfscript>
<cfif liked.page.liked eq 'YES'>
<script type="text/javascript">
top.window.location = 'http://apps.facebook.com/parentsavvybook/';
</script>
</cfif>
That goes on your Coldfusion page (or other server-side scripting equivalent).
More can be found here: http://www.facebook.com/note.php?note_id=10150169691075844
Then in the developer tools you want to choose web app, then click the button that says create a new app. Fill in the application information, like what the domain is, and the name of the app.
The important stuff is the tab set up.
Add your app URL (where your web app is hosted to point to the page that has the FB script code/redirect stuff.
Once it is created you'll have an app ID and app URL.
The KEY
The key was this little stupid bit of code.
http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
Why was this important. Well the Facebook page might be managed by you, but you will not be able to attach it to the page. You'll go crazy for days trying to get it linked up.
Fill in the missing parts above and go to the link.
You'll be prompted with a drop-down that will let you attach it to your page, or a page you manage.
Here is another post that hits the high points.
http://blog.hubspot.com/blog/tabid/6307/bid/26330/How-to-Create-Custom-Tabs-for-Facebook-Business-Pages.aspx
I hope this helps someone who struggled with FB apps and tabs to get the like button and how to interact with it and then finally attach it.
I will try to explain a bit the context for my problem.
Context:
A while ago I started working on Facebook application. One of the requirements is to be included in a Facebook page as a tab. This application will contain on a page a send button in order to be able to make it more engaging with specific people, users of the application would choose on their own. The reason behind this is because the Facebook page containing the application is related to alcohol, and "liking" the application will get more audition and potential children. Another reason for using send button rather then other similar options from Facebook (like send dialog etc.) is because in Facebook documentation was stated that send button works on mobile devices and other options don't.
Problem:
My problem is related to the send button. What I need is to be able to completely configure the send button: url, image, title, description. I have research the open graph tags in order to be able to do this. Everything works fine if the page I want to be sent with the message is a website OUTSIDE Facebook. Once I started to use the url of a Facebook page (let's call it www.facebook.com/mycustompage), then the crawler takes the images, title, description from facebook.com ignoring the actual page and the produced message is not what I want.
I have searched a lot to better understand this limitation and could not find anything relevant.
The only article I could find as a potential solution was (and even this I had trouble finding):
Send button returning error codes, like button works fine
The above discussion is a workaround which I have already put in place but is not 100% what I want. The described workaround is about putting in the send button:
<div class="fb-send" data-href="http://www.mycustomdomain.com/og"></div>
a page that sniffs the user agent. In case the user agent is Facebook crawler to serve an html empty page just with the open graph tags, otherwise redirect to the desired URL - which in our case is the facebook page www.facebook.com/mycustompage.
The message produced contains:
the title which is a link to www.mycustomdomain.com/og which when
clicked opens a page in a new tab with the address
www.facebook.com/mycustompage - this is relatively ok
under the title I have a "sub-title" readonly text containing the domain of the link: www.mycustomdomain.com - THIS IS NOT OK since I don't want to share where I have hosted the application.
the image and the desired description - this is ok.
Conclusion:
What I want to know if there is a better way to do this rather than this workaround.
If not I would like to know how I can hide for the produced message the "sub-title" so that the hosted domain is not visible.
I have a music app that I developed using HTML5's canvas. As different songs are selected, I have jquery that dynamically updates the URL in the browser to point to the correct song. I also have jquery that updates fb:like element. By using the debugging tool, I'm able to cache the pages (since my server is able to return correct meta-data for each URL provided).
When I do this and like something on my website, I end up with a message saying "Sami liked a page." with some info underneath.
Next, I use the Open Graph curl commands to add a Recommend action (something I've created) to a given URL from my website. Now, when I like the same url, I end up with a message saying "Sami recommends this link" with some info underneath.
What I'd really like to do is have this message display "Sami recommends a song on website", which is what the message looks like when I look at the preview for my Song object in the Open Graph. Is there any way to do this?
Best,Sami
EDIT: probably good to note that I'm also getting some extra meta info from the website (such as og:site_name), but that this stuff is not being saved into the Actions portion of my Open Graph (as in I can't view that info using the Open Graph link to view my current Recommendations), though I can see it using the debugger tool.
The facebook like button "triggers" the most generic action which is the like, you can how ever change the like button to use "recommend" instead of "like".
In the documentation for the like button, in the attributes table you can see the "action" attribute which is:
the verb to display on the button. Options: 'like', 'recommend'
Also when you "Get Like Button Code" thing you can select Verb to display.
If you want to use your own actions you'll need to define them in the app settings page as explained in the Define Actions guide.
I am usign the version of based on the <fb:like > tag. This renders a small facbook logo which implements the actual "like" operation, but also includes a large "signup to see what your friends like", or the number of likes when you are logged in, etc. It is pretty clear from what I have read that this is the form facebook wants you to use, but it makes the button to wide for my layout. The point is that I see other versions on websites all over, in particular "the weather channel" has one that includes only the logo with some text such as "like us" next to it. "Chicago Tribune" has one that says "recomend" with a very small like count next to it. I have not been able to determine what these link to or what script they invoke so that I can copy them. Can anyone help ?
when you get the code of the like button from facebook you can play with the options and get different results: http://developers.facebook.com/docs/reference/plugins/like/.
obviously it's limited to how facebook wants it to look like.
it is possible to change the look with css, but that's not wise since it's against their policy and you'd have to keep track with their changes.