I'm building a Joomla website (here, still under construction) and I'm adding in facebook support. I've downloaded and installed the Joomla Facebook SDK, and now I'm trying to add login and registration with Facebook.
I made a Custom HTML module in the top-a position, and dropped in the following code:
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js#appId=MY_APP_ID&xfbml=1" type="text/javascript"></script>
<fb:login-button registration-url="https://REGISTRATION_URL"></fb:login-button>
where the registration url points to a page with the registration button on it (is that right?)
The Login button appears with the word "Login" but does not respond to clicks. The Chrome console doesn't register any errors, and neither does Firebug.
This may be a very simple problem since I'm relatively new to this kind of coding, and not very comfortable with javascript.
Joomla filters content by default and removes Javascript. Use plugins like these to allow you to enter custom code [JS, PHP etc...], and these for FB login
Related
I have a button on my website allowing the users to share the site on Facebook.
The button has the following anchor tag:
https://www.facebook.com/sharer/sharer.php?u=example.com.au
This redirects the user to a site where they can post on their Facebook Page. Once the user click's 'Post', Facebook automatically redirects the user to a blank page which has the following in the address bar.
https://www.facebook.com/dialog/return/close#=
I want to direct the user to my own custom website rather than the blank Facebook default.
A quick Google search on this issues suggested that I need to add a redirect parameter in the URL so that Facebook knows where to redirect the user once they complete the post. It is meant to look like this:
https://www.facebook.com/sharer/sharer.php?u=example.com.au&redirect_uri=http://newsite.com
As you can see, I have added the parameter "redirect_uri" and I have set it to: htttp://newsite.com
Only one small problem.....
It doesnt work!
I have no idea why, but it still directs to the default blank page (https://www.facebook.com/sharer/sharer.php?u=example.com.au)
I have tried clearing my browser cache, I have tried different browsers, I have even tried multiple devices but I still can't get this to work.
Am I doing something wrong? Did Facebook deprecate this feature?
FYI: This is where I found to use the redirect parameter:
https://developers.facebook.com/docs/sharing/reference/share-dialog
I don't know why it doesn't return to the correct URL, but I had a similar problem and created the below solution:
<a href="#" onclick="fbShareWindowOpen()">
<span id="fbShareButton">Share this on facebook!</span>
</a>
<script>
function fbShareWindowOpen() {
var myWindow = window.open("https://www.facebook.com/sharer/sharer.php?u=www.url-to-share.com/", "", "top=30px,width=200,height=100");
}
</script>
This will open up a window that will resize correctly to fit the facebook sharer UI. When the link is shared (the share button has been clicked) the new window closes, making for a very clean flow.
I don't know for sure, but I assume the facebook sharer child window is closed by the "..return/close.." redirect URL.
This is weird!
I have set up a form using RapidMailer, and on an external site it works fine. (Just to complicate matters, the form is within a <div> as I display a background image, and then use the <div> to position the signup box halfway down the page)
But ...
Put it within an Facebook (Thunderpenny) StaticHTML page, (which I think is <iframe>?) and whilst I can enter name/email, and the submit button shows mouse up/mouse down events, it just won't submit.
I tried adding "pointer-event:auto" to the div so that it was to the fore, but no go. And no good asking the app creator as I doubt I'll get a response. Anyone any ideas? (** I could include page code, but it's 90% links to external js files Rapidmailer sets up)
Is it 'cos I got a <div> within an <iframe>? Do I need to add an <object> to the code somewhere???
It turns out that for some reason, the HTML code cannot find / use the javascripts even with direct URL's. I strongly suspect it's to do with "cross browser" limitations. In otherwords, the StaticHTML <iframe> is on one server, and the HTML code is trying to access javascript on a second server. And as the RapidMailer script is using three scripts direct from jquery.com, it's difficult to know what can be eliminated as they all contain error trapping routines.
In the end, I had to add a direct link to a status update on the Facebook page, and redirect it to the signup form on my blog. I then pinned the post the top. Alas, now for some reason it won't display a graphic with the link, and instead insists on showing the URL itself! Oh well!
Chrome doesn't seem to be consistent regarding when it prompts to save password. Consider the following two processes from my web site...
Go to home page
Click Login (this takes you to Login.php)
Enter a login/password
You're logged in now, but Chrome did not prompt you to save the password
However...
Go to home page
Click Login
Refresh the page
Enter login/password
You're logged in now, and Chrome did prompt to save the password...
What gives? The only difference is hitting "refresh". The code for Login.php is very very simple... essentially:
<form id="LoginForm1" action="Login.php" method="POST">
<input type="text" name="UserName" />
<input type="password" name="Password" />
<input type="submit" value="Login" />
</form>
There's javascript (jquery-1.7.2 and jquery.mobile-1.3.0) on the main page, but not on Login.php. It seems to carry over, though, because the styling of the form on Login.php looks like jquerymobile until the refresh. Can anyone explain this behavior? (And furthermore, why does jquery/jquerymobile inhibit the Save Password feature?)
Thanks in advance... this is my first question asked.
Short answer
The link from my homepage to Login.php needed data-ajax="false" in the a href tag.
After I re-included jquery-mobile to Login.php, the form tag on Login.php also needed data-ajax="false".
Long answer
Part 1
After more digging, I found that the normal behavior for jquery-mobile is to "hijack" all a href links and process them through its ajax functionality. This means it was transferring to Login.php as an ajax-style transfer, instead of a standard a href transfer. A standard transfer checks Login.php for its specifically declared javascript include files, but the ajax transfer carried over the javascript includes from the homepage.
However... when you force the browser to only look at Login.php (by clicking refresh) it found that there weren't any javascript includes, and so Chrome looked at the naked page ane dealt with it properly.
Part 2
You have to meet several requirements for Chrome to prompt to save a password. Among them include:
You have to use a form element
You have to use a submit, not a button
The submit has to be a real submit. (If you override the submit functionality with some javascript/Ajax... it (probably) won't prompt to save a password.)
The form has to be visible when the page loads.
When working with jquery-mobile, 3 and 4 can trip you up.
With respect to 3...
jquery-mobile automatically hijacks the form submit process, the way it does with links... so it's necessary to add data-ajax="false" to the form element to prevent it from doing that.
With respect to 4...
The first version of my website had a login panel on the home page where the login button revealed the panel from "underneath" the page. This method would not prompt for a password until I forced the panel to be visible on page load.
Since I didn't want the login panel always to be visible on the home page, I decided to use a separate login page (Login.php). However jquery-mobile's inherent way of treating links to separate pages is to hijack them with its ajax functionality... which the browser interprets as staying on the same page. So for Chrome, navigating to Login.php was the same as using a hidden panel... because Chrome interpreted both requests as staying on the home page... and in either case, the form element was not visible when the page originally loaded.
I'm using Web2py and using the "PLUGIN_JQMOBILE/LAYOUT.HTML" as the base layout file.
The problem is that when I click on a link, jquery-mobile takes me to the next page -- all fine here.
When I view the source for the page, I see that it still has <title> from the older page.
I caught the problem since I'm using lockerz(addToAny.com) and when users try to share the page on Facebook, the title was coming completely incorrect.
I used the FB developers debug page & saw the title shown.
I can add the og:title, etc, but this problem is biting me for Google+ as well.
Am I doing something incorrect or is that a side-effect of jquery-mobile.. ?
This is because of the Ajax loading by default in jQuery Mobile. You can avoid this problem by using data-ajax="false" in your links or by using a jQuery script to change the page title after loading.
I'm trying to create a relatively basic custom fan page tab with Developer, and for some reason I'm unable to add the app to any pages. In the past with other similar , I've had a "view app profile page" link on the left, but for some reason it's not showing up.
Am I missing a step?
Go to: https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL where YOUR_APP_ID is found in your app settings, and YOUR_URL is indeed the URL of the tab (this has to be there an correct). This will take you to the Add to Page Dialog of your page.
This is taken from this tutorial: https://developers.facebook.com/docs/appsonfacebook/pagetabs/
If you want to make a button so that anyone can add the tab to their pages check DMCS' link.
See: http://developers.facebook.com/docs/reference/dialogs/add_to_page/