-
-
Save anuxraw/947ee62ed04a9bb31ce773435a5adae8 to your computer and use it in GitHub Desktop.
Generet & Share Short URL + QR Code with Google API & Bootstrap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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">×</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