how to share url + parameter using addthis social plugin?
I had read the addthis api, But I can not find whey to add my parameters.
http://support.addthis.com/customer/portal/articles/381263-addthis-client-api
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
var addthis_config = {
// I want to share link as this url + my_defined_paramater, how to set?
url: location.href+'refer_id=1900' //not correct
};
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#username=addthis"></script>
<!-- AddThis Button END -->
</body>
</html>
Looks like you may need an ampersand in your url. Everything else looks fine from what the API docs show.
var addthis_config = {
// I want to share link as this url + my_defined_paramater, how to set?
url: location.href+'&refer_id=1900'
//^^^
};
I found some items in the support section. Hopefully this will help.
Support page
Basically, it says you can add an attribute called addthis:url to set a custom URL. Since you need the current page, you'll have to update it with JavaScript's setAttribute() method.
<div class="addthis_toolbox addthis_default_style" id="addthis_container">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
var addThisCont = document.getElementById("addthis_container");
var curUrl = location.protocol + "//" + location.href;
var withGetVariable = curUrl + "?refer_id=1900";
addThisCont.setAttribute("addthis:url", withGetVariable);
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#username=addthis"></script>
You should use below code:
addthis_share = {
url_transforms : {
add: {
oReferrer: LoggedOfficeGuid
}
}
}
Related
I'm creating a web application that I aim to embed into my Wix site.
The web application that I need can basically be reduced into a text screen & a button to change the screen view/page (the html that is displayed).
However, the problem is that independent on whether I start from the "home page" or from the "page page", the application loads two next screens and gives me a white screen after.
I've also tried other options for changing the url - ie location.href, window.location and such, and even tried changing the page via <a href= URL , yet the problem persists.
Below is a simplification of my code:
Page HTML
<!DOCTYPE html>
<html>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<head>
<base target="_self">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<h1>page page</h1>
<button id="pagebtn" class="font-family: Raleway; font-size: 16px; waves-effect waves-light btn-small blue accent-2"><i class="material-icons left">check</i> Navigate to home </button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.getElementById("pagebtn").addEventListener("click",changepage);
function changepage(){
var url_new = "https://script.google.com/macros/s/AKfycbzKN9vYBa1yQguooTnijIipyMdAMbXo7a61wjWHt0ybCynH2bxj/exec?v=home";
document.location = url_new;
}
</script>
</body>
</html>
Home HTML
<!DOCTYPE html>
<html>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<head>
<base target="_self">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<h1>home page</h1>
<button id="homebtn" class="font-family: Raleway; font-size: 16px; waves-effect waves-light btn-small blue accent-2"><i class="material-icons left">check</i> Navigate to page </button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.getElementById("homebtn").addEventListener("click",changepage);
function changepage(){
var url_new = "https://script.google.com/macros/s/AKfycbzKN9vYBa1yQguooTnijIipyMdAMbXo7a61wjWHt0ybCynH2bxj/exec?v=page";
document.location = url_new;
}
</script>
</body>
</html>
JS Code // Code.gs
var Route = {};
Route.path = function(route, callback) {
Route[route] = callback;
}
function doGet(event) { //<!-- Not visible to the user, serverside -->
Route.path("page", loadPage);
Route.path("home", loadHome);
if (Route[event.parameters.v]) {
return Route[event.parameters.v]();
} else {
return HtmlService.createTemplateFromFile("home").evaluate();
}
Logger.log("do get1 " + event.parameters.v);
}
function loadPage() { //<!-- Not visible to the user, serverside -->
var tmp = HtmlService.createTemplateFromFile("page");
return tmp.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function loadHome() { //<!-- Not visible to the user, serverside -->
var tmp = HtmlService.createTemplateFromFile("home");
return tmp.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
The links in the code are for redirecting to a different url "view".
Thanks!
//Edit:
Unfortunately still without a solution nor an understanding of the underlying cause of this problem. By simply testing around - I found that when using window.open the scripts works (however, it keeps opening new tabs/windows that is not desirable. As the URL of the site itself does not change - perhaps this is the underlying reason for this problem? (meaning that I should redo the router or input the url in a different way to actually change what is written)?
I resolved my issue by changing document.location to window.top.location
However, as I need to embed this inside of my website, it opens up a new window whenever (window.top after all), whenever clicking the "Navigate" buttons- it does not work as intended, but for a temporary fix it will do
I know this sounds like a ridiculously simple question, but there is a lot more to it than just a basic function call. I'm implementing authentication on a webapp using the Auth0 python example, they have a full example available here.
I completely understand the python Auth0 stuff, and can get all the details I require from the session, but I simply can NOT work out how to move this sample code in to my app using a simple "login" and "logout" button! The HTML from the sample app looks like this:
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="https://cdn.auth0.com/js/auth0/8.6.0/auth0.min.js"></script>
<script type="text/javascript" src="//use.typekit.net/iws6ohy.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome from BootstrapCDN -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script>
var AUTH0_CLIENT_ID = '{{env.AUTH0_CLIENT_ID}}';
var AUTH0_DOMAIN = '{{env.AUTH0_DOMAIN}}';
var AUTH0_CALLBACK_URL = '{{env.AUTH0_CALLBACK_URL if env.AUTH0_CALLBACK_URL else "http://localhost:3000/callback" }}';
var API_AUDIENCE = '{{env.API_IDENTIFIER}}';
</script>
<script src="/public/app.js"> </script>
<link href="/public/app.css" rel="stylesheet">
</head>
<body class="home">
<div class="container">
<div class="login-page clearfix">
<div class="login-box auth0-box before">
<img src="https://i.cloudup.com/StzWWrY34s.png" />
<h3>Auth0 Example</h3>
<p>Zero friction identity infrastructure, built for developers</p>
<a class="btn btn-primary btn-lg btn-login btn-block">SignIn</a>
</div>
</div>
</div>
</body>
</html>
The Javascript that is running is contained in a seperate file that is read in on document load:
$(document).ready(function() {
var auth = new auth0.WebAuth({
domain: AUTH0_DOMAIN,
clientID: AUTH0_CLIENT_ID
});
$('.btn-login').click(function(e) {
e.preventDefault();
auth.authorize({
audience: 'https://'+AUTH0_DOMAIN+'/userinfo', // you can also set this on the .env file and put API_AUDIENCE instead
scope: 'openid profile',
responseType: 'code',
redirectUri: AUTH0_CALLBACK_URL
});
});
$('.btn-logout').click(function(e) {
e.preventDefault();
window.location.href = '/logout';
})
});
I don't want to use the standard HTML provided with the sample, all I want is a simple "login" button to, well log in the user, but for the life of me I simple don't understand how to make that happen. I want this to be as simple as possible, with all the javascript embedded in the page. I've tried the following, but it fails as the variable "e" is undefined, and I don't understand where it came from in the original example!
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="https://cdn.auth0.com/js/auth0/8.6.0/auth0.min.js"></script>
<script type="text/javascript" src="//use.typekit.net/iws6ohy.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<p><button onclick="loginfunc()">Click me</button></p>
<script>
$(document).ready(function() {
var auth = new auth0.WebAuth({
domain: AUTH0_DOMAIN,
clientID: AUTH0_CLIENT_ID
});
},
</script>
<script>
function loginfunc(e) {
e.preventDefault();
auth.authorize({
audience: 'https://'+AUTH0_DOMAIN+'/userinfo', // you can also set this on the .env file and put API_AUDIENCE instead
scope: 'openid profile',
responseType: 'code',
redirectUri: AUTH0_CALLBACK_URL
});
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome from BootstrapCDN -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script>
var AUTH0_CLIENT_ID = '{{env.AUTH0_CLIENT_ID}}';
var AUTH0_DOMAIN = '{{env.AUTH0_DOMAIN}}';
var AUTH0_CALLBACK_URL = '{{env.AUTH0_CALLBACK_URL if env.AUTH0_CALLBACK_URL else "http://localhost:3000/callback" }}';
var API_AUDIENCE = '{{env.API_IDENTIFIER}}';
</script>
<script src="/public/app.js"> </script>
<link href="/public/app.css" rel="stylesheet">
</head>
<body class="home">
<div class="container">
<div class="login-page clearfix">
<div class="login-box auth0-box before">
<img src="https://i.cloudup.com/StzWWrY34s.png" />
<h3>Auth0 Example</h3>
<p>Zero friction identity infrastructure, built for developers</p>
<a class="btn btn-primary btn-lg btn-login btn-block">SignIn</a>
</div>
</div>
</div>
</body>
</html>
I'm guessing lines 6 and 7 of the original HTML is where all the "magic" is happening, I just don't know how to "read" what's going on there.
<script type="text/javascript" src="//use.typekit.net/iws6ohy.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
I understand this is a horrible, horrible question, but I've been looking at this for hours now and I'm just ready to give up, I can't look at it any more. For the life of me I don't understand why Auth0 didn't just make a super simple, all-on-on-page example that anyone can understand, not all this fancy bootstrap/css/html mess!
If anyone can help, I will be eternally grateful!
Thank you.
I did it!!!
So it turns out I was waaaaay off, it had nothing to do with the script lines I was focusing on. Here is the working code:
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="https://cdn.auth0.com/js/auth0/8.6.0/auth0.min.js"></script>
<script>
function loginfunc() {
var auth = new auth0.WebAuth({
domain: AUTH0_DOMAIN,
clientID: AUTH0_CLIENT_ID
});
auth.authorize({
audience: 'https://'+AUTH0_DOMAIN+'/userinfo', // you can also set this on the .env file and put API_AUDIENCE instead
scope: 'openid profile',
responseType: 'code',
redirectUri: AUTH0_CALLBACK_URL
});
}
</script>
<script>
var AUTH0_CLIENT_ID = '{{env.AUTH0_CLIENT_ID}}';
var AUTH0_DOMAIN = '{{env.AUTH0_DOMAIN}}';
var AUTH0_CALLBACK_URL = '{{env.AUTH0_CALLBACK_URL if env.AUTH0_CALLBACK_URL else "http://localhost:3000/callback" }}';
var API_AUDIENCE = '{{env.API_IDENTIFIER}}';
</script>
</head>
<body >
<p><button onclick="loginfunc()">Click me</button></p>
</body>
</html>
Basically I just pulled the app.js code in to the main html file, then used a standard "onclick" button action to call the auth function. This is so much easier to read than the auth0 example.
I hope this makes the example clearer for someone else in the future. I find it really frustrating the developers confuse the core code example with completely unnecessary css and artys html formatting.
So I'm fairly new to AJAX, I have a simple 3 page project which I am using AJAX to transition between pages.
I have an index.html page which loads all the html / body / scripts etc:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax practice</title>
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<div class="" id="wrapper">
<div class="overlay"></div>
<header>
<nav>
<ul>
<li><a class="aboutBtn" href="main.html">Home</a></li>
<li><a class="aboutBtn" href="about.html">About</a></li>
<li><a class="aboutBtn" href="#">Menu</a></li>
<li><a class="aboutBtn" href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="page wrapper" id="page">
<div class="circle" id="black"></div>
<div class="circle" id="red"></div>
<div class="circle" id="blue"></div>
<section class="mainSplash main">
<div class="mainSplash__content" id="content">
</div>
</section>
</div> <!-- page -->
</div> <!-- wrapper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
and my 2 pages are:
main.html:
<h1 class="mainSplash__header--h1">Main</h1>
about.html:
<h1 class="mainSplash__header--h1">About</h1>
Here is the AJAX which transitions the pages:
$(document).ready(function() {
var pathname = window.location.pathname; // Returns path only
console.log(pathname);
// $('.mainSplash').css('height',$(window).height() - 60);
$(".aboutBtn").click(function(e) {
e.preventDefault();
var pageTitle = $(this).text();
var pageUrl = $(this).attr('href');
changePage(pageUrl, true, pageTitle);
}); // click
function changePage(url, bool, pageTitle){
$('#page').addClass('fadeOut');
loadContent(url, bool, pageTitle);
}
function loadContent(url, bool, pageTitle){
$.ajax({
url: './' + url,
type: 'get',
contentType: 'html',
success: function(data){
$('#page').one('animationend',
function(e) {
// load content
$('#page').removeClass('fadeOut');
$('#page').addClass('fadeIn');
$('#content').html(data);
//$("html").html(data);
// Change url
if(url != window.location){
window.history.pushState({path: url}, pageTitle, url);
}
});
}
});
}
function removeAnimation(){
$('#page').removeClass('animate');
}
});
So my transitions work fine when I have come from index.html, though when I refresh main.html or about.html, they do not keep the code from index.html (obviously).
My question is:
How do I handle a refresh or back button from my pages without losing the index.html content? Any help or advice is appreciated - thank you in advance.
PS: If anyone knows of any AJAX html page transition examples I would love to know so I can improve my code, as I'm looking for best practice for AJAX transitions!
multi way available to do this but best way is use hash routing. see this plugin 'Routei '.set param in hash route then and get it when click on back button and handel ajax whit this param.
I would suggest using the browser page hash and on navigation check for the given hash and load the corresponding page.
let hash = window.location.hash;
When the hash changes, your browser adds a new history for that page.
On the load of the Site you need to add entry in the history with the command history.pushState and to go back to use the buttons of the browser you will need the EventListener onpopstate
I am practicing Windows Phone development using WinJS and I have the following code which parses JSON received from a particular URL. And using the images to be bound to a list view in an HTML page,
JavaScript code:
WinJS.xhr({ url: urlToBeUsed }).then(
function (sportsResponse) {
var sportsJSON = JSON.parse(sportsResponse.responseText);
var listItems = sportsJSON.Videos.Data;
for (var i = 0; i < listItems.length; i++) {
var imageList = listItems[i].Items;
var count = imageList.length;
if (count > 0) {
listItems[i].Items[0].Images.forEach(imageIteration);
function imageIteration(value, index, array) {
var picture = value.Url;
var name = value.title;
sportsImageList.push({
title: name,
picture: picture
});
}
}
}
imageList.itemDataSource = sportsImageList.dataSource;
})
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- WinJS references -->
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
<script src="/js/navigator.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/sports/sports.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage" style="width:100%;height:100%;padding:10px">
<div class="myTemplate" data-win-control="WinJS.Binding.Template">
<div class="myItem">
<img data-win-bind="src:picture" style="width:100px;height:100px" />
</div>
</div>
<div id="imageList" data-win-control="WinJS.UI.ListView" data-win-bind="winControl.itemDataSource:sportsImageList.dataSource" data-win-options="{itemTemplate:select('.myTemplate')}"></div>
</div>
</body>
</html>
I have tried many ways to bind the URL to the Image, but on the screen I can only see the links but not the actual images.
Where am I wrong?
All help and suggestions appreciated.
Thank you!
I believe your error is in your assignment line, remember that itemDataSource is a property of the ListView control. As it is in your code you're assigning that property to the imageList element.
Change it to this:
imageList.winControl.itemDataSource = sportsImageList.dataSource;
To those jQuery experts out there. I have the following markup and code:
<html>
<head>
<title>Test Framework</title>
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.nav').click(function(e) {
e.PreventDefault();
var id = $(this).attr('id');
var path = "views/" + id + ".html";
$("#main").load(path);
});
});
</script>
</head>
<body>
<div id="links">
<a class="nav" id="test" href="javascript:void(0);">Test Page</a>
</div>
<div id="main">
</div>
</body>
</html>
My nav class fires when I click the link, but fails to get past the PreventDefault method. The class fires, but nothing loads into my div. The page is definately there. Any ideas why this wouldn't be working?
The problem may be with your call to preventDefault:
$(document).ready(function(){
$('.nav').click(function(e) {
e.preventDefault();
var id = $(this).attr('id');
var path = "views/" + id + ".html";
$("#main").load(path);
});
});