Disqus in Ionic APP

Question

I am trying to implement disqus commments in my ionic app. I know I have to host it on the domain its setup for which I believe I have configured correctly. Any assistance will be welcomed

Here is the code in my app.js for the ionic app

$scope.showComments = function () {
    $scope.currentView = "comments";
    //loadComments(params["shortname"], params["url"], params["title"], params["identifier"]);
    //

    var disqus_title = "Venue 1";
    var disqus_identifier = '/venue/' + $stateParams.id;
    var disqus_url = 'liverpool.li/venue/' + $stateParams.id;
    var url = "http://liverpool.li/app/disqus.html?";
    $scope.url = url + "shortname=liverpoolli&url=" + encodeURIComponent(disqus_url) +
    "&title=" + encodeURIComponent(disqus_title) + "&identifier=" + encodeURIComponent(disqus_identifier);
    $scope.url = $sce.trustAsResourceUrl($scope.url);
};

$scope.$on("$destroy", function () {
    if ($scope.lastScriptElm && $scope.lastScriptElm.parentNode) {
        $scope.lastScriptElm.parentNode.removeChild($scope.lastScriptElm);
        $scope.lastScriptElm = null;
    }
});

And the page it points to (disqus.html) located on my domain

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div id="disqus_thread"></div>
<script type="text/javascript">
    var params;
    var disqus_url;
    var disqus_title;
    var disqus_shortname;
    var disqus_identifier;

    window.onload = function () {
        var match,
            pattern = /\+/g,
            search = /([^&=]+)=?([^&]*)/g,
            decode = function (s) { return decodeURIComponent(s.replace(pattern, " ")); },
            query = window.location.search.substring(1);

        params = {};
        while (match = search.exec(query))
           params[decode(match[1])] = decode(match[2]);

        if (params["shortname"] === undefined || params["url"] === undefined || params["title"] === undefined) {
            alert("Required arguments missing");
        }
        else {
            loadComments(params["shortname"], params["url"], params["title"], params["identifier"]);
        }
    };

    function loadComments(shortname, url, title, identifier) {
        disqus_url = url;
        disqus_title = title;
        disqus_shortname = shortname;

        if (identifier !== undefined)
            disqus_identifier = identifier;
        else
            disqus_identifier = "";

        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = false;
            dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    }
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</body>
</html>

I get the following error

we were unable to load disqus. if you are a moderator please see our troubleshooting guide.

BCLtd I am struggling to work out how to get Disqus to work with ionic and have found your question helpful to an extent but can't work out how the code you show fits in to an ionic template? I.e. where are $scope.showComments, $scope.currentView, and $scope.url used? — Bill Noble, Jan 11 '16 at 20:22
Hi, I used your method and works but there's a problem when login. It takes you to a fullscreen page and there is no way to go back. How did you solve it? — domoindal, Jul 28 '16 at 05:31

score 4 · Accepted Answer · answered May 18 '15 at 04:42

4

It looks like you're almost there. The only issue I see is the disqus_url variable must also include the protocol to be valid. Try using this line instead:

var disqus_url = 'http://liverpool.li/venue/' + $stateParams.id;

answered May 18 '15 at 04:42

Ryan V

3,100
1
17
11

Thats it! something so stupid had me changing the code for hours - thanks for pointing this out. It's much appreciated! – BCLtd May 18 '15 at 09:05
@Ryan V - can you please help me with how it was done? where disqus.html should be hosted and how it will be embeded in my ionic view? your help will be really helpful – AngryJS Jul 13 '16 at 11:57
host the HTML comments on your own server – BCLtd Jul 13 '16 at 20:47
@BCLtd can you explain how you are showing the showComments function within a current page? Thanks in advance. – Jason Aug 19 '16 at 21:31
How does a user login in to Disqus in an ionic app? – Murhaf Sousli Oct 07 '18 at 21:08

Disqus in Ionic APP

1 Answers1

Linked