Buyer's Guide og tags & main nav share icons (#1926)

Related #1899 https://foundation-mofostaging-pr-1926.herokuapp.com/privacynotincluded/ ### Only covers the following - Got share icons on main nav to work - Note: I got share icons to work without using ShareProgress. I found out [Facebook stopped supporting prefilled text for share](https://developers.facebook.com/docs/apps/review/prefill) anyway so I guess we are good leaving ShareProgress out. - Added OG tags ### Not covered in this PR - creep-o-meter related share
MozillaFoundation · Oct 18, 2018 · 45c684c · 45c684c
1 parent cf5ccd9
commit 45c684c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/network-api/networkapi/buyersguide/templates/bg_base.html b/network-api/networkapi/buyersguide/templates/bg_base.html
@@ -3,6 +3,11 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="privacy not included" />
+    <meta property="og:description" content="This year, learn what tech comes with privacy included, using Mozilla's buyer's guide for connected gadgets." />
+    <meta property="og:image" content="{{request.scheme}}://{{request.get_host}}/_images/buyers-guide/share.jpg" />
+    <meta property="og:url" content="{{request.scheme}}://{{request.get_host}}{{request.path}}" />
     <link rel="stylesheet" href="/_css/buyers-guide.compiled.css">
     <link rel="stylesheet" href="//code.cdn.mozilla.net/fonts/fira.css">
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Nunito+Sans:400,300,700,300i">

diff --git a/network-api/networkapi/buyersguide/templates/social.html b/network-api/networkapi/buyersguide/templates/social.html
@@ -1,19 +1,23 @@
+{% with share_text="Shop safe this holiday season using @mozilla’s PrivacyNotIncluded.org buyer’s guide. 70 popular connected products rated to help understand if they are likely to spy on you. Find out which are creepy and which aren’t." twitter_share_link="https://twitter.com/intent/tweet?text=" email_share_link="mailto:?&body=" facebook_share_link="https://www.facebook.com/sharer/sharer.php?u=PrivacyNotIncluded.org" %}
+
 {% if mobile %}
   <div class="social d-flex flex-column">
-    <a class="social-button social-button-fb body-large" href="">Facebook</a>
-    <a class="social-button social-button-twitter body-large" href="">Twitter</a>
-    <a class="social-button social-button-email body-large" href="">Email</a>
-    <a class="social-button social-button-link body-large" href="">Copy link</a>
+    <a class="social-button social-button-fb body-large" href="{{facebook_share_link}}">Facebook</a>
+    <a class="social-button social-button-twitter body-large" href="{{twitter_share_link}}{{share_text|urlencode}}">Twitter</a>
+    <a class="social-button social-button-email body-large" href="{{email_share_link}}{{share_text|urlencode}}">Email</a>
+    <a class="social-button social-button-link copy-link body-large" href="">Copy link</a>
   </div>
 {% else %}
 <div class="social d-flex align-items-center">
-  <a class="social-button social-button-fb hidden-sm-down" href=""><span class="sr-only">Facebook</span></a>
-  <a class="social-button social-button-twitter hidden-sm-down" href=""><span class="sr-only">Twitter</span></a>
-  <a class="social-button social-button-email hidden-sm-down" href=""><span class="sr-only">Email</span></a>
-  <a class="social-button social-button-link hidden-sm-down" href=""><span class="sr-only">Copy link</span></a>
+  <a class="social-button social-button-fb hidden-sm-down" href="{{facebook_share_link}}"><span class="sr-only">Facebook</span></a>
+  <a class="social-button social-button-twitter hidden-sm-down" href="{{twitter_share_link}}{{share_text|urlencode}}" target="_blank"><span class="sr-only">Twitter</span></a>
+  <a class="social-button social-button-email hidden-sm-down" href="{{email_share_link}}{{share_text|urlencode}}"><span class="sr-only">Email</span></a>
+  <a class="social-button social-button-link copy-link hidden-sm-down" href=""><span class="sr-only">Copy link</span></a>
   <a class="d-none d-sm-block btn btn-donate ml-3 mr-0 hidden-sm-down" href="https://donate.mozilla.org">Donate</a>
   <button class="burger btn btn-link p-0 ml-4 hidden-md-up">
     <span class="sr-only">Share</span>
   </button>
 </div>
 {% endif %}
+
+{% endwith %}
diff --git a/source/images/buyers-guide/share.jpg b/source/images/buyers-guide/share.jpg