Social QR Code

qr.html
HTML
      
        
          
          
            <!-- This template was designed by Amit Agarwal of Digital Inspiration (www.labnol.org)   -->
<!-- The design and template is licensed under a Creative Commons Attribution 3.0 License -->
 
<!-- Please see http://www.labnol.org/?p=25841 for instructions on how to modify the file -->
 
<html>
  <head>
    <title>QR Code</title>
 
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="cleartype" content="on">
 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Forum' rel='stylesheet' type='text/css'>
 
 
    <style>
 
      body {
        width:100%;
        margin:0; padding:0;
        background-color:#222;
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
      }
 
      .qrcodes {
        width: 280px;
        margin: 3em auto 0;
        padding: 1em;
      }
 
      h1 {
        font-size: 3.5em;
        font-family: 'Forum', cursive;
        font-weight: normal;
        margin: 0;
        padding: 0;
      }
 
      h1 a {
        text-decoration: none;
        color: #fafafa;
      }
 
      p {
        font-size: .75em;
        color: #ccc;
        margin: 2em 0;
      }
 
      small {
        margin-top: 2em;
        display: block;
      }
 
      small a {
        text-decoration: none;
        text-transform: uppercase;
        font-size: .75em;
        color: #999;
      }
 
      .social {
        margin-top: 1.5em;
      }
 
      .fb-like {
        padding: 0 20px 0 0;
      }
 
 
    </style>
  </head>
 
  <body>
 
    <div class="qrcodes">
 
      <h1>
        <a href="http://www.example.com/">
          BRAND_NAME
        </a>
      </h1>
 
      <p>
        Please follow us on Twitter &amp; Facebook for news updates, goodies and exclusive offers.
      </p>
 
      <div class="social">
 
        <div class="fb-like" data-send="false"
           data-layout="button_count" data-width="300" data-show-faces="false"
           style="vertical-align:top;zoom:1;*display:inline"
           data-href="http://www.facebook.com/example">
        </div>
 
        <a href="http://twitter.com/example"
           class="twitter-follow-button" data-show-count="false"
           data-show-screen-name="false" data-dnt="true">
        </a>
 
      </div>
 
      <small>
        <a href="tel:123456">Call Us</a> |
        <a href="mailto:email@example.com">Send an Email</a> |
        <a href="https://maps.google.co.in/">Google Maps</a>
      </small>
 
    </div>
 
    <div id="fb-root"></div>
 
    <script>
      !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)) {
          js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";
          fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    </script>
 
    <script>
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
    
    <script type="text/javascript">      
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-XXX']);
      _gaq.push(['_trackPageview']);
      
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
 
  </body>
</html>

          
        

    
Please sign in to comment on this gist.
public labnol / qr.html Last active 2013-08-10

public

labnol / qr.html

Last active 2013-08-10
