michaelbromley / angularUtils

A place where I will collect useful re-usable Angular components that I make

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Disqus: in Disqus all discussions get the same title.

viking2917 opened this issue · comments

(I have a solution/workaround for this; documenting in case useful for others, as it involves interaction with another AngularJS Directive in common use).

After embedding a Disqus panel following all the instructions, all my discussions get the same disqus "Title" - see attached screenshot from Disqus).

My config code for the controller:

 $scope.disqusConfig = {
		  disqus_shortname: 'thehawaiiproj',
		  disqus_identifier: 'Book_' + data.bookid,
		  disqus_title: 'A discussion about ' + data.title + " by " + data.authorstring,
		  disqus_url: $scope.canonicalURL
	      };

I've verified that the config does in fact change for each different page.

screen shot 2017-01-19 at 12 30 09 pm

Turns out the issue is related to my use of the AngularJS ViewHead (https://github.com/apparentlymart/angularjs-viewhead) directive, which allows to control the html Title of the page via a directive.

I think what is going on is that the disqus js code is grabbing the page Title before viewhead has had a chance to alter it. I changed the priority of the viewHead/viewTitle directive to 10, and that seems to have solved the problem. I would still have thought that this Disqus plugin would have overridden that as I do specify a title in the config, but I am unsure of the details here.

I'm actually not sure this is the extent of the issue. It doesn't appear that the other parameters are flowing through to Disqus - e.g. I specified a canonical URL to disqus, but if I visit a page with comments, through a slightly different URL (e.g. http://www.example.com/foo.html and then http://www.example.com/foo.html?foo=bar), the second URL does not show the comments. If I change the dirDisqus plugin as follows, it seems to work:

instead of :

$window.disqus_config = function () {
                        this.language = scope.config.disqus_config_language;
                        this.page.remote_auth_s3 = scope.config.disqus_remote_auth_s3;
                        this.page.api_key = scope.config.disqus_api_key;
                        if (scope.config.disqus_on_ready) {
                            this.callbacks.onReady = [function () {
                                scope.config.disqus_on_ready();
                            }];
                        }
                    };

this:

$window.disqus_config = function () {
                        this.language = scope.config.disqus_config_language;
                        this.page.remote_auth_s3 = scope.config.disqus_remote_auth_s3;
                        this.page.api_key = scope.config.disqus_api_key;

			this.page.identifier = scope.config.disqus_identifier;
			this.page.url = scope.config.disqus_url;
			this.page.title = scope.config.disqus_title;

                        if (scope.config.disqus_on_ready) {
                            this.callbacks.onReady = [function () {
                                scope.config.disqus_on_ready();
                            }];
                        }
                    };

it seems to work ok.

This seems to align with the current version of Disqus docs, which state:

Configuration variables are added within the disqus_config function with exception of your shortname, which is added further down. Example:

how did you solve that problem with the title? I have the same problem, everything else works fine, but the title is the same

Honestly @cotts I am not sure if I did fix it. Per my note above I changed the priority on the viewHead directive, and I thought it had fixed it. But in looking at Disqus.com now, I see that the comments appear to be piling up on the same title again. If I get time to make a small reproducible case, I will re-open the issue...

Also may be relevant: I think the title gets set the first time the thread gets created. If for example the discussion thread got created in the past (e.g. the page already existed before you had this problem), the title may already be wrong in the Disqus database, and thus changing the code in your app won't fix it. It might be possible to fix the title via an API call; I've not tried that as yet. E.g. : https://help.disqus.com/customer/portal/articles/735170-how-can-i-update-discussion-urls-

Thanks @viking2917 , I will do more tests later. I think that happens at least in my case because I make a AJAX requrest with the content of the article and load into the scope after load the disqus directive.
I still having this problem with and without your viewHead Directive.
I will check it again later because this project is paused.