I have been working with gwt and gxt since around few months,
I am working on a web site which needs to interact with social media web site like facebook,
I am trying to add fcebook share button in my web site , i tried below way -
I tried using HTML -
HTML facebookButton = new HTML();
facebookButton.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
facebookButton.setHTML("<div class=\"fb-share-button\" data-href=\"https://developers.facebook.com/docs/plugins/\" data-layout=\"button\" data-size=\"small\" data-mobile-iframe=\"true\"><a class=\"fb-xfbml-parse-ignore\" target=\"_blank\" href=\"https://www.facebook.com/sharer/......src=sdkpreparse\"> <img src=\"img/social/facebook.png\" > </a></div>");
But it does nothing -
tab.getUrlHeader() - this what i want to share
i searched across , but could not find anything .
is it possible to create such button in gwt/gxt by any way ..?
any help is appreciated
facebookButton.setHTML("<div class=\"fb-share-button\" data-href=\"https://developers.facebook.com/docs/plugins/\" data-layout=\"button\" data-size=\"small\" data-mobile-iframe=\"true\"><a class=\"fb-xfbml-parse-ignore\" target=\"_blank\" href=\"https://www.facebook.com/sharer/......src=sdkpreparse\"> <img src=\"img/social/facebook.png\" > </a></div>");
i think this what you copied from facebook share button -
This is correct , can't understand why this is not working for you.
You can try the iFrame approach. It is simple and easy.
I guess you have already created the facebook APP id from your developer account.
go to this page -
https://developers.facebook.com/docs/plugins/share-button
then enter the url you want to share -
URL to share
also choose the layout and the button size -
Layout-
Button Size-
Then click on Get Code - You will get the pop up.
In this pop up go to iframe tab - and copy the iframe element.
Then you can set this in your Html Label in GWT like this.
facebookButton.setHTML("<iframe src=\"https://www.facebook.com/plugins/share_button.php?href=......");
Let me know if it works
Related
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.
If I create a canvas and open the app profile page, It is showing a new look taking the left side area and there is no menu for 'Add to my Page'. What am I doing wrong? I am just unable to include a tab to a page.
I am trying to create an app to run my iframe, I used the following settings.
Apps On Facebook:
Canvas URL - Enter (http://YOURAPPLICATIONID.iframehost.com/)
Secure Canvas URL: (https://YOURAPPLICATIONID.iframehost.com/)
Page Tab:
Tab URL - Enter http://(YOURAPPLICATIONID.iframehost.com/tab)
Secure Tab URL- Enter (https://YOURAPPLICATIONID.iframehost.com/tab)
However there docent appear to be a way to "Add to my page" from the app profile page. I am following this tutorial.
http://www.youtube.com/watch?v=uoLpR2u7Ul8
Use the following to add to your facebook page:
http://www.facebook.com/add.php?api_key=[APP-ID]&pages=1
Replace [APP-ID] with your app id
Hope it helps.
Facebook are continuously changing things so most of the non-FB documentation and tutorials get outdated very quickly (which is a pain because they are much easier to understand than FBs own documentation!)
This time they're changing how the App Profile pages work, and some changed have been made since last week. You can find out the new way of adding your page here:
http://www.hyperarts.com/blog/facebook-removing-app-profile-pages-on-feb-1-2012/
Basically, you need to
Use the "Create Facebook Page" button in the edit app page
and either:
2 Create a link for others to add your tab using code similar this:
<a href="#" onclick=window.open("http://www.facebook.com/dialog/pagetab?app_id=176217385757369&next=http://tabpressapp.phpfogapp.com/content/pages/","PageTab","width=800,height=500");>Add TabPress to Your Fan Page!</a>
or 3. For your own private use code similar to this:
https://www.facebook.com/dialog/pagetab?app_id=176217385757369&next=http://tabpressapp.phpfogapp.com/content/pages/
(replacing with your own app_id & nexturl obviously!)
Edit: forgot to mention, the url for "next" is either the “Canvas URL” or “Page Tab URL” you used in your edit app page.
I haven't had to do this myself yet, but please let me know how it goes because I will soon!
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
Where YOUR_URL = the website address where you upload the HTML files.
Ref: https://developers.facebook.com/docs/appsonfacebook/pagetabs/
I'm trying to get Facebook send or like button display on GWT popup panel and I am not successful. When inspecting the generated HTML, facebook HTML button looks properly inserted into but it just does not show up. Save Facebook button works well in html page (not on GWT panel).
Have you ever had success in displaying Facebook Send or Like or Share button in GWT? I know I ca implement FB Like button myself using API or other libraries. But I do it need that. I need standard Facebook Send button to be used in my GWT application.
Please advise me if you have experience and were successful.
Thank you very much!
I had a similar problem, and it was because, in the html file's script tag, I had changed and not updated the src="path" to a valid path. I had a wrong directory listed in the path. For me, it's correct now with:
<script type="text/javascript" src="clienttest/clienttest.nocache.js"></script>
I rebuilt, and the image appeared on the page. This problem was keeping the entry point module from loading.
I´m trying to place a Facebook button - count on a site.
I´m building the site all the way through javascript.
So I´m adding an iframe inside a div (created through javascript) created used createElement('iframe'). I´ve added the iframe properties as the code I got from facebook page.
The problem is:
In the src iframe property, I have layout setted as 'button_count' (as I want a button_count layout for the site), but it appears as 'standard' layout.
Any help?
Thanks :)
I´ve just changed the src to another one and now it works :)
Basically i'd like to put a like button on the website so that fans of the site can like the websites Facebook page.
The Like button page doesn't give me the code when i click the button, just says "Only verified developers can be added as listed developers of this application. Read www.facebook.com/help/?faq=17580 for details." Is this a common error, or?
EDIT: Using Like box now, but would prefer Like button.
And the like box page gives me the iframe and XFBML codes. Sorry for being a n00b, but how do i add either one onto my site? I've tried Insert > Script and pasted it in there, using all four script types (Javascript, JS 1.1, JS 1.2 and VBScript but they don't show in the preview. Placed the code under the 'back to top' button at the bottom of the page. Not showing up when i look at code view of the online version though?
Hopefully its something really easy and obvious, but any help would be great.
Again, site is designed/updated with Dreamweaver MX 6.0.
I dont have that much experience with Dreamweaver - but implementing the facebook social plugins (eg. Like button) is very simple. All you have to do is copy and paste the XFMBL you generate from this link. Once you paste your URL into the "URL to Like" field and click "get code" you should get the correct code to use...
You place this code wherever you want it to appear - if you want the like button to be in the footer just paste it there...
The code snippet actually loads the facebook javascript sdk and places your like button inside an iframe on your page...
You can not place the like button code inside a different element - if that were possible people could trick you into liking their page by writing some different label on the button - eg. "Back to top" :)
This should be relatively simple to implement. If you are still having dificulties - why not try opening a new HTML file containing only the required HTML tags and the like button code...
Hope this helps!
Good luck!
The error appears because, just like it says in the message, you are not a verified developer.
In order to be a verified Facebook developer, you need a verified Facebook account, with a credit card or a phone number verification.
I'd suggest you verify your account as soon as you can if you plan to use more of Facebook's plugins and apps, since it will give you full access to their developer tools