I just created an app on facebook to use Audience Network. I want to monetize my website. I placed the code on my site exactly as it appears in the github docs for banner display ads.
I included the SDK in the page exactly as it appears in this doc (replaced with my APP ID)
https://developers.facebook.com/docs/javascript/quickstart
And the code I'm using for the ad placement is taken exactly from facebook's github repo.
When I load the page I get an error in the console:
"Audience Network error (1003) SDK version not supported". No ads are showing up.
Made a little test page so you guys can see what I'm talking about. Notice how the like and share buttons work (meaning the SDK works correctly if I'm not mistaken?)
https://somiibo.com/app/ads/sidebar/ad1.html
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1490948314307293',
xfbml : true,
version : 'v2.10'
});
FB.AppEvents.logPageView();
};
(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'));
</script>
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>
<h3>Facebook Audience Network for Mobile Web</h3>
<hr/>
<h3>Banner Demo (300 x 250)</h3>
<br/>
<div style="display:none; position: relative;">
<iframe style="display:none;"></iframe>
<script type="text/javascript">
var data = {
placementid: '1490948314307293_1490949464307178',
format: '300x250',
testmode: false,
onAdLoaded: function(element) {
console.log('Audience Network ad loaded');
element.style.display = 'block';
},
onAdError: function(errorCode, errorMessage) {
console.log('Audience Network error (' + errorCode + ') ' + errorMessage);
}
};
(function(w,l,d,t){var a=t();var b=d.currentScript||(function(){var c=d.getElementsByTagName('script');return c[c.length-1];})();var e=b.parentElement;e.dataset.placementid=data.placementid;var f=function(v){try{return v.document.referrer;}catch(e){}return'';};var g=function(h){var i=h.indexOf('/',h.indexOf('://')+3);if(i===-1){return h;}return h.substring(0,i);};var j=[l.href];var k=false;var m=false;if(w!==w.parent){var n;var o=w;while(o!==n){var h;try{m=m||(o.$sf&&o.$sf.ext);h=o.location.href;}catch(e){k=true;}j.push(h||f(n));n=o;o=o.parent;}}var p=l.ancestorOrigins;if(p){if(p.length>0){data.domain=p[p.length-1];}else{data.domain=g(j[j.length-1]);}}data.url=j[j.length-1];data.channel=g(j[0]);data.width=screen.width;data.height=screen.height;data.pixelratio=w.devicePixelRatio;data.placementindex=w.ADNW&&w.ADNW.Ads?w.ADNW.Ads.length:0;data.crossdomain=k;data.safeframe=!!m;var q={};q.iframe=e.firstElementChild;var r='https://www.facebook.com/audiencenetwork/web/?sdk=5.3';for(var s in data){q[s]=data[s];if(typeof(data[s])!=='function'){r+='&'+s+'='+encodeURIComponent(data[s]);}}q.iframe.src=r;q.tagJsInitTime=a;q.rootElement=e;q.events=[];w.addEventListener('message',function(u){if(u.source!==q.iframe.contentWindow){return;}u.data.receivedTimestamp=t();if(this.sdkEventHandler){this.sdkEventHandler(u.data);}else{this.events.push(u.data);}}.bind(q),false);q.tagJsIframeAppendedTime=t();w.ADNW=w.ADNW||{};w.ADNW.Ads=w.ADNW.Ads||[];w.ADNW.Ads.push(q);w.ADNW.init&&w.ADNW.init(q);})(window,location,document,Date.now||function(){return+new Date;});
</script>
<script type="text/javascript" src="https://connect.facebook.net/en_US/fbadnw.js" async></script>
</div>
<hr/>
<h3>Banner Demo (320 x 50)</h3>
<br/>
<div style="display:none; position: relative;">
<iframe style="display:none;"></iframe>
<script type="text/javascript">
var data = {
placementid: '1490948314307293_1490949464307178',
format: '320x50',
testmode: false,
onAdLoaded: function(element) {
console.log('Audience Network ad loaded');
element.style.display = 'block';
},
onAdError: function(errorCode, errorMessage) {
console.log('Audience Network error (' + errorCode + ') ' + errorMessage);
}
};
(function(w,l,d,t){var a=t();var b=d.currentScript||(function(){var c=d.getElementsByTagName('script');return c[c.length-1];})();var e=b.parentElement;e.dataset.placementid=data.placementid;var f=function(v){try{return v.document.referrer;}catch(e){}return'';};var g=function(h){var i=h.indexOf('/',h.indexOf('://')+3);if(i===-1){return h;}return h.substring(0,i);};var j=[l.href];var k=false;var m=false;if(w!==w.parent){var n;var o=w;while(o!==n){var h;try{m=m||(o.$sf&&o.$sf.ext);h=o.location.href;}catch(e){k=true;}j.push(h||f(n));n=o;o=o.parent;}}var p=l.ancestorOrigins;if(p){if(p.length>0){data.domain=p[p.length-1];}else{data.domain=g(j[j.length-1]);}}data.url=j[j.length-1];data.channel=g(j[0]);data.width=screen.width;data.height=screen.height;data.pixelratio=w.devicePixelRatio;data.placementindex=w.ADNW&&w.ADNW.Ads?w.ADNW.Ads.length:0;data.crossdomain=k;data.safeframe=!!m;var q={};q.iframe=e.firstElementChild;var r='https://www.facebook.com/audiencenetwork/web/?sdk=5.3';for(var s in data){q[s]=data[s];if(typeof(data[s])!=='function'){r+='&'+s+'='+encodeURIComponent(data[s]);}}q.iframe.src=r;q.tagJsInitTime=a;q.rootElement=e;q.events=[];w.addEventListener('message',function(u){if(u.source!==q.iframe.contentWindow){return;}u.data.receivedTimestamp=t();if(this.sdkEventHandler){this.sdkEventHandler(u.data);}else{this.events.push(u.data);}}.bind(q),false);q.tagJsIframeAppendedTime=t();w.ADNW=w.ADNW||{};w.ADNW.Ads=w.ADNW.Ads||[];w.ADNW.Ads.push(q);w.ADNW.init&&w.ADNW.init(q);})(window,location,document,Date.now||function(){return+new Date;});
</script>
<script type="text/javascript" src="https://connect.facebook.net/en_US/fbadnw.js" async></script>
</div>
You can replace sdk https://www.facebook.com/audiencenetwork/web/?sdk=5.3 to https://www.facebook.com/audiencenetwork/web/?sdk=5.5
I hope I can help you.
Related
I'm trying to post multiple facebook post on a page by using jQuery. So far I am getting success to post first facebook post but not able to post another.
What is happening?
facebook post embed url is
<div id="fb-root">
</div><script>
(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#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-post" data-href="https://www.facebook.com/ClashofClans/posts/1104473549576967:0" data-width="500">
<div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/ClashofClans/posts/1104473549576967:0">
<p>The update is finally here!!! Maintenance will start soon! Read all that's new: http://supr.cl/UpdateNotes
</p>
Posted by
Clash of Clans on
Wednesday, July 1, 2015
</blockquote>
</div>
</div>
When I append this URL directly to DIV, it calls an iframe and then complete facebook post data binds on DOM. It works very well but next time Iframe is not loading on the DOM. In console first time I found an APP error ie Invalid App Id: Must be a number or numeric string representing the application id.. I tried with correct AppId but not succeed. Below is my code what I've tried so far
$("input").blur(function ()
{
$('div').html($(this).val());
//$(this).val() is facebook post URL shown above
})
Will anyone please suggest me the correct way of doing that ?
Use the following code. It factors when the code is loaded. The answer was created using this source Working with asynchronously loaded javascript You can wrap the getLoginStatus call in a loop if you will.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<input type="text" id="message" />
<input type="button" id="send" value="Send" />
<script>
$(document).ready(function(){
function facebookReady() {
FB.init({
appId : '1521775134725984',
xfbml : true,
status : true,
cookie : true,
version : 'v2.1'
});
$(document).trigger("facebook:ready");
}
if(window.FB) {
facebookReady();
} else {
window.fbAsyncInit = facebookReady;
}
});
$(document).on("facebook:ready", function() {
$("#send").on("click", function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var body = $("#message").val();
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
}
else {
FB.login(function(){
}, {scope: 'publish_actions'});
}
});
});
});
(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'));
</script>
</body>
</html>
Here is what I'm aiming for -
When a user clicks 'Facebook' button - I'd like the text highlighted in green here:
URL - cl.ly/TlH6 - to post to their profile.
Here is the site - http://afrifacti.com
Here is what I have so far:
1 - Signed into my main facebook account - but it doesn't have the quote - the URL=>cl.ly/Tkjj
2 - Signed into my tester facebook account - it doesn't post anything - the URL=> cl.ly/TkhL
Any thoughts on why it would work with one and not the other?
Any help would be appreciated here is the code:
<script src="assets/js/lib/jquery.js"></script>
<script src="assets/js/lib/underscore.js"></script>
<script src="assets/js/quotes.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
// facebook setup
window.fbAsyncInit = function() {
FB.init({ appId: '665401243510103', status: true, cookie: true, xfbml: true });
FB.getLoginStatus();
};
(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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
var quote = null;
(function showRandomQuote() {
var randomQuoteIndex = Math.floor(Math.random() * quotes.length);
quote = quotes[randomQuoteIndex];
$("#raw-quote").text(quote.rawQuote);
$("#date").text(quote.date);
$("#author").text(quote.citation);
$("#date").text(quote.date);
$("#link")
.attr("href", quote.link)
.attr("title", quote.altText)
.text(quote.linkText);
})();
(function setupFacebookButton () {
$("#facebook-button").click(function() {
FB.ui({
method: 'feed',
name: quote.date + " quote of the day",
link: 'http://www.afrifacti.com/',
caption: quote.altText,
description: "the description",
message: quote.rawQuote
});
});
})();
</script>
-
Ry
I visited the site and saw "an error occured" when I clicked the FB button. A common reason for this to fail is that your app is in Sandbox mode, which means only developers on the project can access it.
As for the quote not showing up, try putting a "testing testing 123" type string in for message to see if that shows up in your feed box. If not then there may be a problem with quotes being defined inside showRandomQuote()
UPDATE TO BELOW: I found this post
Facebook login via Parse & Javascript
Which I changed my code to reflect as so (below_. But throwing the following error from the webpage.
Given URL is not permitted by the application configuration.: One or
more of the given URLs is not allowed by the App's settings. It must
match the Website URL or Canvas URL, or the domain must be a subdomain
of one of the App's domains.
Not sure if this is a mismatch with my App url actually in fb?
<div id="fb-root"></div>
<script type="text/javascript">
Parse.initialize("******", "********");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : '*******',
status : true,
cookie : true,
xfbml : true
});
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
};
(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));
</script>
I'm trying to add the www.PARSE.com Facebook user login code to my site.
The guide I've followed is here https://www.parse.com/docs/js_guide#fbusers
My code looks like this. When I load the page, no login page appears. I'm unsure what I'm missing? When I look at parse it seems like "user" has been created in the data browser, indicating that the look up is working in some way.
Potential issues,
1/I'm unsure if the "channelUrl" is correct? do I include channel.html ?
2/Do I need to reference java script in the header? from what I read this was not needed?
<div data-role="page" id="main_page" data-theme="a">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding="false">
Menu
<h1>Slide Menu</h1>
</div>
<div data-role="content" class="ui-content" role="main">
<!--Parse initialize codes-->
<script type="text/javascript">
Parse.initialize("XXXXX", "XXXXX");
</script>
<!--Parse initialize code end here-->
<!--FB SDK code load for page starts here-->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : 'XXXXX',
channelUrl : 'WWW.kudosoo.com/channel.html',
status : true,
cookie : true,
xfbml : true
});
};
</script>
<!--FB SDK code load for page ends here-->
<!--FB login code for page starts here-->
<script>
(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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
</script>
<!--FB login code for page ends here-->
<p>Read the documentation and start building your JavaScript app:</p>
<ul>
<li>Parse JavaScript Guide</li>
<li>Parse JavaScript API Documentation</li>
</ul>
</div>
</div>
I have been able to work out an answer to the issue myself, through alot of trial and error. The code that works for me is as follows as below.
<div id="fb-root"></div>
<script type="text/javascript"> // Initialize the Parse object first.
Parse.initialize("XXXXX", "XXXXX");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : 'XXXXXXX',
channelUrl : 'http://www.example.com/channel.html',
status : true,
cookie : true,
xfbml : true
});
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
}, error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
} });
};
(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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I'm just starting to play around with the facebook API but I can't seem to get the API to alert my email using the FB.User object. I can get it to print out my userID and my name, but it returns as undefined if I try to print out my email or my education. Here's my code:
<html>
<head>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
var appId = '1374555416100192';
var siteRoot = '';
window.fbAsyncInit = function() {
FB.init({
appId : appId,
channelURL : '///channel.html', // Channel File
status : true,
cookie : true,
oauth : true,
xfbml : true
});
$(document).trigger('fbload');
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=" + appId;
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
$(document).on(
'fbload', // <---- HERE'S OUR CUSTOM EVENT BEING LISTENED FOR
function(){
//some code that requires the FB object
//such as...
FB.getLoginStatus(function(res){
if( res.status == "connected" ){
FB.api('/me', function(fbUser) {
alert(fbUser.name + " " + fbUser.email);
});
}
});
}
);
</script>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1">Start w/ Facebook</div>
</body>
</html>
You need email permission to access it
Change this line
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1">Start w/ Facebook</div>
As below and check (Added data-scope="email")
<div class="fb-login-button" data-scope="email" data-show-faces="true" data-width="200" data-max-rows="1">Start w/ Facebook</div>
To explain, I'd like for a link to only become available for clicking once visitors have 'Liked' my website (not my Facebook page - the actual website). I've been trying to do it using this code:
<script>
FB.Event.subscribe('edge.create', //FB.event.subscribe attaches a handler to an event and invokes your callback when the event fires.
function(response) { //This is where the response function is inserted, I used document.write for this example
document.write(';This is the HTML I want to display');
}
);
</script>
But even after I like my website the link doesn't display. I hope I've been as clear as possible, any help would be greatly appreciated.
I managed to get it working after some thinking and playing around:
<!-- FB Javascript SDK -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'APP-ID',
channelUrl : '//WWW.WBESITE.COM/channel.html', // Channel File
status: true,
cookie: true,
xfbml: true,
oauth: true,
});
// Additional initialization code here
FB.Event.subscribe('edge.create', function() {
window.location.href = "http://WEBSITE.COM/";
});
};
// 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));
</script>
<!-- More FB Javascript SDK (Like Button) -->
<div id="fb-root"></div>
<script>
(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/all.js#xfbml=1&appId=APP-ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="//connect.facebook.net/en_US/all.js#xfbml=1">
</script>
The FB.Event.subscribe needed to be placed within the window.fbAsyncInit function. I then made it so that instead of having the HTML appear after the 'Like' button had been pressed it simply redirected it using the window.location.href = "http://WEBSITE.COM/"; to a page that has the new link included on it. The document.write function wasn't working because it would get rid of all the HTML on the page other than what was included in the function.
The code above needs to be placed just after the opening tag and then you can place the code for the 'Like' button:
<div class="fb-like" data-href="http://WEBSITE.COM" data-send="send" data-layout="button_count" data-width="450" data-show-faces="true"></div>
Anywhere that you would like on the page!