BeneTag/viewproduct.html at master · faaez/BeneTag · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/fb/benetag#">
    <meta property="fb:app_id"      content="286512274727203" />
    <meta property="og:type"        content="website" />
    <meta property="og:url"         content="{{url}}" />
    <meta property="og:title"       content="{{name}}" />
    <meta property="og:description" content="Made by {{producer}}" />
    <meta property="og:image"       content="{{qr_url}}" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>{{name}} by {{producer}}</title>
    <link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/viewproduct.css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="//connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript">
        function initialize() {
            {% if latitude and longitude %}
                var latlng = new google.maps.LatLng({{latitude}}, {{longitude}});
                var myOptions = {
                    zoom: 8,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                document.getElementById("map_canvas").style.position="fixed";
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                });
            {% endif %}
            FB.init({
                appId      : '286512274727203', // App ID
                channelUrl : 'benetag.com/view', // Channel File
                status     : true, // check login status
                cookie     : true, // enable cookies to allow the server to access the session
                oauth      : true, // enable OAuth 2.0
                xfbml      : true  // parse XFBML
            });
        }

        function fbshare() {
            FB.login(function(response) {
            if (response.authResponse) {
                var request = $.ajax({
                    url: "https://graph.facebook.com/me/benetag:share",
                    type: "POST",
                    data: {website : '{{url}}', access_token: response.authResponse.accessToken},
                    success: function(data) {
                    },
                });
            }
            }, {scope : 'publish_actions'});
        }
    </script>

  </head>
  <body onload="initialize()">
    <div id="header" width="100%"><img id="headerimg" src="static/header.png" width="100%"></img></div>
    <h1 id="productname"> {{ name }} </h1>
    {% if has_image %}
        <img id="productimage" src="productimage?id={{id}}"></img>
    {% endif %}
    <p id="producername">Made by {{producer}} </p>
    <p> Workers: </p>
    {% for worker in workers %}
	<p>{{worker.name}} </p>
    {% endfor %}
    {% if latitude and longitude %}
        <div id="map_canvas"></div>
    {% endif %}
    <div id="factory_link"><a href="viewfactory?id={{factory_id}}">View Factory</a></div>
    <div id="qrimage"><img src="qr?id={{id}}"></img></div>

{% if can_edit %}
    <small><a href="/editproduct?id={{id}}">Edit your product's profile</a></small>
{% endif %}

    <button class="btn primary" id="fbshare" onclick="fbshare()">Share on Facebook</img></button>
    <div id="fb-root"></div>
    <a href="http://pinterest.com/pin/create/button/?url={{url}} &media={{qr_url}}&description=Made by {{producer}}" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
    <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>
  </body>
</html>