I've been looking for an up-to-date walkthrough of including Facebook's comments plugin in GA's social tracking system. There are a few tutorials available but all are dated and don't seem to work. Does anyone here have any suggestions?
Specifically, I'm trying to get the GA asynchronous tracker (ga.js) to report comments left with Facebook's XFBML version of the comments plugin. Any help would be appreciated.
Here's what I've done so far, though it doesn't appear to work:
Added this to the ga_social_tracking.js provided by Google:
FB.Event.subscribe('comment.create', function(opt_target) {
_gaq.push(_ga.getSocialActionTrackers_('Facebook', 'Comment',
opt_target, opt_pagePath));
});
FB.Event.subscribe('comment.remove', function(opt_target) {
_gaq.push(_ga.getSocialActionTrackers_('Facebook', 'Uncomment',
opt_target, opt_pagePath));
});
Added xmlns:fb="http://ogp.me/ns/fb#" to the document's opening .
Linked to that document in the page :
<script src="/includes/ga_social_tracking.js"></script>
Have installed the Facebook JavaScript SDK immediately after
<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=<MYAPPID>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')
);
</script>
Called the Facebook comments plugin via the XFBML method, adding _ga.trackFacebook and notify="true":
<script type="text/javascript">_ga.trackFacebook();</script><fb:comments href="http://example.com" width="450" num_posts="10" notify="true"></fb:comments>
Clearly I've done something wrong here as comments are not tracking in GA's Traffic Sources/Social/Plugins reports, though Facebook Like/unlike, Twitter and even LinkedIn (after customization) are working.
Any help would be greatly appreciated. Thank you.
Related
I started blogging on free wordpress platform and I wanted to add official twitter widget to my blog.
I add following code as text widget to blog's side bar in twenty fourteen theme.
<a class="twitter-timeline" href="https://twitter.com/Menuka_cs3" data-widget-id="695529194466504704">Tweets by #Menuka_cs3</a>
<script>
! function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
but it look like this
what I was able to detect when I save the widget it lost it's <script> tags so it just show the content letters. Here is what I get when I save the widget
<a class="twitter-timeline" href="https://twitter.com/Menuka_cs3">Tweets by #Menuka_cs3</a> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
Please help. Thanks
I think you are trying to add code javasript in text widget of WordPress.com blogs. You can't.
Users are not allowed to post JavaScript on WordPress.com blogs.
JavaScript can be used for malicious purposes. As an example,
JavaScript has taken sites such as MySpace.com and LiveJournal offline
in the past. The security of all WordPress.com blogs is a top priority
for us, and until we can guarantee scripting languages will not be
harmful, they will not be permitted.
JavaScript from trusted partners, such as YouTube and Google Video, is
converted into a WordPress shortcode when a post is saved.
https://en.support.wordpress.com/code/#javascript
But if you are in WordPress.com VIP, and need to embed your Twitter timeline, you could follow this post How To Embed a Twitter Timeline Widget.
When Wordpress saves the content, it filters it because it thinks its text, not code. One possible solution is to create a shortcode like this:
Open you theme/functions.php file and paste this at the end
function twitter_shortcode( $atts) {
$twitter = '<a class="twitter-timeline" href="https://twitter.com/Menuka_cs3" data-widget-id="695529194466504704">Tweets by #Menuka_cs3</a>
<script>
! function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>';
return $twitter;
}
add_shortcode( 'twitter', 'twitter_shortcode' );
Then, on your post you call the shortcode:
[twitter]
Please note that this function is completely untested but was taken from the official wordpress page at:
https://codex.wordpress.org/Shortcode_API
Try this code
<a class="twitter-timeline" href="https://twitter.com/Menuka_cs3" data-widget-id="710522346977824769">tweets by #Menuka_cs3</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
the facebook share button doesn't work anymore on my website. If I click on it, the facebook popup shows this error:
I've read this question, but the problem is that I don't have any Facebook App. Also, in the source code there isn't any reference to any AppID
My website is: this
Thanks for any help
First you need to create the app , after creating you need to write the following code in the page you need to share
<body>
<script>
window.fbAsyncInit = function() {
//SDK loaded, initialize it
FB.init({
appId : 'your-appid',
xfbml : true,
version : 'v2.5'
});
};
//load the JavaScript SDK
(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>
<!-- Your code here -->
</body>
Note: It is better if you place facebook connect code inside the
<body> tag as i did
<p>
<a rel="nofollow" target="_blank" class=" facebook ">Share</a>
</p>
jQuery(document).ready(function($) {
jQuery('.facebook').click(
function(){
FB.ui(
{
method: 'share',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},//For checking the response you can use
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
)
});
}
);
then you need to make this app live ,for this go to your developer account on facebook (https://developers.facebook.com/) .select your app -> go to App Review -> then make yes in
Do you want to make this app and all its live features available to
the general public?.
Note : Don't forgot to give email in settings->contact email
I'm trying to use Facebook comments (https://developers.facebook.com/docs/plugins/comments). The problem is they only load when a page is refreshed, so if I come from any other route I get nothing loaded. I make the call in template.rendered, which is properly executed when I arrive at the page, both when refreshed and from another route. What may be causing this behaviour? I tried to debug this, but there's nothing I can see, nothing I've tried worked. Cheers.
PS: As requested in the comments - Fb function is a generic one, wrapped up like this:
function loadFbComments() {
(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_GB/sdk.js#xfbml=1&appId=694645587257406&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
I call it in Template.rendered:
Template.item.rendered = function(){
loadFbComments();
}
HTML:
<div class="fb-comments" data-href="http://developers.facebook.com/docs/plugins/comments/" data-numposts="5" data-colorscheme="light"></div>
Router:
Router.route('/item/:_id', function () {
this.render('Item', {
path: '/:permalink',
data: function(){
var permalinkVar = this.params.permalink;
return Items.findOne({permalink: permalinkVar});
},
});
});
This is really just the standard code, I guess the issue is to do with Iron Router, but it's just a guess.
I've ended up loading entire comments section into another template that then is loaded once in layout template (my main template). I use the comments in a modal anyway, so it's hidden by default. This worked for me.
You need to reload the template that contains fb comments.
You can do this using tracker dependency or updating a session variable for example.
how to make a meteor template helper re-run/render after another template has rendered?
i have been trying to get the Facebook SDK for JavaScript working on my wordpress website for a few days now but it keep failing for some reason
i followed the exact steps on this page https://developers.facebook.com/docs/javascript/quickstart/v2.2
i got it to work yesterday (the like button showed up in my header) but when i refresed the website today it was gone and the SDK code stopped working.
i have no idea how it happend since i didn't change anything on the website so i redid the whole thing but without results.
this is how most of my header.php (where the code is suppose to be) looks like
</head>
<body <?php body_class(); ?> data-layout="<?php echo esc_attr( stag_site_layout() ); ?>">
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.1'
});
};
(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>
<?php
/**
* Aesop Story Engine theme hook.
*
* #since 1.1.0
*
*/
do_action('ase_theme_body_inside_top');
?>
<div
class="fb-like"
data-send="true"
data-width="450"
data-show-faces="true">
</div>
as you can see the code is directly below the body code. and below that the facebook like code, but it's not working...
if anyone could help me with this than that would be really great.
Thanks!
You need to create a new App ID here:
https://developers.facebook.com/docs/opengraph/getting-started#create-app
Choose "Website" as the platform.
Once you create a new app, you will see your unique code for "appID". In your code above where it says "your-app-id", place in your new unique code.
Also, your code can be updated to v2.3:
https://developers.facebook.com/docs/javascript/quickstart/v2.3
I am trying to implement Facebook Connect functionality into a website that I am working on. The site uses ASP.NET, a master page that wraps every existing page (including my login page) and Ajax Control Toolkit for some controls. I am using JavaScript SDK functions as the Facebook Documentation dictates.
Here is the code to call Facebook API:
`<div id="fb-root">
</div>
<script type="text/javascript">
(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_GB/all.js#xfbml=1&appId=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>`
And here is the code that supplies users an entry point to Facebook Login with an anonymous JavaScript function:
<input type="button"
onclick=" FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
FB.logout(function(response) {
console.log('Logged out.');
});
});
}
else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});" value="Login Facebook" />
The problem is that I get an exception saying that window.open is not a function but a property of the object and the Facebook Login dialog won't appear (The exact exception message is as in the title). I don't understand where this error comes from. I have been dealing with this problem for a day and now I have got desperate about solving it. Is there a way to find the source of problem? Can you please help?
Thanks in advance.
Note: The weird thing is that it works when I create a new page without using the Master Page and migrate all the Facebook calls to the new page.
Thanks to everyone who took a look at the question.
Fortunately, I could spare some more time to solve the problem and I found where this error is reasoning from. It turns out that another developer declared a variable open = false; in one of the included JavaScript files without using the "var" keyword. Therefore, it overrode the existing "window.open" function and prevent it from functioning properly. All I had to do was changing the declaration to var open = false;.
Neither I was experienced enough to notice it quickly nor JavaScript is that advanced to keep developers away from making such mistakes. So that led me to this mess :)
Your appId is not specified in the JS SDK loading code. It's easy to overlook that it would need to be replaced as it is hidden.
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=APP_ID";