bug 640182: Stealing code from webowonder; switch back to FB sharer l…

…ink, add open graph metadata to the page, spawn popups
lmorchard · Mar 9, 2011 · e6157a4 · e6157a4
1 parent 3521846
commit e6157a4
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 24 deletions.
diff --git a/apps/demos/templates/demos/detail.html b/apps/demos/templates/demos/detail.html
@@ -1,9 +1,20 @@
 {% extends "demos/base.html" %}
 
+{% set full_url = request.build_absolute_uri(submission.get_absolute_url()) %}
+{% set short_url = full_url | bitly_shorten %}
+
 {% block pageid %}demos-detail{% endblock %}
 {% block bodyclass %}section-demos{% endblock %}
 {% block title %}{{ page_title(_('{subtitle} | Demo Studio') | f(subtitle=submission.title)) }}{% endblock %}
 
+{% block extrahead %}
+    <meta property="og:title" content="{{ submission.title }}"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:image" content="{{ request.build_absolute_uri(submission.screenshot_1.url) }}"/>    
+    <meta property="og:site_name" content="{{ page_title(_('Demo Studio')) }}"/>
+    <meta property="og:description" content="{{ submission.summary }}"/>
+{% endblock %}
+
 {% block content %}
 
 <section id="nav-toolbar">
@@ -94,20 +105,10 @@ <h1 class="page-title">{{submission.title}}</h1>
 
         <li class="share"><a href="#share-opts" id="sharetoggle" title="{{_('Share this demo with your social network')}}">{{_('Share It')}}</a>
           <ul id="share-opts">
-            {% set full_url = request.build_absolute_uri(submission.get_absolute_url()) %}
-            {% set short_url = full_url | bitly_shorten %}
             <li class="sharetitle">{{_('Share It')}}</li>
             <li class="twitter"><a href="http://twitter.com/share?{{ urlencode({"url":short_url, "text":submission.title, "via":"mozhacks"}) }}">{{_('Share on Twitter')}}</a></li>
+            <li class="facebook"><a href="http://www.facebook.com/sharer.php?{{ urlencode({"u":short_url, "t":submission.title}) }}">{{_('Share on Facebook')}}</a></li>
             <li class="link"><input id="shorturl" type="text" readonly="readonly" value="{{ short_url }}"></li>
-            <li class="facebook">
-                <iframe src="http://www.facebook.com/plugins/like.php?{{ urlencode({ 
-                    "href": full_url, "locale": LANG, "layout":"button_count", 
-                    "show_faces":"false", "width":"180", "action":"like", "font":"arial", 
-                    "colorscheme":"dark", "height":"21" }) 
-                }} scrolling="no" frameborder="0" 
-                style="border:none; overflow:hidden; width:180px; height:21px;" 
-                allowTransparency="true"></iframe>
-            </li>
           </ul>
           <script type="text/javascript">
               var so = document.getElementById('share-opts');
@@ -336,6 +337,12 @@ <h3>{{_('Report a Problem')}}</h3>
           $(this).removeClass("focus");
         });
 
+        $('#share-opts li a').click(function () {
+            var link = $(this);
+            window.open(link.attr('href'), 'sharer', 
+                'toolbar=0, status=0, resizable=1, width=626, height=436');
+            return false;
+        });
 
       });
       </script>

diff --git a/apps/demos/templates/demos/launch.html b/apps/demos/templates/demos/launch.html
@@ -1,13 +1,31 @@
 <!DOCTYPE html>
-<html lang="en-US" dir="ltr" id="developer-mozilla-org">
+<html lang="en-US" dir="ltr" id="developer-mozilla-org" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">
+{% set full_url = request.build_absolute_uri(submission.get_absolute_url()) %}
+{% set short_url = full_url | bitly_shorten %}
 <head>
   <title>{{ page_title(_('{subtitle} | Demo Studio') | f(subtitle=submission.title)) }}</title>
 
   <meta charset="utf-8">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+  <meta property="og:title" content="{{ submission.title }}"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:url" content="{{ full_url }}"/>
+  <meta property="og:image" content="{{ request.build_absolute_uri(submission.screenshot_1.url) }}"/>    
+  <meta property="og:site_name" content="{{ page_title(_('Demo Studio')) }}"/>
+  <meta property="og:description" content="{{ submission.summary }}"/>
 
   <link rel="stylesheet" type="text/css" media="all" href="{{ MEDIA_URL }}css/demowrap.css">
   <script src="{{ MEDIA_URL }}js/jquery-1.4.2.min.js"></script>
+
+  <script type="text/javascript">
+    $('#share-opts li a').click(function () {
+        var link = $(this);
+        window.open(link.attr('href'), 'sharer', 
+            'toolbar=0, status=0, resizable=1, width=626, height=436');
+        return false;
+    });
+  </script>
 
   <!--[if IE]>
   <meta http-equiv="imagetoolbar" content="no">
@@ -42,19 +60,9 @@ <h1 class="demo-title"><a href="{{ submission.get_absolute_url() }}">{{ submissi
       </li>
       <li class="share"><a href="#share-opts" id="sharetoggle" title="{{_('Share this demo with your social network')}}">{{_('Share It')}}</a>
         <ul id="share-opts">
-          {% set full_url = request.build_absolute_uri(submission.get_absolute_url()) %}
-          {% set short_url = full_url | bitly_shorten %}
           <li class="twitter"><a href="http://twitter.com/share?{{ urlencode({"url":short_url, "text":submission.title, "via":"mozhacks"}) }}">{{_('Share on Twitter')}}</a></li>
+          <li class="facebook"><a href="http://www.facebook.com/sharer.php?{{ urlencode({"u":short_url, "t":submission.title}) }}">{{_('Share on Facebook')}}</a></li>
           <li class="link"><input id="shorturl" type="text" readonly="readonly" value="{{ short_url }}"></li>
-          <li class="facebook">
-                <iframe src="http://www.facebook.com/plugins/like.php?{{ urlencode({ 
-                    "href": full_url, "locale": LANG, "layout":"button_count", 
-                    "show_faces":"false", "width":"180", "action":"like", "font":"arial", 
-                    "colorscheme":"dark", "height":"21" }) 
-                }} scrolling="no" frameborder="0" 
-                style="border:none; overflow:hidden; width:180px; height:21px;" 
-                allowTransparency="true"></iframe>
-          </li>
         </ul>
       </li>
     </ul>

diff --git a/templates/base.html b/templates/base.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ LANG }}" dir="{{ DIR }}" id="developer-mozilla-org">
+<html lang="{{ LANG }}" dir="{{ DIR }}" id="developer-mozilla-org" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">
 <head>
   <title>{% block title %}{{ _('Mozilla Developer Network') }}{% endblock %}</title>