I'm trying to receive Facebook notifications (within Facebook) when a user Likes a post on my blog - http://visualise.ca.
I have the following code, the plugin works fine but I can't get notifications and I don't know what I'm doing wrong. Here is a sample of the code:
<html lang="en">
<head>
<meta charset=utf-8>
<meta property="fb:admins" content="589865326" />
</head>
<body>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=134951483245924&xfbml=1"></script><fb:like notify="true" href="http://visualise.ca" send="true" layout="button_count" width="450" show_faces="false" colorscheme="dark" font=""></fb:like>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '134951483245924', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
// Do something, e.g. track the click on the "Like" button here
});
};
(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);
}());
</script>
</body>
</html>
What am I missing? Many thanks for your time and help.
FB.Event.subscribe('edge.create', function(href, widget) {
// Do something, e.g. track the click on the "Like" button here
});
To get "notifications" (not Facebook notifications as they don't exist for the like button), this is where you can AJAX back to your server that someone liked the page.
Related
When I run this code in my localhost server and I click the Show Ad button in the #!/reward page, the reward ad shows but sends me back to the #!/ page. However, in this online code editor this SPA (single page app) works as intended: it plays the ad but leaves you on the reward page. Obviously this must have something to do with the fact that the application is running in an iframe on the editor, but why am I getting the "unexpected" behavior on my localhost and "expected" behavior in these online editors (I've also tested in jsbin and jsfiddle and same result).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
</script>
</head>
<body>
<div id="App"></div>
<script src="https://unpkg.com/mithril/mithril.min.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(() => {
googletag.enableServices();
googletag.pubads().addEventListener('rewardedSlotReady', event => event.makeRewardedVisible());
googletag.pubads().addEventListener('rewardedSlotClosed', event => googletag.destroySlots([event.slot]));
});
const Home = {
view: () => m('button', {
onclick: () => m.route.set('/reward')
}, 'Go to Reward Page >>>')
}
const Reward = {
view: () => [
m('button', {
onclick: () => m.route.set('/')
}, '<<< Return to Home Page'),
m('button', {
onclick: () => googletag.cmd.push(() => {
const rewardedSlot = googletag.defineOutOfPageSlot('/22639388115/rewarded_web_example', googletag.enums.OutOfPageFormat.REWARDED);
if(rewardedSlot)
{
rewardedSlot.addService(googletag.pubads());
googletag.display(rewardedSlot);
}
})
}, 'Show Ad')
],
}
m.route(document.getElementById('App'), '/', {
'/': Home,
'/reward': Reward
});
</script>
</body>
</html>
UPDATE (2022.08.03 11:16)
I can confirm that by placing this code into a subdirectory and then running it inside an iframe I get the expected behavior. I still need to understand why it doesn't work without the iframe. Here's a Glitch page that illustrates both scenarios. Click the View button on the preview pane to view it in its own window and note the difference.
The specific code for a rewarded ad appends #goog_rewarded to the end of the page's URL. This is what forces the unexpected behaviour to return to the default route of Mithril's router when using the default #! strategy. The added # triggers a hashchange event and Mithril cannot resolve the route. Setting the m.route.prefix to a different strategy (in my case m.route.prefix = '?') resolves the problem as it prevents the lookup from taking place.
I am trying to build a React Native app using expo and firebase authentication. The email/password authentication is working fine but the phone number authentication is failing because of the applicationVerifier.
I have tried to use 'react-native-firebase' but that is also not working and giving error.
[Error: RecaptchaVerifier is only supported in a browser HTTP/HTTPS environment with DOM support.]
Thanks.
You need to make .html file and put this code..
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Entering captcha</title>
</head>
<body>
<p style="text-align: center; font-size: 1.2em;">Please, enter captcha for continue<p/>
<button id="continue-btn" style="display:none">Continue to app</button>
<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyCy6HyqIV5Q_A5lllIxZgePSmKq-Q8eqiw",
authDomain: "onsignledemo.firebaseapp.com",
databaseURL: "https://onsignledemo.firebaseio.com",
projectId: "onsignledemo",
storageBucket: "onsignledemo.appspot.com",
messagingSenderId: "223114260821"
};
firebase.initializeApp(config);
</script> <script>
function getToken(callback) {
var container = document.createElement('div');
container.id = 'captcha';
document.body.appendChild(container);
var captcha = new firebase.auth.RecaptchaVerifier('captcha', {
'size': 'normal',
'callback': function(token) {
callback(token);
},
'expired-callback': function() {
callback('');
}
});
captcha.render().then(function() {
captcha.verify();
});
}
function sendTokenToApp(token) {
var baseUri = decodeURIComponent(location.search.replace(/^\?appurl\=/, ''));
const finalUrl = location.href = baseUri + '/?token=' + encodeURIComponent(token);
const continueBtn = document.querySelector('#continue-btn');
console.log(finalUrl);
// continueBtn.onclick = (event)=>{
// window.open(finalUrl,'_blank')
// }
continueBtn.style.display = "block";
}
document.addEventListener('DOMContentLoaded', function() {
getToken(sendTokenToApp);
});
</script>
</body>
</html>
and put this file in to your running server and load your URL in to react- native Webview before sending confirmation code and after verify this CAPTCHA send confirmation code...
So I'm working on a site where the user logs into my Soundcloud app and automatically follows me. I am able to login but it doesn't follow. I can't seem to figure this out.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://connect.soundcloud.com/sdk/sdk-3.0.0.js"></script>
<script>
SC.initialize({
client_id: '551f515f1sa1f51sa51f65sa165',
redirect_uri: 'http://mydomain/callback.html'
});
SC.connect().then(function() {
// Follow user with ID 3207
SC.put('/me/followings/3207');
});
</script>
</head>
<body>
<img onclick="SC.connect()" src="http://connect.soundcloud.com/2/btn-connect-sc-l.png">
</body>
</html>
Any help would be appreciated!
Try doing this:
<script type="text/javascript">
SC.initialize({
client_id: "551f515f1sa1f51sa51f65sa165",
redirect_uri: "http://mydomain/callback.html",
scope: "non-expiring"
});
function SC_login()
{ SC.connect(function() {
SC.get("/me", function(me) {
/* Follow */
SC.put('/me/followings/215527712');
});
});
}
</script>
and on your image
<img onclick="SC_login()" src="http://connect.soundcloud.com/2/btn-connect-sc-l.png">
Also, could you post your callback.html so I could take a look at it?
In node-webkit, call from iframe javascript to parent javascript doesnt work for me.
I am trying to launch a link in the iframe on the default browser as a result
I want to call a function in the parent window so as to call:
gui.Shell.openExternal("link");
Any help is appreciated. Thanks in advance.
What you want to do, is to intercept links in the internal frame.
Here we have an iframe where all links will open in the default browser, not in the Node WebKit context. I hope this helps.
Try this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.gui = require('nw.gui');
handleLinks = function(event)
{
var href;
function checkLinks(element)
{
if (element.nodeName.toLowerCase() === 'a')
{
href = element.getAttribute('href');
if (href)
{
gui.Shell.openExternal(href);
// important, prevent the default event from happening!
event.preventDefault();
}
}
else if (element.parentElement)
{
checkLinks(element.parentElement);
}
}
checkLinks(event.target);
};
function isLoaded()
{
// let's see if the iframe has finished loading
var iframe = document.getElementById('myframe');
if (iframe && iframe.contentWindow && iframe.contentWindow.document &&
iframe.contentWindow.document.body &&
iframe.contentWindow.document.body.innerHTML)
{
//now deal with links
iframe.contentWindow.document.body.addEventListener('click', handleLinks, false);
}
else
{
// not yet, let's wait a bit and try again
setTimeout(isLoaded, 300);
}
};
</script>
</head>
<body>
<iframe id="myframe" src="http://www.google.com" onLoad="isLoaded();" style="width: 100%;" seamless="true" nwdisable nwfaketop></iframe>
<div>
Links in the normal browser should still work in the Node Webkit environment.
</div>
<footer>
Whaddayaknow
</footer>
</body>
</html>
I keep getting an error while trying to use the Javascript SDK for a simple login flow. I must be doing something wrong, but cannot figure it out. I'm just trying to redirect a user after they accept the app.
Here is what is happening:
User clicks login button, the app dialogue appears (with correct permissions). They approve the app, then the popup hangs on a blank page with this url: https://www.facebook.com/dialog/permissions.request.
However, the app is approved, and if I click out of the dialogue and click the login button again, i am correctly redirected, and the app is installed.
Here is my code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/functions.js" type="text/javascript">
</script>
<link type="text/css" href="style/style.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>
</head>
<body>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : 'my_app_id', // App ID
// Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional init code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
$('.submit_button').attr("href","gameurll").removeAttr("onClick");
}
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Facebook Login Function
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
window.location = "gameurl";
} else {
// cancelled
}
}, {scope:"publish_actions,email,user_relationship_details"});
}
</script>
<a class="submit_button" href="" onclick="login();" >Login</a>
</body>
</html>
Thanks in advance for your help