allow social share of projects on twitter & facebook

README.md

@@ -217,13 +217,19 @@ See https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
 
     TWITTER_NAME
 
-Identifier of the Twitter account, for witch the last tweet will be displayed on the home page.
+Identifier of the Twitter account, from witch the last tweet will be fetched and displayed on the home page. 
+It will also be used for [Twitter Card analytics](https://dev.twitter.com/cards/analytics).
 
     TWITTER_CONSUMER_KEY, TWITTER_CONSUMER_SECRET, TWITTER_ACCESS_TOKEN & TWITTER_ACCESS_TOKEN_SECRET
 
 Keys and secrets to access the twitter API.
 Retrieve them from https://apps.twitter.com
 
+    FACEBOOK_APP_ID
+
+This is optional. You can follow [this guide to get your personal App ID](https://developers.facebook.com/docs/apps/register).
+If you do so, you'll be able to customize and get statistics about project shares on Facebook.
+
     Settings related to i18n
 
 See the [Settings](#i18n-settings) section of the [Internationalization (i18n)](#i18n) paragraph for a detailed description of these parameters.

app/assets/javascripts/controllers/projects.coffee.erb

@@ -420,6 +420,8 @@ Application.Controllers.controller "ShowProjectController", ["$scope", "$state",
     else
       console.error _t('unauthorized_operation')
 
+
+
   ##
   # Open a modal box containg a form that allow the end-user to signal an abusive content
   # @param e {Object} jQuery event
@@ -455,4 +457,19 @@ Application.Controllers.controller "ShowProjectController", ["$scope", "$state",
             growl.error(_t('an_error_occured_while_sending_your_report'))
       ]
 
+
+
+  ##
+  # Return the URL allowing to share the current project on the Facebook social network
+  ##
+  $scope.shareOnFacebook = ->
+    'https://www.facebook.com/share.php?u='+$state.href('app.public.projects_show', {id: $scope.project.slug}, {absolute: true}).replace('#', '%23')
+
+
+
+  ##
+  # Return the URL allowing to share the current project on the Twitter social network
+  ##
+  $scope.shareOnTwitter = ->
+    'https://twitter.com/intent/tweet?url='+encodeURIComponent($state.href('app.public.projects_show', {id: $scope.project.slug}, {absolute: true}));
 ]

app/assets/stylesheets/app.buttons.scss

@@ -2,7 +2,7 @@
 .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle {
 
 	background-color: #f2f2f2;
-	
+
 }
 
 .btn{
@@ -24,6 +24,30 @@
 	}
 }
 
+.btn-facebook {
+  border: 1px solid #8b9dc3;
+  background-color: #3b5998;
+  color: white;
+
+  &:hover {
+    border: 1px solid #7d8fb4;
+    background-color: #394c89;
+    color: white;
+  }
+}
+
+.btn-twitter {
+  border: 1px solid #ccd6dd;
+  background-color: #55acee;
+  color: white;
+
+  &:hover {
+    border: 1px solid #bdc7ce;
+    background-color: #539fdf;
+    color: white;
+  }
+}
+
 
 .btn-block {
 	padding-left: 12px;

app/assets/templates/projects/show.html.erb

@@ -56,6 +56,11 @@
 
     </div>
 
+    <div class="text-center" id="social-share">
+      <a ng-href="{{shareOnFacebook()}}" target="_blank" class="btn btn-facebook btn-lg m-t"><i class="fa fa-facebook m-r"></i> {{ 'share_on_facebook' | translate }}</a>
+      <a ng-href="{{shareOnTwitter()}}" target="_blank" class="btn btn-twitter btn-lg m-t"><i class="fa fa-twitter m-r"></i> {{ 'share_on_twitter' | translate }}</a>
+    </div>
+
     <div class="wrapper-lg">
       <dir-disqus disqus-shortname="{{ disqusShortname }}" disqus-identifier="project_{{ project.id }}" disqus-url="{{ projectUrl }}" ready-to-bind="{{ project }}">
       </dir-disqus>

app/controllers/social_bot_controller.rb

@@ -1,8 +1,8 @@
 class SocialBotController < ActionController::Base
   def share
     case request.original_fullpath
-      when /=%2Fprojects%2F([\-0-9a-z]+)/
-        @project = Project.friendly.find("#{$1}")
+      when /(=%2F|\/)projects(%2F|\/)([\-0-9a-z]+)/
+        @project = Project.friendly.find("#{$3}")
       else
         puts "unknown bot request : #{request.original_url}"
     end

app/views/social_bot/share.html.erb

@@ -5,11 +5,22 @@
 <html lang="<%= I18n.locale %>" ng-app="application" class="app">
 <head>
   <meta charset="utf-8">
+
+  <!-- Facebook Open Graph -->
   <meta property="og:title" content="<%= @project.name %>"/>
   <meta property="og:description" content="<%= strip_tags(@project.description) %>"/>
   <meta property="og:image" content="<%= root_url+image.url %>"/>
   <meta property="og:image:width" content="<%= width%>" />
   <meta property="og:image:height" content="<%=height%>" />
-  <meta http-equiv="refresh" content="0;url=<%= root_url+'#!/projects/'+@project.slug %>">
+  <meta property="fb:app_id" content="<%= Rails.application.secrets.facebook_app_id%>" />
+  <meta property="og:url" content="<%= root_url+'#!/projects/'+@project.slug %>" />
+
+  <!-- Twitter Cards-->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="<%= ENV['TWITTER_NAME'] %>">
+  <meta name="twitter:title" content="<%= @project.name %>">
+  <meta name="twitter:description" content="<%= strip_tags(@project.description) %>">
+  <meta name="twitter:image" content="<%= root_url+image.url %>">
+
 </head>
 </html>

config/application.yml.default

@@ -34,6 +34,8 @@ TWITTER_CONSUMER_SECRET: ''
 TWITTER_ACCESS_TOKEN: ''
 TWITTER_ACCESS_TOKEN_SECRET: ''
 
+FACEBOOK_APP_ID: ''
+
 RAILS_LOCALE: 'fr'
 MOMENT_LOCALE: 'fr'
 SUMMERNOTE_LOCALE: 'fr-FR'

config/locales/app.public.en.yml

@@ -140,6 +140,8 @@ en:
       projects_show:
         # details of a projet
         project_description: "Project description"
+        share_on_facebook: "Share on Facebook"
+        share_on_twitter: "Share on Twitter"
         by_name: "By {{NAME}}"  # angular interpolation
         posted_on_: "Posted on"
         CAD_file_to_download: "{COUNT, plural, =0{No CAD files} =1{CAD file to download} other{CAD files to download}}"  # messageFormat interpolation

config/locales/app.public.fr.yml

@@ -140,6 +140,8 @@ fr:
       projects_show:
         # détails d'un projet
         project_description: "Description du projet"
+        share_on_facebook: "Partager sur Facebook"
+        share_on_twitter: "Partager sur Twitter"
         by_name: "Par {{NAME}}"  # angular interpolation
         posted_on_: "posté le"
         CAD_file_to_download: "{COUNT, plural, =0{Aucun fichier CAO} =1{Fichier CAO à télécharger} other{Fichiers CAO à télécharger}}"  # messageFormat interpolation

config/routes.rb

@@ -20,8 +20,6 @@ Rails.application.routes.draw do
 
   constraints :user_agent => /facebookexternalhit\/[0-9]|Twitterbot|Pinterest|Google.*snippet/ do
     root :to => 'social_bot#share', as: :bot_root
-    #TODO encode '#' in url with %23
-    # button => https://www.facebook.com/share.php?u=$URL
   end
 
   ## You can have the root of your site routed with "root"

config/secrets.yml

@@ -35,6 +35,7 @@ development:
   navinum_api_login: <%= ENV["NAVINUM_API_LOGIN"] %>
   navinum_api_password: <%= ENV["NAVINUM_API_PASSWORD"] %>
   log_level: <%= ENV["LOG_LEVEL"] %>
+  facebook_app_id: <%= ENV["FACEBOOK_APP_ID"] %>
 
 test:
   secret_key_base: 83daf5e7b80d990f037407bab78dff9904aaf3c195a50f84fa8695a22287e707dfbd9524b403b1dcf116ae1d8c06844c3d7ed942564e5b46be6ae3ead93a9d30
@@ -61,6 +62,7 @@ test:
   navinum_api_login:
   navinum_api_password:
   log_level: <%= ENV["LOG_LEVEL"] %>
+  facebook_app_id: <%= ENV["FACEBOOK_APP_ID"] %>
 
 staging:
   secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>
@@ -94,6 +96,7 @@ staging:
   navinum_api_login: <%= ENV["NAVINUM_API_LOGIN"] %>
   navinum_api_password: <%= ENV["NAVINUM_API_PASSWORD"] %>
   log_level: <%= ENV["LOG_LEVEL"] %>
+  facebook_app_id: <%= ENV["FACEBOOK_APP_ID"] %>
 
 # Do not keep production secrets in the repository,
 # instead read values from the environment.
@@ -130,3 +133,4 @@ production:
   navinum_api_login: <%= ENV["NAVINUM_API_LOGIN"] %>
   navinum_api_password: <%= ENV["NAVINUM_API_PASSWORD"] %>
   log_level: <%= ENV["LOG_LEVEL"] %>
+  facebook_app_id: <%= ENV["FACEBOOK_APP_ID"] %>