Facebook SDK init creating a second pixel - facebook

Two pixels are being initialized on my website even though I have only initialized one pixel. I've pin pointed the second pixel being initialized to the appId that is being used to initialize the Facebook SDK for Facebook login. How do I stop that second pixel from being initialized. According to this and this, having multiple pixels on one webpage is not a good idea. Below are the details of what I am doing.
I am initializing a facebook pixel in my header using the standard facebook pixel code below
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '{pixel-id}');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id={app-id}&ev=PageView&noscript=1"
/></noscript>
This works fine and initializes the pixel fine. The issue is that when I initialize facebook login with my app ID, it creates another pixel, but this time it is with my app ID as the pixel ID. I am checking this through the pixel helper for facebook.
I initialize it with the following code:
(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 = 'https://connect.facebook.net/en_US/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = () => {
FB.init({
appId: '{app-id}',
autoLogAppEvents: true,
xfbml: false,
version: 'v2.12'
});

The issue is that when I initialize facebook login with my app ID, it creates another pixel, but this time it is with my app ID as the pixel ID.
That would be the effect of
autoLogAppEvents: true,
in your FB.init call to initialize the SDK. Remove that, then the additional, unwanted pixel should be gone as well.

Related

How to load facebook page plugin with react

It is highly ironic that there are no react facebook plugins...
I want to show the facebook page plugin on my site (built in React) but nothing shows.
I have the default javascript jargon (I added async to no avail):
<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.async=true;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.6&appId=";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
And the normal page plugin in the render of my react component:
<div className="fb-page"
data-href="https://www.facebook.com/facebook/"
data-tabs="timeline"
data-width="500"
data-height="400"
data-small-header="true"
data-adapt-container-width="true"
data-hide-cover="false"
data-show-facepile="false">
<blockquote className="fb-xfbml-parse-ignore"
cite="...
</div>
How can I get this to load async?
The sdk invokes a function after it finished loading the script, called fbAsyncInit:
window.fbAsyncInit = function () {
FB.init({
appId: '82195',
xfbml: false,
version: 'v2.6'
});
document.dispatchEvent(new Event('fb_init'));
};
As is show, I dispatch an event when the callback is called; as it indicates that the SDK is loaded. Since the problem is that react loads and executes before the sdk, a listener can be added to the component which can then load the FB plugin when notified:
componentDidMount() {
document.addEventListener('fb_init', e => FB.XFBML.parse());
}
This is what you need: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse
For example:
componentDidMount() {
FB.XFBML.parse();
}
componentDidUpdate() {
FB.XFBML.parse();
}
Better give it an ID though, or it will check the whole document for Facebook Plugins. Of course you have to make sure that the JavaScript SDK is loaded already, or "FB" will be undefined. You could implement a timer that checks for the availability of "FB" until it´s available (bad idea), or just load the component later - when the JS SDK is loaded for sure.
More information about checking when the JS SDK is loaded: http://www.devils-heaven.com/facebook-javascript-sdk-login/

Facebook Embed API Multiple Photo Post

When using Facebook's Embedded Posts API, any post that has multiple photos on it is not rendering correctly when the user is logged in to Facebook. Everything shows up fine if no user is logged in. I have tested this in both Firefox (v43.0) and Chrome (v47.0.2526.80 m) and it happens in both places.
Here is the html I'm testing with, in the body (I obviously replaced the app-id with my app-id. The first post has multiple images, the 2nd only has one. When not logged into facebook both posts render correctly. After logging into facebook, the first post fails to render and leaves a blank space on the page, the second still renders correctly.
<div>
<div class="fb-post" data-href="http://facebook.com/106536536125/posts/10153158906711126" data-width="400"></div>
<div class="fb-post" data-href="http://facebook.com/106536536125/posts/10153157143376126" data-width="400"></div>
</div>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'your-app-id',
xfbml: true,
version: 'v2.5'
});
};
(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>
Is this a bug in the embed code for Facebook posts, or is there something I can do to fix it?
I filed a bug report with Facebook and they confirmed this is a bug and they're starting to work on it.

Facebook comments not working on Wordpress

I added Facebook Comment Box to my site manually. I created an app and pasted the code on my template files.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '730627806953221', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(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>
Then I added this:
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="430" style="max-width: 100%;"></div>
It seems to work, when a user comments it displays correctly. However when I try to reply to someone who left a comment it doesn´t stay there. I´m trying to reply as a brand not as myself.
Why could this be?

Facebook shows blank screen after login (facebook js api)

<body>
<script>
// Facebook Init
window.fbAsyncInit = function() {
FB.init({
appId : '...MYID...', // App ID
channelUrl : 'channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
};
</script>
<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/de_DE/all.js#xfbml=1&appId=...MYID...";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="player"></div>
<div id="main">
<div id="facebook" style="height:30px;">
<div class="fb-like" data-href="http://www.MYURL.com/about" data-send="true" data-width="450" data-show-faces="true"></div>
</div>
Can somebody help? I am php programmer myself and just stuck with JS... I also considered the Php api, but actually it used to work, now it hangs all of sudden.. not sure what I did :(
Thanks!
Please see the Facebook developer site. It would be a good place to track as this is possibly not you. I'm having the same issue and I'm using FBML tags and not iFrame or HTML5.
https://developers.facebook.com/bugs/347759798609016
Something else to try is to try logging in, kill that window, then refresh the page. For me at least the "Like" button works after the refresh. So the login is successful, but the response from Facebook isn't.

Cannot set ref on like button

Im trying to add a like button to my web app that is currently in development on localhost.
Ive set the ref attribute for fb:like and whilst i can like my websites page and see it in on my test-users facebook wall, the link posted does not contain any params such as fb_ref etc. Even clicking the link and checking my servers logs shows no params were sent.
I dont know what im doing wrong. Due to extensive testing facebook requires me to "confirm" I want to like something each time I click on the like button (a measure to thrwart spammers I believe). Does that have anything to do with it? I also turned on sandbox mode.
here is the button
<fb:like href="localhost:3000" ref="atrackingcode" send="false" show_faces="false" width="450" class=" fb_edge_widget_with_comment fb_iframe_widget"></fb:like>
here is the sdk intialization
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'SECRET-SO-BOO-HOO',
channelUrl : '//localhost:3000/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>