I have created my first Facebook app, which allow posting updates on my page. The version of my facebook App is v2.4. I then created a test web page with ASP.NET and use Facebook Javascript SDK to try posting a test update on my page. It opened a prompt for login and redirect to an empty popup page after I clicked login.
The followings are the codes I used:
<body>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: '[my-app-id]',
xfbml: true,
version: 'v2.4'
});
};
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) { return; }
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function myFacebookLogin() {
FB.login(function () {
FB.api('/114690815550304/feed', 'post', { message: 'Hello, world!' });
}, { scope: 'publish_actions' });
}
</script>
<div>
<asp:Button ID="PostButton" CssClass="buttonM1 bGreen" runat="server" Text="Post To Facebook Page" OnClientClick="myFacebookLogin();" />
</div>
</body>
Would anyone tell me what's wrong with it?
My facebook App does work on Graph API 2.0 and did successfully post an update on my page through Graph API.
The testing web page I created is also a Https, and is updated into my Facebook App's site URL setting.
Thanks in advance for any help.
Related
I'm trying to embed Facebook and Twitter feeds on a Nuxt website. Unfortunately, when I deploy it to Netlify, the place the feeds should be is totally blank. It works on the dev server. Here is the code that I am using:
<template>
<div class="w-auto">
<div class="fb-page w-auto h-auto"
data-href="https://www.facebook.com/x/"
data-tabs="timeline"
data-width="500"
data-height=""
data-small-header="false"
data-adapt-container-width="true"
data-hide-cover="false"
data-show-facepile="true"
>
<blockquote cite="https://www.facebook.com/x/"
class="fb-xfbml-parse-ignore"
>
<a href="https://www.facebook.com/x/">
Company Name
</a>
</blockquote>
</div>
</div>
</template>
This is just using the Facebook page plugin found here:
https://developers.facebook.com/docs/plugins/page-plugin/
I think that the problem is with how I have added the script:
<script>
export default {
name: "facebook",
data () {
return {
isFBLoaded: false
}
},
head () {
return {
script: [
{
type: 'text/javascript',
id: "fb-root",
src: 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v10.0',
crossorigin: "anonymous",
nonce: "x2a8MRt9",
// Changed after script load
callback: () => { this.isFBLoaded = true }
}
]
}
}
}
</script>
It only appears to load when I hit the refresh button.
This solution may be helpful: https://stackoverflow.com/a/39546590/8816585
Something like this
created() {
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
Otherwise, try out vue-facebook-page, it can be used with Nuxt too. The repo is a bit old but probably still working great.
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...
I have implemented google recaptcha 2 in footer and welcome pop up. When I browse home page, the captcha loads but when I click any link, the catpcha disappears from footer. This happens in all clicks through out whole site.
Here is snippets I have implemented:
This code goes under head tag:
<script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>
HTML Part:
<div class="field" id="google_recaptcha_container1">
<div id="g-recaptcha1" class="g-recaptcha1" data-sitekey="<?php echo $siteKey ?>" >
</div>
</div>
" >
<script type="text/javascript">
var myCallBack = function () {
//Render the recaptcha2 on the element with ID "recaptcha2"
var recaptcha1 = grecaptcha.render('g-recaptcha1', {
'sitekey': '<?php echo $siteKey; ?>', //Replace this with your Site key
'theme': 'light'
});
var recaptcha2 = grecaptcha.render('g-recaptcha2', {
'sitekey': '<?php echo $siteKey; ?>', //Replace this with your Site key
'theme': 'light'
});
};
Note: This works fine for the first time when page loads but it doesn't if you refresh by clicking refresh button or click any link.
Please suggest.
Thanks in advance.
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
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.