Disqus comment count not working - javascript

I installed Disqus manually in a WordPress theme (didn't work at all via the plugin). It works fine, but I'm having trouble displaying the comment count.
I think I'm doing a lot of things right tough:
The link on the /blog/ page looks as follows:
<i class="fa fa-comment"></i> 0
The comments.php:
<?php if (comments_open()) : ?>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'myshortname'; // Required - Replace example with your forum shortname
var disqus_identifier = 'dq-<?php echo get_the_ID(); ?> ';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
alert(disqus_identifier);
</script>
<noscript>Please enable JavaScript to view the comments.</noscript>
As you can see I'm alerting the disqus_identifier and therefore can verify it's being set correctly (in this case dq-332 as above)
And I am loading the count.js globally with
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'myshortname'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
I only got it working under one (faulty) circumstance:
Before I tried it with the data-disqus-identifier it worked by appending #disqus_thread to the permalink without trailing slash, so e.g. http://mydomain.com/the-post-title#disqus_thread
The problem with that was that comments there wouldn't show up in http://mydomain.com/the-post-title/ and http://mydomain.com/the-post-title/#disqus_thread (same with the trailing slash, as generated by WordPress everywhere).
That's why I ended up with the identifier approach after all. Which doesn't have any effects so far. Would be happy about any type of hint. Cheers!

Was not able to solve it this way. Spent some more time investigating why the WordPress plugin didn't work. Worked it out in the end.
Note: you shouldn't have any relative URL plugins activated with disqus.

Related

Why does '&page' in my Javascript code show up as '&amp;page' in web browser

This is my script and it's being placed in the header internally on the html document:
<script type="text/javascript">
(function l(d){
var site = '6708', page = 'blahblah', s, er = d.createElement('script');
er.type = 'text/javascript';
er.async = true;
er.src = '//randomsite.com/?site=' + site + '&page=' + page; // **
s = d.getElementsByTagName('script')[0];
s.parentNode.insertBefore(er, s);
})(document);
</script>
and for some reason in Chrome when I check the console it shows up as
+ site + '&amp;page='
instead of
+ site + '&page=' + page;
Edit
So the error disappeared after clearing up console and browser settings. But now a new error has shown up, and I'm not sure what this means
I'm at a loss as to why that is.
You should be getting Uncaught SyntaxError: Unexpected token * with the ** before site and after page. How have you embedded it in the html? this seemed to work fine for me:
<html>
<head>
</head>
<body>
<script type="text/javascript">
(function l(d){
var site = '6708', page = 'blahblah', s, er = d.createElement('script');
er.type = 'text/javascript';
er.async = true;
er.src = '//randomsite.com/?site=' + site + '&page=' + page;
s = d.getElementsByTagName('script')[0];
s.parentNode.insertBefore(er, s);
})(document);
</script>
</body>
</html>
Most likely you have an ad blocker installed in your browser. Disable it and try again. ;-)

When using Overlay Layout of Google-Custom-Search, no search data is being collected by Google-Analytics

I have a Google Custom Search Element on my site configured to use the "Overlay Layout":
And I have a Google Analytics Profile conneced to this Google Custom Search account set under the relevant section like this:
I'm using the default Analytics code, and the Custom Search code Google vended.
Analytics "Site Search Tracking" is On at the "Reporting Views Settings" like this:
The problem:
No site search information is being collected by Analytics, even after several days.
This problem is only happening when I use the overlay Layout.
When I use a separate search results page, the query is being collected ok since the results page request is being recorded by Analytics.
With the overlay layout, the search results are being presented in an overlay Div and the query is going only through Google's Custom Search API.
The Question:
What can I do to make sure Analytics gets the keyword query?
Is there any callbak I'm missing?
Is there any thing else I'm missing?
The Solution:
After consulting with Google Support, here is the solution:
Set up the GCS account in admin console # https://www.google.com/cse
Set up in Analytics the Site Search settings as mentioned above
Use the Async Tracking Code of Analytics (Universal Analytics Code will not work as of May 2014). put it just before the closing tag. like this:
<head>
<!-- Your head tags, etc here -->
<script type="text/javascript">
var gaq;
var _gaq = gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-YY']);
_gaq.push(['_setDomainName', 'yourdoamin.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
Put Use the GCS Tracking code you got from the admin console inside the secion
Use Custom call back to render the search box to handle custom attributes like this:
<body>
<script>
var customUIBehaviours = function(){
//your jQuery Post UI changes to the GCS box may come here
};
var renderSearchElement = function() {
google.search.cse.element.render({
div: 'gsd',
tag: 'search',
attributes:{
linkTarget:'_self',
gaQueryParameter: 'q',
gaCategoryParameter:'',
noResultsString:'No results.',
enableAutoComplete: true
}
});
};
var myCallback = function() {
if (document.readyState == 'complete') {
renderSearchElement();
customUIBehaviours();
} else {
google.setOnLoadCallback(function() {
renderSearchElement();
customUIBehaviours();
});
}
};
//this will make the GCS render by myCallback
window.__gcse = {
parsetags: 'explicit',
callback: myCallback
};
(function() {
var cx = 'YOUR GCS CODE HERE';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<div id="gsd" class="gsce-searchBox"></div>
</body>
More information on the GCS V2 is available # https://developers.google.com/custom-search/docs/element#cse-element

Google Custom Search with mod_rewrite search term

I'm using Google Custom Search on my site with a two-page configuration: when the form is sent from page 1 to page 2, page 2 display SERP. This is my page 2:
<script>
(function() {
var cx = '00000000000';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only queryParameterName="query"></gcse:searchresults-only>
</script>
Everything works fine as long as page two is a "classic" /page2.php?query=searchTerm.
Now I'd like to use mod_rewrite to switch to a friendlier /page2/searchTerm. The rule itself is done, but I cannot understand how to edit Google script to make it understand that now the parameter is mod_rewritten or how to use something like gcse.searchTerm='this is what I want to search for'.
API v1 is deprecated, so I need to stick with API v2.
Any help?
I don't think you need that. Why would you want search engine friendly search results URL? As far I understand SEO, you don't want your search results to appear as results on Google, Bing, etc.
And in my opinion www.example.com/search?q=test is much more "friendly" than www.example.com/page2/test because it is more obvious what it is. (Search results page.)
But, maybe I'm overlooking something, OK.
There are probably much better ways, but I think this should work also:
<script>
var searchFromURL = function() {
var element = google.search.cse.element.getElement('searchfromurlgname');
// you can echo query with PHP or get it from window.location
element.execute( window.location.pathname.replace('/page2/', '') );
};
var myCallback = function() {
if (document.readyState == 'complete') {
searchFromURL();
} else {
google.setOnLoadCallback(searchFromURL, true);
}
};
window.__gcse = {
callback: myCallback
};
(function() {
var cx = '013315504628135767172:d6shbtxu-uo';
// Insert your own Custom Search engine ID here
var gcse = document.createElement('script'); gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
<gcse:searchresults-only gname="searchfromurlgname"></gcse:searchresults-only>
<!-- switch CSE layout to "two page" -->
https://developers.google.com/custom-search/docs/element#tagparams

Implement different disqus shortnames in Opencart

I'm using opencart 1.5.5.1.
On the products pages I've already successfully changed the "Review" tab with a discussion tool by Disqus! and it works great.
But my website is dual language italian/english and I would like the users to read the discussion in the language they've chosen.
So I've created two differents disqus id's (two independent discussion boards).
On my product.tpl I had to insert their javascript that comes with a variable like:
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'xxxxxxxxxx';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
I would like to make the variable disqus_shortname to depend on language code given on the session.
As long as I understand I can get it by php with
$this->session->data['language']
or
$this->language->get('code')
but here we are talking about js!
How can I tell this script the statement if?
I need something like
if $this->language->get('code') == 'it' { var disqus_shortname = 'xxxxxxxxxxitalian'; }
else { var disqus_shortname = 'xxxxxxxxxxenglish'; }
Check whether you register a disqus shortname for your website on Disqus.
disqus_shortname
Tells the Disqus service your forum's shortname, which is the unique
identifier for your website as registered on Disqus. If undefined, the
Disqus embed will not load.
To load different language on the page,use
var disqus_config = function () {
this.language = "ru";
};
code like:
<?php
$language = ( $this->language->get('code') == 'it' )? 'it' : 'en';
?>
<script>
var disqus_config = function () {
this.language = "<?php echo $language; ?>";
};
http://help.disqus.com/customer/portal/articles/466249-can-disqus-be-loaded-in-different-languages-per-page-
In Your controller You would have to propagate the language code to the template (edit catalog/controller/product/product.php file) - add this:
$this->data['language_code'] = $this->language->get('code');
Then edit the template file this way (catalog/view/theme/<YOUR_THEME>/template/product/product.tpl):
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'xxxxxxxxxx<?php echo $language_code; ?>'; // here the mojo is done...
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script');
dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>

Call Chrome.extension.sendRequest from a dynamically inserted js?

I'm currently trying to insert dynamically a JS block on a webpage using jQuery but it didn't work. I tried this :
var body = $('body');
var injectJs = $('<script type=text/javascript>' +
'$(document).click(function() {' +
'dropMenu("dropMenu1", 0);' +
'});');
body.append(injectJs);
EDIT : 16:26
I've succeed to insert the code by this way :
/* Importation de Tool.js */
var scriptImport = document.createElement('script');
scriptImport.type = 'text/javascript';
scriptImport.src= chrome.extension.getURL('js/Tool.js');
head.appendChild(scriptImport);
/* Injection du script onClick */
var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML = "document.addEventListener('click', function(){ dropMenu('slideUp', 0); alert('TRY ME AGAIN'); });";
And dropMenu :
function dropMenu(dropMenuPage, marginLeft)
{
var msg = "";
msg = msg.concat(dropMenuPage, "|", marginLeft);
chrome.extension.sendRequest({dropMenu : msg});
alert('After send');
}
The problem is that the sendRequest is impossible from this page... Someone have an idea ?
Thanks in advance.
You need a closing </script> at the end there...
I think its just your script stag isn't closed
var b= $('body');
var injectJs = $('<script type=text/javascript> $(document).click(function() {alert("yes");});</script>');
b.append(injectJs);
Use eval function, such as eg:
var body = $('body');
var injectJs = eval("$(document).click(function() {alert('hello')})");
body.append(injectJs);
Why not use content scripts for this? Injecting script directly to the page is only required if you need to access js variables from the page. For your dropMenu() a content script should be enough.
You cannot use Chrome API inside injected js. You would need to also inject a content script, and using custom DOM events you would be able to communicate with it from your injected script. Then this content script would be able to call Chrome API and communicate with a background page. Sounds like a pain to me. I would suggest you go this route only if there is no other ways possible.
// Importation of jQuery.js
var scriptImport = document.createElement('script');
scriptImport.type = 'text/javascript';
scriptImport.src= chrome.extension.getURL('js/jquery.js');
head.appendChild(scriptImport);
// Injection of onClick script
var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML =
"document.addEventListener('click', function()" +
"{ if(document.getElementById('dropMenu')) {" +
"$('#dropMenu').slideUp(800, function() {" +
"$(this).remove();" +
"});" +
"}});";
I've finally done this, it works :)

Categories