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;
Related
I'm a newbie in API requests and javascript...
I try to use an API based on the OAuth2.0 protocole (Autorisation Code Grant).
I don't understand how i can pass the first step :
why my request don't generate the redirection to the redirect_uri ?
after, how to catch the url params contain in this redirection url ?
Here, my actual code :
const link = 'https://gw.hml.api.fr/group/espace-particuliers/consentement/oauth2/authorize?client_id=MY_API_CLIENT_ID&state=fz80ac780&duration=P6M&response_type=code&redirect_uri=https://gw.hml.api.fr/redirect';
const connect = document.getElementById('connect-btn')
if (connect) {
connect.addEventListener('click', function(event) {
event.preventDefault();
fetch(link)
.then(response => response.text())
console.log(response);
// HOW TO CATCH THE REDIRECTION_URI PARAMS ?
});
};
Exemple of response :
<html lang="fr">
<head>
<meta charset="utf-8" />
</head>
<body>
<p>Veuillez patienter...</p>
<script type="text/javascript">
/**
* Delete cookies (iPlanetDirectoryPro, amlbcookie)
*/
function removeCookie(cookieName) {
cookieValue = "";
cookieLifetime = -1;
var date = new Date();
date.setTime(date.getTime() + (cookieLifetime*24*60*60*1000));
var expires = "; expires=" + date.toGMTString();
document.cookie = cookieName+"=" + JSON.stringify(cookieValue) + expires+"; path=/; domain=.ene.fr";
}
removeCookie("iPlanetDirectoryPro");
removeCookie("amlbcookie");
/**
* Parse url query
*/
var parseQueryString = function( queryString ) {
var params = {}, queries, temp, i, l;
// Split into key/value pairs
queries = queryString.split("&");
// Convert the array of strings into an object
for ( i = 0, l = queries.length; i < l; i++ ) {
temp = queries[i].split('=');
params[temp[0]] = temp[1];
}
return params;
};
var url = "https://gw.hml.api.fr/redirect?code=sD4F5RT3qPPJ15qFhrGu32YiumzN5D&state=fz80ac780&usage_point_id=225158214714453";
// Get redirect_uri params
var queryString = url.substring( url.indexOf('?') + 1 );
var params = parseQueryString(queryString);
var forceNonAutomaticClose = params.close !== undefined && params.close == 'false';
// Avoid closing popup
if (forceNonAutomaticClose || !this.window.opener || this.window.opener.closed) {
this.window.location.href = url;
} else if (this.window.opener && !this.window.opener.closed) {
// Close popup
this.window.opener.location.href = url;
this.window.close();
}
</script>
</body>
</html>
How I can complete my code ?
Thanks !
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.
I have an HTML application to search Facebook pages using pure JavaScript, no other libraries and no back-end.Most of the APIs that deal with searching and reading "pages" do not require user authorization, and they support JSONP (through the "callback" parameter).
My HTML code, index.html
<!doctype html>
<head>
<title>FaceBook Page Search API</title>
<script type="text/javascript" src='js/app.js'></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="form-search">
<h3>Search FaceBook Pages</h3>
<p class="form-search-row"><input id="searchPages" type="text" placeholder="Enter name">
<button class="btn btn-medium btn-success" onclick="getData()" type="submit">Search</button>
</p>
</div>
</div>
<div class="offset1 pull-center page-results">
</div>
</body>
</html>
and app.js,
var getData = function(){
var my_JSON_object = {};
var http_request = new XMLHttpRequest();
var str, queryInput = document.getElementById("searchPages");
var searchFormRow = document.getElementsByClassName('form-search-row')[0];
var image=document.createElement('img');
if(!queryInput.value){
return;
}
str = encodeURIComponent(queryInput.value);
image.setAttribute('src', 'img/ajax-loader.gif');
image.setAttribute('width', '30px');
searchFormRow.appendChild(image);
var url = "https://graph.facebook.com/search?type=page&q="+ str;
http_request.open("GET", url, true);
http_request.onreadystatechange = function () {
var done = 4, ok = 200;
if (http_request.readyState == done && http_request.status == ok) {
my_JSON_object = JSON.parse(http_request.responseText);
displayResults(my_JSON_object);
image.parentNode.removeChild(image);
}
};
http_request.send(null);
};
var displayResults = function(pages){
var resultDiv = document.getElementsByClassName('page-results')[0];
if(pages.data.length){
resultDiv.innerHTML = "";
}
else{
resultDiv.innerHTML = "No results found";
}
for(var i=0; i<pages.data.length; i++)
{
var name = pages.data[i].name, category = pages.data[i].category, id= pages.data[i].id;
var page = document.createElement("div");
var pname = document.createElement("p");
var findmore = document.createElement("a");
var pcategory = document.createElement("p");
pname.innerHTML = name;
findmore.innerHTML = " find out more";
findmore.href= "detail.html?id="+id;
findmore.target = "_blank";
pname.appendChild(findmore);
pcategory.innerHTML = "Category: " + category;
pcategory.setAttribute('class',"small-font");
page.setAttribute('class','span2 pageDiv');
page.appendChild(pname);
page.appendChild(pcategory);
resultDiv.appendChild(page);
console.log(pages.data[i].name);
}
};
var getPageDeatil = function(){
var query = window.location.search.substring(1);
var vars = query.split("=");
getDetailsAjax(vars[1]);
};
var getDetailsAjax = function(pageId){
var my_JSON_object = {};
var http_request = new XMLHttpRequest();
var str = encodeURIComponent(pageId);
var url = "https://graph.facebook.com/"+ str;
http_request.open("GET", url, true);
http_request.onreadystatechange = function () {
var done = 4, ok = 200;
if (http_request.readyState == done && http_request.status == ok) {
my_JSON_object = JSON.parse(http_request.responseText);
displayDetailsResult(my_JSON_object);
}
};
http_request.send(null);
};
var displayDetailsResult = function(detail){
var resultDiv = document.getElementById('details');
var displayImage;
for (key in detail) {
if (detail.hasOwnProperty(key)) {
if(key=="cover"){
displayImage =true;
}
else{
var li = document.createElement("li");
li.setAttribute('class',"removeDecor");
li.innerHTML = key+ " : " + detail[key];
resultDiv.appendChild(li);
}
}
}
if(displayImage){
var heading = document.getElementById('header');
var image = document.createElement('img');
image.setAttribute('src', detail.cover.source);
heading.insertBefore(image);
}
};
Finally, the detail.html
<!doctype html>
<head>
<title>FaceBook Page Search API - Detail Page</title>
<script type="text/javascript" src='js/app.js'></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body onload="getPageDeatil()">
<div class="container">
<h3 id="header">More about Page</h3>
<div class="well">
<ul id="details">
</ul>
</div>
</div>
</body>
</html>
But it gives the following error in console.
{
"error": {
"message": "(#200) Must have a valid access_token to access this endpoint",
"type": "OAuthException",
"code": 200
}
}
Page search API do not require authorization right ? Then how can I solve this ?
Thanks for all, finally solved my problem by referring Facebook Developer Documentation.
First, got details about access_token here, https://developers.facebook.com/docs/reference/api/search/#access_tokens
Searches across page and place objects requires an app access token.
Each application should be registered in https://developers.facebook.com/apps to get an app_id and secret_id.
After getting this details,
Generate access_token using this URL https://graph.facebook.com/oauth/access_token?client_id=app_id&client_secret=secret_id&grant_type=client_credentials
The app_id and secret_id should be changed with generated one.
And changed my request URL in app.js file like this,
var access_token = ""; // my access token here
var url = "https://graph.facebook.com/search?type=page&q="+ str +"&access_token="+access_token;
I have this code in silverlight application in the default.aspx :
<head id="Head1" runat="server">
<link id="link1" rel="shortcut icon" href="favicon1.ico" type="image/vnd.microsoft.icon" />
<title id="Title1" >hello</title>
I need to change the href="favicon2.ico" in JavaScript when the querystring is changed.
I tried to write this, but it's not working:
<script type="text/javascript">
if( Request.QueryString ("user"). Equals("true", StringComparison.OrdinalIgnoreCase)) {
document.title="hi user";
document.getElementById('link1').href = ('favicon2.ico');
}
</script>
</head>
</html>
Add JavaScript function
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
Change your code as purely JavaScript (You are mixing C# and JavaScript)
if(getParameterByName("user").toLowerCase() == "true")
{
document.title="hi user";
var newImage = new Image();
newImage.src = 'favicon2.ico?_=' + new Date().getTime();
document.getElementById('link1').href = newImage.src;
}
Update:
if(getParameterByName("user").toLowerCase() == "true")
{
document.title="hi user";
changeFavicon('favicon2.ico');
}
function changeFavicon(src) {
var link = document.createElement('link'),
oldLink = document.getElementById('link1');
link.id = 'link1';
link.rel = 'shortcut icon';
link.href = src;
if (oldLink) {
document.getElementsByTagName('head')[0].removeChild(oldLink);
}
document.getElementsByTagName('head')[0].appendChild(link);
}
Try replacing this in your code
document.getElementById('link1').href = "favicon2.ico";
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);
}