I have SPA pages that uses durandaljs and knockoutjs. Now I am going to implement a support of disqus plugin for my site.
When I added disqus I have found that the same comments is showing up for different pages with different URL (I used durandal for URL rewriting).
I guess that root of this issue is that my rewrote URL's are distinguished by full hashbang(#!)
The code is following:
var disqus_shortname = 'somename';
var disqus_identifier = context.id;
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
if (typeof DISQUS != 'undefined') {
DISQUS.reset({
reload: true,
config: function () {
this.page.title = "title" + context.id;
this.page.identifier = context.id;
this.page.url = "http://localhost:23054/#!ideas/details/" + context.id;
debugger;
}
});
}
View:
<div id="disqus_thread"></div>
I hope somebody uses disqus comments with SPA pages and knows how to help me to solve this.
here's my solution:
var id = context.id;
disqus_shortname = 'somename',
disqus_identifier = id,
disqus_title = id,
disqus_url = "http://someurl.com/#!" + id;
if ($('head script[src="http://' + disqus_shortname + '.disqus.com/embed.js"]').length == 0) {
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0]).appendChild(dsq);
})();
}
if (typeof DISQUS != "undefined") {
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = id;
this.page.url = "http://someurl.com/#!" + id;
}
});
}
I think the problem may be that your identifier isn't unique enough. From the Disqus documentation:
When Disqus-enabled pages are visited, Disqus uses this identifier to
determine the appropriate comment thread to load. If the appropriate
thread could not be found, a new thread is created.
I'm not sure what context.id is, but make sure that this is unique for each thread and unique enough for Disqus' purposes.
Related
I need to add the following code to the footer of my page, but I have to do it using javascript code.
Code I need to add:
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter39519115 = new Ya.Metrika({
id:39519115,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
} catch(e) { }
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = "https://mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
What I tried to add:
$('#footer').append('<script type="text/javascript">' + (function (d, w,.... + '</script>');
However, this does not work for me.
Place your javascript in a separate .js file and then you need to use the document.createElement method to add/append your script to your footer block.
Try the below snippet.
var scriptSource = document.createElement('script');
var scriptURL = 'your_script_file_url_goes_here';
scriptSource.type = 'text/javascript';
scriptSource.src = scriptURL ;
$("#footer").append(scriptSource);
Hope this helps!.
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 comments powered by Disqus.</noscript>
blog comments powered by <span class="logo-disqus">Disqus</span>
</body>
</html>
I get the following error
we were unable to load disqus. if you are a moderator please see our
troubleshooting guide.
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;
I am implementing Google Custom Search Element API 2.0 in an ASP.NET MVC project. In the documentation they require that the following javascript is included in the view, with the <gcse:search> element following.
<script>
(function() {
var cx = 'xxxxxxxx:yyyyyyyy';
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:search></gcse:search>
However, the search engine id is visible on the line:
var cx = 'xxxxxxxx:yyyyyyyy';
In a browser, selecting View Source (or similar) allows the user to view the script and the search engine id.
How do I ensure that no-one can see my id?
I have found a way around this. By moving the Google script to its own function that takes the Search Engine Id as a parameter:
function buildSearchElement(cx)
{
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);
};
I then call a method on my controller that returns the Search Engine Id upon page load. When this completes, the callback is the buildSearchElement function:
(function ()
{
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function()
{
if (httpRequest.readyState === 4 && httpRequest.status === 200)
{
buildSearchElement(httpRequest.responseText);
}
}
httpRequest.open("GET", "/GetSearchElementId");
httpRequest.send();
})();
First of all, i want to ask if i can login to disqus with my own user db? I think we can do?
I don't know what else can i do. I'm totally stuck now.
I know i have to use SSO (https://help.disqus.com/customer/portal/articles/236206-single-sign-on#configure-domain). I did all settings but i must miss something...
My Complete Disqus configuration:
As i understand, user info is my own user data that already logged in to our website.
var DISQUS_SECRET = "SECRET_HERE";
var DISQUS_PUBLIC = "PUBLIC_HERE";
function disqusSignon(user) {
var disqusData = {
id: user.id,
username: user.username,
email: user.email
};
var disqusStr = JSON.stringify(disqusData);
var timestamp = Math.round(+new Date() / 1000);
// This line is important! In official example, they were using NodeJS Buffer class. As they told in example, i have encrypted with window.btoa insted of NodeJS Buffer.
var message = window.btoa(disqusStr).toString('base64');
var result = CryptoJS.HmacSHA1(message + " " + timestamp, DISQUS_SECRET);
var hexsig = CryptoJS.enc.Hex.stringify(result);
return message + " " + hexsig + " " + timestamp;
}
// getting the user data from twig
var user = {
id: {{ app.user.id }},
username: "{{ app.user.username }}",
email: "{{ app.user.email }}"
};
//generating auth_s3 key
var auth_key = disqusSignon(user);
var disqus_config = function () {
this.page.remote_auth_s3 = auth_key;
this.page.api_key = DISQUS_PUBLIC;
this.sso = {
name: "Oyun Maceraları",
icon: "http://www.oyunmaceralari.com/favicon.png",
url: "http://oyunmaceralari.com/login-popup",
logout: "http://oyunmaceralari.com/logout"
};
};
var disqus_shortname = 'xxxxxx';
/* * * 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);
})();
I have a service of job portal which other users can use for their sites and blogs. they copy embed code from my site, paste it in their site and display job board in their webpage. how create this embed code anyone can help me.
Here is example monster.com publisher website.
click Get sample code button.
<div id="MonsterJobSearchResultPlaceHolderIy8AAA_e_e" class="xmns_distroph"></div>
<script type="text/javascript">
(function() {
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.async = true;
oScript.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'publisher.monster.com/Services/WidgetHandler.ashx?WidgetID=EAAQgDMlA5vzabXFzuv86ZpLpA--&Verb=Initialize';
var oParent = document.getElementsByTagName('script')[0];
oParent.parentNode.insertBefore(oScript, oParent);
})();
</script>
<a id="monsterBrowseLinkIy8AAA_e_e" class="monsterBrowseLink fnt4" href="http://jobsearch.monster.com/browse/">View More Job Search Results</a>
there are many ways to reach your goal. As you didn't explain your need explicitly, I just provide a simple example:
<script type='text/javascript' charset='utf-8'>
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.src = 'URL OF CONTENT YOU WANT TO PROVIDE';
iframe.width = 'THE WIDTH YOU WANT';
iframe.height = 'THE HEIGHT YOU WANT';
</script>
modify the code according to your need
escape this code in your html
have fun with your awesome embedded widget!
How To Create Embed With Javascript in .cs
Note: localhost:3197/website/js/embed/form.js'; // give your js path
FormBuilder(921,'MjEzNjkxMjU='); in this method first parameter give your form height and second your form name or Id. there Id is encoded format
StringBuilder sb = new StringBuilder();
sb.Append("<script type='text/javascript'>");
sb.Append("(function(d, t) { var s = d.createElement(t), options = {");
sb.Append("'async':true };");
sb.Append("s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'localhost:3197/website/js/embed/form.js';");
sb.Append("s.onload = s.onreadystatechange = function() {");
sb.Append("var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;");
sb.Append("try { frm = new FormBuilder("+Form Height+",'"+FormId+"');frm.initialize(options);frm.display(); }");
sb.Append("catch (e) {}};");
sb.Append("var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);");
sb.Append("})(document, 'script');</script>");
txtjavascript.Value = sb.ToString(); // text box name
After Create embed script Simple and Easy Way Paste this script where you want to show in other page after that
(function(d, t) { var s =
d.createElement(t), options = {'async':true }; s.src = ('https:' ==
d.location.protocol ? 'https://' : 'http://') +
'localhost:3197/website/js/embed/form.js'; s.onload =
s.onreadystatechange = function() {var rs = this.readyState; if (rs)
if (rs != 'complete') if (rs != 'loaded') return; try { frm = new
FormBuilder(921,'MjEzNjkxMjU='); frm.initialize(options);
frm.display(); }catch (e) {}}; var scr =
d.getElementsByTagName(t)[0], par = scr.parentNode;
par.insertBefore(s, scr);})(document, 'script');
After That in your js file Create fuction like this and create iFrame ans create querystring where you fetch the form from database.
function FormBuilder(fHeight, formid) {
var iframe = document.createElement('iframe');
iframe.style = "height:" + fHeight + "px; width:100%; border:none";
iframe.setAttribute('allowTransparency', true);
iframe.frameBorder = "0";
iframe.scrolling = "no";
iframe.src = "http://localhost:3197/form/show-form?id="+ formid;
document.body.appendChild(iframe);
}