Merge lp:~canonical-ca-hackers/ubuntu-webcatalog/938223-share-applications into lp:ubuntu-webcatalog

[Łukasz Czyżykowski]

Added sharing to Twitter, Google Plus and Facebook.

Overview
========
This branch adds three "Share" buttons to application_detail page. Those are Twitter, Facebbok and Google +1.

Details
=======
I wasn't able to figure out a way of making a mechanism to add a new one easy, as those are quite specific. At least Twitter one is. Other two only require a static html snippet to be added, but still, that's not a single line.

Currently, when running locally, Twitter share will not include an url, because JavaScript Twitter code filters out localhost urls, I guess to prevent flooding it with in-development links.

[lp:~canonical-ca-hackers/ubuntu-webcatalog/938223-share-applications]

68. By Łukasz Czyżykowski on 2012-03-08

[r=elachuni] Branch based deployment fabric task.

69. By Danny Tamez on 2012-03-08

[r=elachuni],[bug=938217] Send a link via email for the user to download the application at a later time.

70. By Łukasz Czyżykowski on 2012-03-08

[r=elachuni],[bug=938223] Added sharing to Twitter, Google Plus and Facebook.

=== modified file 'src/webcatalog/static/css/webcatalog.css'
--- src/webcatalog/static/css/webcatalog.css	2012-03-08 18:13:11 +0000
+++ src/webcatalog/static/css/webcatalog.css	2012-03-08 20:31:18 +0000
@@ -38,6 +38,9 @@
 .license th {
     width: 50px;
 }
+.share {
+    padding: 16px;
+}
 .description {
     padding: 42px 16px;
     font-size: 14px;
@@ -330,8 +333,9 @@
 }
 
 #sendButton {
-    margin-left: 127px;
+    margin-left: 107px;
     margin-bottom: 3px;
+    width: 80px;
 }
 form ul {
     list-style: none;
@@ -349,14 +353,24 @@
 p.error {
     background-color: #f2cfce;
 }
-#emailcontainer {
-    padding-top: 8px;
-    padding-left: 9px;
-}
+.emaillinkportlet {
+    margin-top: 64px;
+    border-bottom: 1px dotted gray;
+}
+
+.emaillinkportlet .portletheader{
+    background: #bbb;
+    margin-bottom: 8px;
+}
+
 #emailForm label {
-    display: block;
+    display: inline;
     padding-bottom: 3px;
 }
+#emailForm input#id_email {
+    width: 120px;
+}
+
 .message {
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;

=== modified file 'src/webcatalog/templates/webcatalog/application_detail.html'
--- src/webcatalog/templates/webcatalog/application_detail.html	2012-03-08 18:13:11 +0000
+++ src/webcatalog/templates/webcatalog/application_detail.html	2012-03-08 20:31:18 +0000
@@ -21,6 +21,13 @@
     Y.io(uri);
 });
 </script>
+<meta property="og:site_name" content="Ubuntu Apps Directory" />
+<meta property="og:title" content="{{ application.name }}" />
+{% if application.icon %}
+  <meta property="og:image" content="{{ application.icon.url }}" />
+{% else %}
+  <meta property="og:image" content="{{ STATIC_URL }}images/applications-other-64.png" />
+{% endif %}
 {% endblock %}
 
 {% block content %}
@@ -42,20 +49,18 @@
                         <a href="{% url wc-package-detail ds.code_name application.package_name %}">Ubuntu {{ ds.version }} ({{ ds.code_name }})</a>
                     {% endifequal %}</li>
                 {% endfor %}
-                <li>
-                    <div id='emailcontainer'>
-                        <div id='emailtext'>Email me a link to download</div>
-                        <div id='emailForm'>
-                            <form action="." method="post" accept-charset="utf-8">
-                                {% csrf_token %}
-                                {{ email_form.as_p }}
-                                <button type='submit' id='sendButton' class='install-butotn'>Send it</button>
-                            </form>
-                        </div>
-                    </div>
-                </li>
             </ul>
         </div>
+        <div class="portlet emaillinkportlet">
+            <div class="portletheader">Email me a link to download</div>
+            <div id='emailForm'>
+                <form action="." method="post" accept-charset="utf-8">
+                    {% csrf_token %}
+                    {{ email_form.as_p }}
+                    <button type='submit' id='sendButton' class='install-butotn'>Send it</button>
+                </form>
+            </div>
+        </div>
     </div>
   <div id="sc-mockup">
     <div class="header">
@@ -91,6 +96,11 @@
         </tr>
       </table>
     </div>
+    <div class="share">
+      {% include "webcatalog/twitter_share_snippet.html" %}
+      {% include "webcatalog/googleplus_share_snippet.html" %}
+      {% include "webcatalog/facebook_share_snippet.html" %}
+    </div>
     <div class="reviews">
       <h2>{% trans "Reviews" %}</h2>
       <div id="reviews_placeholder">

=== added file 'src/webcatalog/templates/webcatalog/facebook_share_snippet.html'
--- src/webcatalog/templates/webcatalog/facebook_share_snippet.html	1970-01-01 00:00:00 +0000
+++ src/webcatalog/templates/webcatalog/facebook_share_snippet.html	2012-03-08 20:31:18 +0000
@@ -0,0 +1,10 @@
+<div class="fb-like" data-send="true" data-width="400" data-show-faces="false"></div>
+
+<div id="fb-root"></div>
+<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>

=== added file 'src/webcatalog/templates/webcatalog/googleplus_share_snippet.html'
--- src/webcatalog/templates/webcatalog/googleplus_share_snippet.html	1970-01-01 00:00:00 +0000
+++ src/webcatalog/templates/webcatalog/googleplus_share_snippet.html	2012-03-08 20:31:18 +0000
@@ -0,0 +1,8 @@
+<g:plusone size="medium"></g:plusone>
+<script type="text/javascript">
+  (function() {
+    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
+    po.src = 'https://apis.google.com/js/plusone.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
+  })();
+</script>

=== added file 'src/webcatalog/templates/webcatalog/twitter_share_snippet.html'
--- src/webcatalog/templates/webcatalog/twitter_share_snippet.html	1970-01-01 00:00:00 +0000
+++ src/webcatalog/templates/webcatalog/twitter_share_snippet.html	2012-03-08 20:31:18 +0000
@@ -0,0 +1,2 @@
+<a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out {{ application.name }} in Ubuntu Apps Directory" data-hashtags="ubuntu" data-url="{{ absolute_url }}">Tweet</a>
+<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>

=== modified file 'src/webcatalog/tests/test_views.py'
--- src/webcatalog/tests/test_views.py	2012-03-08 18:13:11 +0000
+++ src/webcatalog/tests/test_views.py	2012-03-08 20:31:18 +0000
@@ -22,6 +22,8 @@
     with_statement,
     )
 
+import re
+
 from decimal import Decimal
 
 from django.conf import settings
@@ -133,7 +135,7 @@
         response, app = self.get_app_and_response()
 
         self.assertContains(response, 'Install %s' % app.name)
-        self.assertNotContains(response, 'Purcchase %s' % app.name)
+        self.assertNotContains(response, 'Purchase %s' % app.name)
 
     def test_button_for_for_puchase_app(self):
         response, app = self.get_app_and_response(for_purchase=True)
@@ -141,6 +143,34 @@
         self.assertContains(response, 'Purchase %s' % app.name)
         self.assertNotContains(response, 'Install %s' % app.name)
 
+    def test_open_graph_tags_are_present(self):
+        response, app = self.get_app_and_response()
+        regex = r'<meta property="([^"]+)" content="([^"]+)" />'
+        og_tags = dict(m for m in re.findall(regex, response.content)
+                       if 'og:' in m[0])
+
+        self.assertEqual(og_tags, {
+            'og:site_name': "Ubuntu Apps Directory",
+            'og:title': app.name,
+            'og:image': '/assets/images/applications-other-64.png'
+        })
+
+    def test_twitter_button_is_present(self):
+        response, app = self.get_app_and_response()
+
+        self.assertContains(response, "Tweet</a>")
+        self.assertContains(response, "https://twitter.com/share")
+
+    def test_google_plus_button_is_present(self):
+        response, app = self.get_app_and_response()
+
+        self.assertContains(response, "<g:plusone")
+
+    def test_facebook_like_button_is_present(self):
+        response, app = self.get_app_and_response()
+
+        self.assertContains(response, '<div class="fb-like"')
+
     def test_link_to_different_series(self):
         # If the users series is different from the app, but the app is
         # available for their series, then we display a link to the app

=== modified file 'src/webcatalog/views.py'
--- src/webcatalog/views.py	2012-03-07 22:57:41 +0000
+++ src/webcatalog/views.py	2012-03-08 20:31:18 +0000
@@ -213,6 +213,8 @@
         'available_distroseries': app.available_distroseries(),
         'breadcrumbs': app.crumbs(),
         'distroseries': distro,
+        'absolute_url': request.build_absolute_uri(
+            reverse('wc-package-detail', args=[distro, package_name])),
         'email_form': form,
         }