Merge pull request #2994 from consul/social-meta-tags

[Backport] Social meta tags

app/views/proposals/_social_share.html.erb

@@ -0,0 +1,10 @@
+<%= render 'shared/social_share',
+            share_title: share_title,
+            title: proposal.title,
+            url: proposal_url(proposal),
+            description: t("proposals.share.message",
+                            summary: proposal.summary,
+                            org: setting['org_name']),
+            mobile: t("proposals.share.message_mobile",
+                        summary: proposal.summary,
+                        handle: setting['twitter_handle']) %>

app/views/proposals/_votes.html.erb

@@ -10,7 +10,8 @@
     <%= t("proposals.proposal.supports", count: proposal.total_votes) %>&nbsp;
     <span>
       <abbr>
-        <%= t("proposals.proposal.supports_necessary", number: number_with_delimiter(Proposal.votes_needed_for_success)) %>
+        <%= t("proposals.proposal.supports_necessary",
+               number: number_with_delimiter(Proposal.votes_needed_for_success)) %>
       </abbr>
     </span>
   </span>
@@ -60,11 +61,7 @@
 
   <% if voted_for?(@proposal_votes, proposal) && setting['twitter_handle'] %>
     <div class="share-supported">
-      <%= render partial: 'shared/social_share', locals: {
-          title: proposal.title,
-          url: proposal_url(proposal),
-          description: proposal.summary
-      } %>
+      <%= render 'proposals/social_share', proposal: proposal, share_title: false %>
     </div>
   <% end %>
 </div>

app/views/proposals/show.html.erb

@@ -192,12 +192,8 @@
                       { proposal: @proposal, vote_url: vote_proposal_path(@proposal, value: 'yes') } %>
           <% end %>
         </div>
-        <%= render partial: 'shared/social_share', locals: {
-          share_title: t("proposals.show.share"),
-          title: @proposal.title,
-          url: proposal_url(@proposal),
-          description: @proposal.summary
-        } %>
+
+        <%= render 'proposals/social_share', proposal: @proposal, share_title: t("proposals.show.share") %>
 
         <% if current_user %>
           <div class="sidebar-divider"></div>

app/views/shared/_social_share.html.erb

@@ -1,13 +1,17 @@
+<% description = local_assigns.fetch(:description, '') %>
+<% description = truncate(ActionView::Base.full_sanitizer.sanitize(description), length: 140) %>
 <% if local_assigns[:share_title].present? %>
   <div id="social-share" class="sidebar-divider"></div>
   <p class="sidebar-title"><%= share_title %></p>
 <% end %>
 <div class="social-share-full">
-  <%= social_share_button_tag("#{title} #{setting['twitter_hashtag']}",
-                              :url => local_assigns[:url],
-                              :image => local_assigns[:image_url].present? ? local_assigns[:image_url] : '',
-			      :desc => local_assigns[:description].present? ? local_assigns[:description] : '' ) %>
-  <a href="whatsapp://send?text=<%= CGI.escape(title) %>&nbsp;<%= url %>"
+  <%= social_share_button_tag("#{title} #{setting['twitter_hashtag']} #{setting['twitter_handle']}",
+                              url: local_assigns[:url],
+                              image: local_assigns.fetch(:image_url, ''),
+                              desc: description,
+                              'data-twitter-title': local_assigns[:mobile],
+                              'data-telegram-title': local_assigns[:mobile])%>
+  <a href="whatsapp://send?text=<%= local_assigns[:mobile]%>&nbsp;<%= url %>"
      class="show-for-small-only" data-action="share/whatsapp/share">
     <span class="icon-whatsapp whatsapp"></span>
     <span class="show-for-sr"><%= t("social.whatsapp") %></span>

config/locales/en/general.yml

@@ -450,6 +450,9 @@ en:
     update:
       form:
         submit_button: Save changes
+    share:
+      message: "I supported the proposal %{summary} in %{org}. If you're interested, support it too!"
+      message_mobile: "I supported the proposal %{summary} in %{handle}. If you're interested, support it too!"
   polls:
     all: "All"
     no_dates: "no date assigned"

config/locales/es/general.yml

@@ -450,6 +450,9 @@ es:
     update:
       form:
         submit_button: Guardar cambios
+    share:
+      message: "He apoyado la propuesta %{summary} en %{org}. Si te interesa, ¡apoya tú también!"
+      message_mobile: "He apoyado la propuesta %{summary} en %{handle}. Si te interesa, ¡apoya tú también!"
   polls:
     all: "Todas"
     no_dates: "sin fecha asignada"

db/dev_seeds/settings.rb

@@ -56,7 +56,8 @@ section "Creating Settings" do
   Setting.create(key: 'mailer_from_name', value: 'CONSUL')
   Setting.create(key: 'mailer_from_address', value: 'noreply@consul.dev')
   Setting.create(key: 'meta_title', value: 'CONSUL')
-  Setting.create(key: 'meta_description', value: 'Citizen Participation & Open Gov Application')
+  Setting.create(key: 'meta_description', value: 'Citizen participation tool for an open, '\
+                                                 'transparent and democratic government')
   Setting.create(key: 'meta_keywords', value: 'citizen participation, open government')
   Setting.create(key: 'verification_offices_url', value: 'http://oficinas-atencion-ciudadano.url/')
   Setting.create(key: 'min_age_to_participate', value: '16')

spec/features/social_media_meta_tags_spec.rb

@@ -5,16 +5,9 @@ feature 'Social media meta tags' do
   context 'Setting social media meta tags' do
 
     let(:meta_keywords) { 'citizen, participation, open government' }
-    let(:meta_title) { 'CONSUL TEST' }
-    let(:meta_description) do
-      "<p>Paragraph</p> <a href=\"http://google.es\">link</a> Lorem ipsum dolr"\
-      " sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididt"\
-      " ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostud"\
-    end
-    let(:sanitized_truncated_meta_description) do
-      "Paragraph link Lorem ipsum dolr sit amet, consectetur adipisicing elit,"\
-      " sed do eiusmod tempor incididt ut labore et dolore magna aliqua. ..."
-    end
+    let(:meta_title) { 'CONSUL' }
+    let(:meta_description) { 'Citizen participation tool for an open, '\
+                             'transparent and democratic government.' }
     let(:twitter_handle) { '@consul_test' }
     let(:url) { 'http://consul.dev' }
     let(:facebook_handle) { 'consultest' }
@@ -43,19 +36,21 @@ feature 'Social media meta tags' do
     scenario 'Social media meta tags partial render settings content' do
 
       visit root_path
+      expect(page).to have_meta "keywords", with: meta_keywords
+      expect(page).to have_meta "twitter:site", with: twitter_handle
+      expect(page).to have_meta "twitter:title", with: meta_title
+      expect(page).to have_meta "twitter:description", with: meta_description
+      expect(page).to have_meta "twitter:image",
+                                 with:'http://www.example.com/social_media_icon_twitter.png'
 
-      expect(page).to have_css 'meta[name="keywords"][content="' + meta_keywords + '"]', visible: false
-      expect(page).to have_css 'meta[name="twitter:site"][content="' + twitter_handle + '"]', visible: false
-      expect(page).to have_css 'meta[name="twitter:title"][content="' + meta_title + '"]', visible: false
-      expect(page).to have_css 'meta[name="twitter:description"][content="' + sanitized_truncated_meta_description + '"]', visible: false
-      expect(page).to have_css 'meta[name="twitter:image"][content="http://www.example.com/social_media_icon_twitter.png"]', visible: false
-      expect(page).to have_css 'meta[property="og:title"][content="' + meta_title + '"]', visible: false
-      expect(page).to have_css 'meta[property="article:publisher"][content="' + url + '"]', visible: false
-      expect(page).to have_css 'meta[property="article:author"][content="https://www.facebook.com/' + facebook_handle + '"]', visible: false
-      expect(page).to have_css 'meta[property="og:url"][content="http://www.example.com/"]', visible: false
-      expect(page).to have_css 'meta[property="og:image"][content="http://www.example.com/social_media_icon.png"]', visible: false
-      expect(page).to have_css 'meta[property="og:site_name"][content="' + org_name + '"]', visible: false
-      expect(page).to have_css 'meta[property="og:description"][content="' + sanitized_truncated_meta_description + '"]', visible: false
+      expect(page).to have_property "og:title", with: meta_title
+      expect(page).to have_property "article:publisher", with: url
+      expect(page).to have_property "article:author", with: 'https://www.facebook.com/' +
+                                                             facebook_handle
+      expect(page).to have_property "og:url", with: 'http://www.example.com/'
+      expect(page).to have_property "og:image", with: 'http://www.example.com/social_media_icon.png'
+      expect(page).to have_property "og:site_name", with: org_name
+      expect(page).to have_property "og:description", with: meta_description
     end
   end
 

spec/support/matchers/have_meta.rb

@@ -0,0 +1,15 @@
+RSpec::Matchers.define :have_meta do |name, with:|
+  match do
+    has_css?("meta[name='#{name}'][content='#{with}']", visible: false)
+  end
+
+  failure_message do
+    meta = first("meta[name='#{name}']", visible: false)
+
+    if meta
+      "expected to find meta tag #{name} with '#{with}', but had '#{meta[:content]}'"
+    else
+      "expected to find meta tag #{name} but there were no matches."
+    end
+  end
+end

spec/support/matchers/have_property.rb

@@ -0,0 +1,15 @@
+RSpec::Matchers.define :have_property do |property, with:|
+  match do
+    has_css?("meta[property='#{property}'][content='#{with}']", visible: false)
+  end
+
+  failure_message do
+    meta = first("meta[property='#{property}']", visible: false)
+
+    if meta
+      "expected to find meta tag #{property} with '#{with}', but had '#{meta[:content]}'"
+    else
+      "expected to find meta tag #{property} but there were no matches."
+    end
+  end
+end