Whenever I add the following code to a page of my website (https://traineeshipondernemen.nl/blog), some special characters start to misbehave. Ik have added two screen shots below to illustrate the problem.
The website is build with Bootstrap (4.3.1). Only html, css and Javascript.
Strange enough, the problem only occurs when I upload the file to the servers. When I run the site on my computer (local) everything looks fine.
<!-- Facebook Pixel Code -->
<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', '376622943264914');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=376622943264914&ev=PageView
&noscript=1"/>
</noscript>
Page without Facebook Pixel
Page with Facebook Pixel - textual changes are highlighted
This is the solution. Thanks CBroe!
Some sort of problem with character encoding, characters in UTF-8 getting interpreted as something else. validator.w3.org/nu/… lists “The character encoding was not declared. Proceeding using windows-1252” as first error. You have in there, but it comes after the tracking pixel codes - try and put it before, and see if that changes things.
Related
I have a website made in flutter web
that works very well
I recently decided to insert a facebook tool
the facebook Pixel
I used the code provided by facebook to insert on my website
I edited the index.html file and inserted the tags inside the head
<!-- Facebook Pixel Code -->
<script>
var ran = false;
!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');
if (rotated == false) {
rotated = true;
fbq('init', '########');
}
console.log(fbq);
fbq('track', 'PageView');
</script>x
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=########&ev=PageView
&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
Now I'm using an extension (Facebook Pixel Helper) to check if the installation is correct
And receive the following message
“The Facebook pixel activated 2 times on this web page, which can cause errors in your event tracking.”
Would anyone know how to solve this, when using flutter ?
If it is possible to use this tool in flutter web site
I would like to send custom event data into my Facebook pixel whenever a lead is processed through one of my zaps.
Since some of my leads come through messages there isn't a good way to track this information in the pixel.
I was hoping to use the code by Zapier tool to trigger the Facebook pixel script along with event tracking parameters. When I go to set this up though it doesn't work. Can you provide me any help on how I can get a zap to ping the FB pixel?
All I've tried so far is just pasting the pixel and event parameters into the code block. My expertise does not go beyond this lol. I have removed my pixel ID from the code below.
<!-- Facebook Pixel Code -->
<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');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=PIXEL&ev=PageView&noscript=1"
/></noscript>
<script>
fbq('track', 'CompleteRegistration');
</script>
David here, from the Zapier Platform team.
First off, just dropping that code block into a Code step won't work since it is html code (that runs JS in the browser window). Code steps are Node.js, which is mostly similar but different enough that this isn't going to work.
You'll have less control, but I think what will work is doing a GET request (using a webhooks action) to https://www.facebook.com/tr?id=PIXEL&ev=PageView&noscript=1, which is what happens when javascript has been disabled. I'm not sure what exactly gets tracked, but it'll be better than nothing.
That said, this seems like a great use case and it's probably worth writing into contact # zapier . com to request this as a feature. It's likely others have also wanted this and/or there's a workaround I'm not aware of.
I have a fairly simple jQuery mobile app, which works fine as a web app (tested in browsers on desktops/smartphones) but when porting it to android using phonegap, I have one major issue. It occurs both on a real phone and in an AVD.
there's a form in the app, like:
<div data-theme="a" data-role="dialog" id="a-form">
<div data-role="content">
<h3>...</h3>
<form action="http://a-live-site.com/a-form.php" method="post">
...
<div data-role="fieldcontain">
<button type="submit">Submit</button>
</div>
</form>
</div>
</div>
Its response content loads perfectly in the browser (the action is a relative link there), but within phonegap I just get a white screen and the hardware back button exits the app instead of the usual step back in history. The puzzling thing is that the request actually gets through. The server side code triggers an email, so I know the server is getting the request. I have added the appropriate <access /> rules in the phonegap.xml file, but I'm not sure that's enough.
EDIT: the form is in static content so, in phonegap, it's loaded by file:// and shouldn't have cross-domain issues.
The problem was due to data-role="dialog" in the result. Using page fixed it. It only broke in phonegap and phonegap's logs made it look like it was something else. A real PITA.
Hey guys, I have developed a small site that i would like to embed into a tab on a facebook page.
Previously I used this code to load in an iframe, it worked great:
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Link 1</a> | <a class="red" onClick="outside_location.setInnerFBML(link_2);" style="cursor: pointer;">Link 2</a>
<div id="outside_location"></div>
<fb:js-string var="link_1"><fb:iframe width="760" height="1280" frameborder='0' src='http://www.WebWhispers.in' /></fb:js-string>
<fb:js-string var="link_2"><fb:iframe width="760" height="1280" frameborder='0' src='http://google.com/' /></fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = d
document.getElementById('outside_location');
</script>
However, it has stopped working. I dont think facebook allows iframe inside of pages, only applications.
How can I load this page in without learning FBML? The site uses Jquery so I cant use FBML anyway.
I know applications can use iFrames, can I make it an application and then embed the application into a page tab somehow?
No. Tab pages can not contain iFrames. They must be written using FBML and FBJS.
One reason for this is that Facebook does not want to enable Tab pages to detect who looks at them. All requests (including images) on tab pages are proxied through Facebook for this reason. If iframes were allowed then the application would be able to detect who looked at it, which would present a privacy issue for Facebook users.
This is either a policy change by Facebook or, more likely, a bug. I say it's unlikely to be a policy change as it throws a script error, whereas a policy change would more likely strip the code out before it's rendered.
There's a bug report you can add votes to and follow here.
I'm writing a Facebook iframe/Facebook Connect application and one of the pages includes a multi-friend-selector. It renders perfectly in every browser I tried (FF/Mac, Safari/Mac, IE8/Win) but does not render at all in IE7/Win. I waited and waited (in case it was just being slow) and it never appeared.
Here's my code.
<fb:serverfbml style="width:750px;height:700px">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action="<? echo $invite_href; ?>"
method="post"
type="<? echo $app_name; ?>"
content="<? echo htmlentities($content,ENT_COMPAT,'UTF-8'); ?>">
<div class="clearfix" style="padding-right:20px;" height="500" width="750">
<fb:multi-friend-selector
actiontext="Here are your friends who don't have <? echo $app_name; ?> yet. Invite your friends and let them help too - it's free!"
exclude_ids="<? echo $friends; ?>" />
</div>
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
The other required things (FeatureLoader.js and all that) are (must be) properly included, since the friend selector and every other fb tag I use around the application works perfectly. The serverfbml tag is the ONLY thing giving me trouble in IE7. Most people seem to have a problem with the selector rendering at an annoying 150px tall - I can't seem to find anyone else who has a problem with it not rendering at all.
You do not need the closing tags because you're rendering FBML insdie the serverfbml tag, not xfbml. Another thing I noticed is you're passing PHP variables into it, whereas I'm pretty sure Facebook strips out all your php from within the server fbml, I may be wrong though.
Daniel
Another SO post, which solved my problem: Why does this XFBML markup embedded within an iframe'd facebook application not display anything?
Are you using IE Tester to test ie6? If so it fails to render, this is an IE Tester bug.
Facebook is encouraging developers to switch to Requests 2.0. FBML is being deprecated and so reliance on fb:serverFbml will likely by phased out at some point this year. Fortunately there is a MUCH easier way to do this using the JavaScript SDK and it even works on websites.
FB.ui({method:'apprequests',...});
Learn more about using this here: http://af-design.com/blog/2011/02/17/using-facebook-requests-to-promote-a-website/