Facebook currently has event handlers for facebook events such as like / recommend. But this is available only for xfbml version of the code. Since facebook is no longer supporting fbml / xfbml (http://www.allfacebook.com/facebook-markup-language-support-ends-jan-1-2011-12) how do we listen to events on iframes? You cannot use javascript methods listening to ids onclick and etc, esp for iframes owned by facebook / twitter. Is there any other solution to this?
Thank you but,
Thanks. I am already using the new Javascript SDK. Scroll down for my code, but I am assuming that this works only for the "xfbml" version of code for facebook like button? does the same apply for iframes too? Assumption based on this text on http://developers.facebook.com/docs/reference/plugins/like/:
The XFBML (also available in HTML5-compliant markup) version is more versatile, but requires use of the JavaScript SDK. The XFBML dynamically re-sizes its height according to whether there are profile pictures to display, gives you the ability (through the Javascript library) to listen for like events so that you know in real time when a user clicks the Like button, and it always gives the user the ability to add an optional comment to the like. If users do add a comment, the story published back to Facebook is given more prominence.
window.fbAsyncInit = function() {
FB.init ({
appId : ,// App ID
channelUrl : ,// Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Listen to click event
FB.Event.subscribe('edge.create', function(response) {
// Do something, e.g. track the click on the "Like" button here
$('#someDiv').show();
});
};
// Load the SDK Asynchronously
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Yes, you can subscribe to events using the new Javascript SDK. See here: https://developers.facebook.com/docs/reference/javascript/ and https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
Related
We are planning to use recaptcha-V3 on our website. To try this out first and do a phased released - one suggestion was just to have the front-end integration (without backend integration for site verification) and then monitor using the reCaptcha console for unusual activities. If we find unusual activities, we'll then turn on an extra verification on the login page (controlled by a switch).
So the key question I have got is - Can we integrate recaptchaV3 only on the front-end and not on the backend - and use the Admin console to monitor activities?
Yes you can do that. without any backend integration it can be done but that will not be a good way to implement this . The secret key and as well as the request token will be exposed in client browser.
Try this code :
<script src="http://www.google.com/recaptcha/api.js?render={recaptchaSiteKey}"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('recaptchaSiteKey', {action: 'homepage'}).then(function(token) {
var recaptchaSecret={recaptchaSecret};
var responseString = "https://www.google.com/recaptcha/api/siteverify?secret="+recaptchaSecret+"&response="+token;
$.ajax({
url:responseString
//your code
});
});
});
</script>
I've integrated reCAPTCHA v3 in one of my forms. In onload, there's a token produced and google captcha logo in the bottom right corner. But when I submit the form, in console there is an error shown, "Error: No reCAPTCHA clients exist". Also, it seems, no data is fetched by "g-recaptcha-response" and $_POST["g-recaptcha-response"] remains empty.
Here is the sample code:
<script type="text/javascript">
var ReCaptchaCallbackV3 = function() {
grecaptcha.ready(function() {
grecaptcha.execute("site_key").then(function(token) {
console.log("v3 Token: " + token);
});
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
It doesn't produce any "g-recaptcha-response" when the form is submitted.
I don't know much about google reCaptcha. I've followed the documentation provided by them and used a site and a secret key in the proper way.
Can anybody please tell me where might be the problem and what is the possible solution?
I believe this error occurs when the reCaptcha api.js loads, but your container is not present on the page yet (at least for v2). I had this error occur in a React app when I navigated to the page rather than loading it as the first on. Instead of using render=explicit and using a global namespace onLoadCallback, I was able to resolve it by rendering the captcha element manually.
Instead of creating a <div class="g-recaptcha"></div>, give the container div an id only (<div id="recaptcha-container"></div>) and render it in your JS code (e.g. in componentDidMount for a React app):
grecaptcha.ready(function() {
grecaptcha.render("recaptcha-container", {
"sitekey": "your-site-key"
});
});
Have you tried loading the script before trying to send the request?
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
<script type="text/javascript">
var ReCaptchaCallbackV3 = function() {
grecaptcha.ready(function() {
grecaptcha.execute("site_key").then(function(token) {
console.log("v3 Token: " + token);
});
});
};
</script>
When I came across this problem with reCAPTCHA v3, it was because I didn't pass it the correct site key.
This also happens in Recaptcha 2 before user interacts with it. So, I have a submit button that triggers a JS function that checks the value of recaptcha. To solve the no client exists problem, I did:
try {
data["reCaptcha"] = grecaptcha.getResponse();
} catch (err) {
data["reCaptcha"] = "";
}
The data object then gets sent to a back-end script that validates the recaptcha. The back-end also checks for the field being empty.
I had this problem because I was calling grecaptcha.reset(); when there wasn't any Recaptcha active on the site
grecaptcha.reset();
recaptcha__en.js:507 Uncaught Error: No reCAPTCHA clients exist.
at MX (recaptcha__en.js:507)
at Object.Zn [as reset] (recaptcha__en.js:514)
at <anonymous>:1:13
I was using React and only rendering my captcha container sometimes. Fixed by hiding the captcha button instead of not rendering it.
In my case grecaptcha.reset(); was present from previous code snippet, and I was programmatically invoking it.
As the captcha verification is going on the fly every time. Resetting wasn't required.
After eliminating this grecaptcha.reset(); my code works perfectly fine.
Maybe this hint can help someone.
We received this because we have a second environment with another domain and forgot to add this domain to the reCaptcha admin site. The solution was to add the new domain to the settings.
The steps are
Open www.google/recaptcha/admin/site
Select the site you're working on
Click on the settings gear
Add the domain in its respective section
I'm developing a Chrome (packaged) app which maintains a set of bookmarks. This opens in its own small window. Clicking on a bookmark opens it in a browser using a link with target set to '_blank'.
On Mac OS X, these open in Safari. Is there anyway of having them open in Chrome?
When you click on a link with target="_blank" in a packaged app, Chrome respects your choice of the default browser and opens the link externally in whatever it is, not necessarily Chrome. In your case, the default system browser must be Safari.
The easy way to open such links in Chrome would be to make it the default browser instead.
If you don't want to do that, but still for some reason insist that your links open in new tabs specifically in Chrome, here is one (perhaps the only) way to achieve that:
Write a companion extension to your app and have your users install it.
In the app, attach an onclick handler to every link, and use chrome.runtime.sendMessage() to send a request to the extension to open the link's URL (in order to do that, you will have to find out your extension's ID and bake it into its manifest, as described here: http://developer.chrome.com/apps/manifest/key.html):
var link = ...;
link.addEventListener('click', function(e) {
e.stopPropagation();
e.preventDefault();
chrome.runtime.sendMessage(
yourExtensionId, { url: link.href }, function(response) {}
);
};
In the extension, define a chrome.runtime.onMessageExternal(data) handler (it will intercept sendMessage() requests from the app), and use chrome.tabs.create() in there to open a new tab:
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
// Don't forget to make sure that |sender| is you app here.
chrome.tabs.create({ url: request.url }, function() {
// If you need to notify the app when the tab opens:
sendResponse(true);
});
// 'true' means that your response is sent asynchronously.
return true;
}
);
I'm trying to write an add-on for firefox and i'm having a problem-
When the user right-clicking on the page the add-on is adding an element to the page's body using
document.body.appendChild(myElement);
myElement has a button and i want that "onClick" it will call a xmlHttpRequest and handle the response in some why. I've tried to inject the two scripts using
document.getElementsByTagName('head')[0].appendChild(xmlRequestFunction);
document.getElementsByTagName('head')[0].appendChild(handleResponseFunction);
but it didn't work because of (i assume) a security problem.
What can i do?
Thanks
Do not use onclick when working with content, use addEventListener instead (see https://developer.mozilla.org/en/XPCNativeWrapper#Limitations_of_XPCNativeWrapper if you need to know why). Like this:
myElement.addEventListener("click", function(event)
{
var request = new XMLHttpRequest();
...
}, false);
Couple questions about the implementation of the XHR request:
I am trying to make a form in popup.html that allows for the filling of a box with text (in popup.html) and submits that to a remote website using get and replaces the contents of the box with the return of the php (json).
Heres the code so far:
Any idea why when I click submit nothing happens?
Also the manifest permissions:
"permissions": [
"https://*/",
"https://*/*"
]
}
forms don't need permissions at all to do a cross domain post (in theory). That being said, the popup.html never reloads in a browser action (or page action) when a form is submitted.
An easy thing to do is to capture onsubmit on the form and simply do an XMLHttpRequest attaching the form as per the Mozilla MDC site.
Which in summary is (copied from mozilla):
var formElement = document.getElementById("myFormElement");
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitform.php");
xhr.send(new FormData(formElement));