Skip to content

Instantly share code, notes, and snippets.

@bachors

bachors/mymodal.html

Created January 18, 2015 08:12
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save bachors/664bdcb1e324090df6a4 to your computer and use it in GitHub Desktop.
Save bachors/664bdcb1e324090df6a4 to your computer and use it in GitHub Desktop.
Download ZIP
Generet & Share Short URL + QR Code with Google API & Bootstrap
Raw
mymodal.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google Short URL & Google QR Code - iBacor</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- Button to generet short url & qr code -->
<a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#shorturl" title="Share.." onclick="doSort();">Generet & Share Short URL + QR Code</a>
<!-- Modal to display short url & qr code -->
<div class="modal fade" id="shorturl" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Example Short URL & QR Code by <a href="http://ibacor.com">iBacor.com</a></h4>
</div>
<div class="modal-body">
<input type="text" style="text-align:center;font-size:30px;height:60px" class="form-control" id="outputshorturl" readonly="true">
<p align="center"><img src="" alt="qrcode" id="qrOutputImage" border="0" height="240" width="240"></p>
</div>
</div>
</div>
</div>
<!-- jQuery & Bootstrap JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Google API JS -->
<script src="https://apis.google.com/js/client.js"></script>
<script>
// Generet QR Code
function updateQRImage(url){
var qrcode = "http://chart.apis.google.com/chart?cht=qr&chl=" + escape(url) + "&chs=240x240&chld=H|0";
return qrcode;
}
// Generet Short URL
function doSort()
{
var longUrl = location.href;
var request = gapi.client.urlshortener.url.insert({
'resource': {
'longUrl': longUrl
}
});
request.execute(function(response)
{
if (response.id != null)
{
str = response.id;
document.getElementById("outputshorturl").value = str;
// Call function Generet QR Code
document.getElementById("qrOutputImage").src = updateQRImage(longUrl);
}
});
}
// Load Google API Client
function load()
{
gapi.client.setApiKey('Replace Me'); // Get your own API Key from https://code.google.com/apis/console/
gapi.client.load('urlshortener', 'v1', function() {
document.getElementById("outputshorturl").innerHTML = "";
});
}
$(window).load(load);
// Auto select input box short url
$("#outputshorturl").click(function () {
$(this).select();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment