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?
Related
I'm trying to add the Facebook support chat module to my site using Google Tag Manager.
The code that I'm using is generated by Facebook and all I'm doing is copying it straight to Google Tag Manager, so I'm not sure why it's not working...
It keeps giving me this error:
"Invalid HTML, CSS or JavaScript found in template"
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.2'
});
};
(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/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="XXXXXXXXXXX"
theme_color="#111111">
</div>
I assume you added given code in a Custom HTML GTM Tag, in which case, plain HTML won't work (<div class="fb-customerchat" [...]</div>). Therefore, given code must be converted to javascript in order to work.
I'd follow the GTM documentation and make use of User-defined (Constants) Variables to store parameters or any string / value. (Optional, it will work with hardcoded values such as var page_id = '0123456789';)
In below example, I mixed both methods for better understanding.
<script>
(function() {
// Sample variables
var page_id = '{{FB - PageID}}';
var ref = '';
var theme_color = '{{FBChat - ThemeColor}}';
var logged_in_greeting = 'Your greeting message for logged in users'; // Can be a Custom Constant Variable Sting
var logged_out_greeting = 'Your greeting message for logged out users'; // Can be a Custom Constant Variable Sting
// Do not edit
var el = document.createElement('div');
el.className = 'fb-customerchat';
el.setAttribute('page_id', page_id);
if (ref.length) {
el.setAttribute('ref', ref);
}
el.setAttribute('theme_color', theme_color);
el.setAttribute('logged_in_greeting', logged_in_greeting);
el.setAttribute('logged_out_greeting', logged_out_greeting);
document.body.appendChild(el);
})();
// Facebook SDK for JavaScript : https://developers.facebook.com/docs/javascript/quickstart
window.fbAsyncInit = function() {
FB.init({
appId : '{{FB - AppID}}',
xfbml : true,
// autoLogAppEvents : true,
version : 'v3.3'
});
// autoLogAppEvents replacement with logPageView
FB.AppEvents.logPageView();
};
// Customer Chat SDK : https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk#install
(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/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Google Tag Manager uses a tool (Closure Compiler) that checks Javascript for validity. Unlike a browser, which will usually just ignore non-standard attributes, the linter in the Closure Compiler is pretty strict and balks at stuff it does not understand (my educated guess is that has to - CC tries to optimize Javascript to run faster, and if it does not understand what a part of your tag does it cannot optimize).
So if you get this warning, first check for bits that are not standard HTML. Like it was pointed out in the other answer, attributes like "attribution" and "page_id" and "theme_color" are good candidates. You would need to remove them one after the other to see if you can deploy your tag then, and then hope your chat will still work.
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>
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.
My goal is to have dynamic Facebook like buttons using a php variable in the url. I figured I'd first just try inserting a static like button to test it out, but I'm encountering some issues. When I first loaded the page, after inserting the FB code, the like button displayed correctly. Though, every time after that it just displays a white box, the size of the like button content, which flickers, then disappears.
My situation may be unique as this is a wordpress site, but I don't use any of the wordpress features, such as the post loop, or any design layout features. I just use wordpress to publish posts, which get forwarded to my own database, and I display them with my own code.
Right after <?php get_header(); ?> in my index.php, I've put:
<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_GB/all.js#xfbml=1&appId=293105884122762";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then in a random place on the site I've put:
<fb:like href="mysite.com" send="false" layout="button_count" width="450" show_faces="true"></fb:like>
I know I need to add the XML namespace for IE, but I figured it wasn't necessary yet.
If anyone has any suggestions, I'd really appreciate them.
include the below lines of code on the page where your like button is:
<script>
if (typeof(FB) != 'undefined' && FB != null ) {
FB.XFBML.parse();
}
</script>
hope it helps. this had solved my very similar problem.
The Facebook code just runs inline, so if it isn't included at the bottom of the page, you have to call FB.XFBML.parse() to re-parse the page HTML looking for <fb:/> tags. Another option would be to either place this javascript at the bottom of the page, or better yet use a hook in your functions.php to include it in wp_footer.
<?php
// this function will output the facebook javascript code
function add_facebook_javascript(){ ?>
<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_GB/all.js#xfbml=1&appId=293105884122762";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<?php
}
// this will hook your function to the "wp_footer" action
add_action('wp_header', 'add_facebook_javascript');
?>
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";