FB + Twitter sharing on mobile pages

apps/desktop/views.py

@@ -12,7 +12,8 @@ from spark.helpers import secure_url
 from spark.urlresolvers import absolute_reverse
 
 from sharing.utils import set_shared_by_cookie
-from sharing.messages import TWITTER_SHARE_MSG, TWITTER_SPARK_MSG, TWITTER_BADGE_MSG, FACEBOOK_SPARK_TITLE, FACEBOOK_SPARK_MSG, FACEBOOK_BADGE_MSG 
+from sharing.messages import (TWITTER_SHARE_MSG, TWITTER_SPARK_MSG, TWITTER_BADGE_MSG, 
+                              FACEBOOK_SPARK_TITLE, FACEBOOK_SPARK_MSG, FACEBOOK_BADGE_MSG)
 
 from users.models import User, Profile
 

apps/mobile/templates/mobile/badges.html

@@ -21,7 +21,9 @@
             </div>
         </div>
         <div class="button-wrapper">
-            <button ontouchstart="">{{ _('Share my badge') }}</button>
+            <a href="{{ url('mobile.sharebadge') }}">
+                <button ontouchstart="">{{ _('Share my badge') }}</button>
+            </a>
         </div>
     </li>
     <img src="{{ MEDIA_URL }}img/mobile/badge-label-bg.png" alt="" class="preload">

apps/mobile/templates/mobile/sharebadge.html

@@ -8,8 +8,14 @@
         {{ _('Share your cool badge with others by clicking a link below.') }}
     </p>
     <ul id="sharing">
-        <li class="cta"><a href="">{{ _('Share on Twitter') }}</a></li>
-        <li class="cta"><a href="">{{ _('Share on Facebook') }}</a></li>
+        <li class="cta"><a href="http://twitter.com/share?url={{twitter_url}}&amp;text={{ twitter_badge_msg % {'badge_name':badge_name, 'short_url':''} }}&amp;via=mozmobile" target="_blank">{{ _('Share on Twitter') }}</a></li>
+        <li class="cta"><a href="http://m.facebook.com/dialog/feed?
+            display=touch&amp;
+            app_id=100139296738213&amp;
+            redirect_uri=https://spark.allizom.org&amp;
+            link=https://spark.allizom.org/&amp;
+            name={{facebook_title}}&amp;
+            message={{ facebook_badge_msg % {'badge_name':badge_name} }}">{{ _('Share on Facebook') }}</a></li>
         <li class="cta"><a href="">{{ _('Share via SMS') }}</a></li>
     </ul>
 {% endblock %}

apps/mobile/templates/mobile/sharelink.html

@@ -8,18 +8,14 @@
         {{ _('Select a link below to start sharing your Spark with friends.') }}
     </p>
     <ul id="sharing">
-        <li class="cta"><a href="">{{ _('Share on Twitter') }}</a></li>
+        <li class="cta"><a href="http://twitter.com/share?url={{twitter_url}}&amp;text={{twitter_msg}}%20%23spark&amp;via=mozmobile" target="_blank">{{ _('Share on Twitter') }}</a></li>
         <li class="cta"><a href="http://m.facebook.com/dialog/feed?
-        display=touch&amp;
-        app_id=123050457758183&amp;
-        redirect_uri=http://www.example.com&amp;
-        link=http://www.example.com&amp;
-        picture=http://www.example.com&amp;
-        name=Name&amp;
-        caption=caption&amp;
-        description=description&amp;
-        {% set message='Wanna%20help%20me%20light%20up%20the%20world%3F%20Check%20out%20my%20Spark%21' %}
-        message={{ message }}">{{ _('Share on Facebook') }}</a></li>
+            display=touch&amp;
+            app_id=100139296738213&amp;
+            redirect_uri=https://spark.allizom.org&amp;
+            link=https://spark.allizom.org/&amp;
+            name={{facebook_title}}&amp;
+            message={{facebook_spark_msg}}">{{ _('Share on Facebook') }}</a></li>
         <li class="cta"><a href="">{{ _('Share via SMS') }}</a></li>
     </ul>
 {% endblock %}

apps/mobile/views.py

@@ -1,6 +1,7 @@
 from django.http import HttpResponseRedirect
 from django.shortcuts import get_object_or_404
 
+import urllib
 import jingo
 
 from spark.models import City
@@ -13,10 +14,14 @@ from users.models import User, UserNode
 from users.utils import create_relationship
 
 from challenges.tasks import update_completed_challenges
+from challenges.models import Challenge
+from challenges.utils import get_badge_name
 
 from desktop.views import home as desktop_home
 
 from sharing.utils import set_shared_by_cookie
+from sharing.messages import (TWITTER_SHARE_MSG, TWITTER_SPARK_MSG, TWITTER_BADGE_MSG, 
+                              FACEBOOK_SPARK_TITLE, FACEBOOK_SPARK_MSG, FACEBOOK_BADGE_MSG)
 
 from .forms import BoostStep1Form, BoostStep2Form
 from .decorators import login_required, logout_required
@@ -229,12 +234,26 @@ def shareqr(request):
 
 @login_required
 def sharelink(request):
-    return jingo.render(request, 'mobile/sharelink.html')
+    data = {'twitter_url': urllib.quote(request.user.profile.twitter_sharing_url),
+            'twitter_msg': urllib.quote(unicode(TWITTER_SPARK_MSG)),
+            'facebook_title': urllib.quote(unicode(FACEBOOK_SPARK_TITLE)),
+            'facebook_spark_msg': urllib.quote(unicode(FACEBOOK_SPARK_MSG))}
+            
+    return jingo.render(request, 'mobile/sharelink.html', data)
 
 
 @login_required
 def sharebadge(request):
-    return jingo.render(request, 'mobile/sharebadge.html')
+    badge_id = request.GET.get('id')
+    try:
+        data = {'badge_name': get_badge_name(badge_id),
+                'twitter_url': urllib.quote(request.user.profile.twitter_sharing_url),
+                'twitter_badge_msg': TWITTER_BADGE_MSG,
+                'facebook_title': urllib.quote(unicode(FACEBOOK_SPARK_TITLE)),
+                'facebook_badge_msg': FACEBOOK_BADGE_MSG }
+        return jingo.render(request, 'mobile/sharebadge.html', data)
+    except Challenge.DoesNotExist:
+        return HttpResponseRedirect(reverse('mobile.badges'))
 
 
 def about(request):

media/js/mobile/badges.js

@@ -40,6 +40,8 @@ var initBadges = function() {
         $badgeInfo.attr('id', 'badge-label');
         $badgeInfo.find('h2').text($(currentBadgeElement).data('name'));
         $badgeInfo.find('p').text($(currentBadgeElement).data('description'));
+        var url = $badgeInfo.find('a').attr('href');
+        $badgeInfo.find('a').attr('href', url+'?id='+$(currentBadgeElement).data('id'));
         
         if(viewportHeight > viewportWidth) {
             $lastBadge.after($badgeInfo.css('marginLeft', portraitMargin).fadeIn(500));