Merge pull request #7153 from fjordllc/feature/add-share-buttons-on-b…

…log-page-for-external

プラグインを利用して、X、Facebook、はてなブックマークのシェアボタンを実装

app/javascript/stylesheets/welcome.sass

@@ -7,6 +7,7 @@
 @import welcome/articles/article
 @import welcome/articles/articles-item
 @import welcome/articles/bootcamp-ad
+@import welcome/articles/share-buttons
 
 @import welcome/auth-form2/auth-form
 

app/javascript/stylesheets/welcome/articles/_share-buttons.sass

@@ -0,0 +1,53 @@
+.share-buttons
+  margin-top: .75rem
+
+.share-buttons__items
+  display: flex
+  gap: .5rem
+  @media (max-width: 20em)
+    gap: .25rem
+
+.share-buttons__item
+  @media (max-width: 20em)
+    &.is-x
+      flex: 1
+
+
+.x-share-button
+  width: 5.5rem
+  height: 2.5rem
+  background-color: white
+  +flex-link
+  flex-direction: column
+  border-radius: .25rem
+  align-items: center
+  justify-content: center
+  +text-block(.6875rem 1, 700)
+  color: var(--reversal-text)
+  border: solid 1px black
+  overflow: hidden
+  i
+    font-size: .875rem
+    color: black
+    flex: 1
+    width: 100%
+    display: flex
+    align-items: center
+    justify-content: center
+    transition: all .2s ease-out
+  span
+    background-color: var(--default-text)
+    display: flex
+    width: 100%
+    height: 1.25rem
+    align-items: center
+    justify-content: center
+    transition: all .2s ease-out
+    padding-top: 1px
+  &:hover
+    i
+      background-color: var(--background-tint)
+    span
+      background-color: black
+  @media (max-width: 20em)
+    width: 100%

app/views/articles/_share_button_facebook.html.erb

@@ -0,0 +1,8 @@
+<div id="fb-root"></div>
+<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v18.0" nonce="eqECzFUd"></script>
+<div class="fb-share-button" data-href="https://bootcamp.fjord.jp/articles/<%= article %>" data-layout="box_count" data-size="small">
+  <a class="fb-xfbml-parse-ignore"
+    href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbootcamp.fjord.jp%2Farticles%2F<%= article %>&amp;src=sdkpreparse"
+    rel="noopener noreferrer"
+    target="_blank">シェアする</a>
+</div>

app/views/articles/_share_button_hatena.html.erb

@@ -0,0 +1,7 @@
+<a class="hatena-bookmark-button"
+  href="https://b.hatena.ne.jp/entry/s/bootcamp.fjord.jp/articles/<%= article %>"
+  data-hatena-bookmark-layout="vertical-normal"
+  data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加">
+  <img src="https://b.st-hatena.com/images/v4/public/entry-button/[email protected]" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
+</a>
+<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

app/views/articles/_share_button_x.html.erb

@@ -0,0 +1,8 @@
+<a class="x-share-button"
+  href="https://twitter.com/intent/tweet?url=https://bootcamp.fjord.jp/articles/<%= article %>&hashtags=fjordbootcamp"
+  data-size="large"
+  rel="noopener noreferrer"
+  target="_blank">
+  <i class="fa-brands fa-x-twitter"></i>
+  <span>Postする</span>
+</a>

app/views/articles/_share_buttons.html.slim

@@ -0,0 +1,8 @@
+.share-buttons
+  ul.share-buttons__items
+    li.share-buttons__item.is-x
+      = render 'share_button_x', article: article
+    li.share-buttons__item
+      = render 'share_button_facebook', article: article
+    li.share-buttons__item
+      = render 'share_button_hatena', article: article

app/views/articles/show.html.slim

@@ -46,13 +46,15 @@ ruby:
                         = l(@article.created_at)
                       - else
                         = l(@article.published_at)
+                = render 'share_buttons', article: @article.id
                 - if @article.thumbnail.attached? && @article.prepared_thumbnail?
                   = image_tag @article.prepared_thumbnail_url, class: 'article__image'
                 - elsif !thumbnail_blank?(@article)
                   = image_tag @article.selected_thumbnail_url, class: 'article__image'
               .article__body
                 .js-markdown-view.a-long-text.is-md
                   = @article.body
+                = render 'share_buttons', article: @article.id
             - if admin_or_mentor_login?
               hr.a-border
               .card-footer

test/system/articles_test.rb

@@ -373,4 +373,28 @@ class ArticlesTest < ApplicationSystemTestCase
     click_on '更新する'
     assert_text '2021年12月24日(金) 23:59'
   end
+
+  test 'share button X' do
+    visit "/articles/#{@article.id}"
+
+    assert_selector 'a.x-share-button[href^="https://twitter.com/intent/tweet?url=https://bootcamp.fjord.jp/articles/"]', text: 'Postする'
+  end
+
+  test 'share button Facebook' do
+    visit "/articles/#{@article.id}"
+
+    within find('.fb-share-button', match: :first) do
+      within_frame do
+        assert_selector "a[href*='u=https%3A%2F%2Fbootcamp.fjord.jp%2Farticles%2F#{@article.id}']"
+      end
+    end
+  end
+
+  test 'share button Hatena' do
+    visit "/articles/#{@article.id}"
+
+    within_frame(find('.hatena-bookmark-button-frame', match: :first)) do
+      assert_selector "a[href='https://b.hatena.ne.jp/entry/s/bootcamp.fjord.jp/articles/#{@article.id}#bbutton']"
+    end
+  end
 end