2019年02月16日

Railsで使ってSNSのシェア機能を実装する

今回は、Facebook、Twitter、Line、Slackのシェアボタンを実装します。

Railsのアプリケーションをより多くの人に知ってもらうためにシェア機能を作りましょう!

この記事の目次

  • 1.リンクの設定
  • 2.ボタンの装飾
  • 3.まとめ

リンクの設定

シェアボタンの配置時にSNSの投稿先にタイトル名とクリックしたときのリンク先を指定する必要があります。

以下ではそれぞれのシェアボタンのリンク先の指定場所を記述します。

リンク先の指定

Railsの該当のviewファイルに以下を記述すると配置したページのリンクを取得して、シェア時のリンク先として設定してくれます。

view/show.html.erb
<%= link_to 'Twitter', "https://twitter.com/share?url=#{request.url}", title: 'Twitter', target: '_blank' %>
<%= link_to 'Facebook', "https://www.facebook.com/sharer/sharer.php?u=#{request.url}", title: 'Facebook', target: '_blank' %>
<%= link_to 'LINE', "http://line.me/R/msg/text/?#{request.url}", title: 'LINE', target: '_blank' %>
<%= link_to 'Slack', "http://slackbutton.herokuapp.com/post/new/?url=#{request.url}", title: 'Slack', target: '_blank' %>

タイトルの指定

次に、該当ページのシェア先で表示されるタイトルを設定します。

view/show.html.erb
<%= link_to 'Twitter', "https://twitter.com/share?url=#{request.url}&text=タイトル", title: 'Twitter', target: '_blank' %>
<%= link_to 'Facebook', "https://www.facebook.com/sharer/sharer.php?u=#{request.url}&text=タイトル", title: 'Facebook', target: '_blank' %>
<%= link_to 'LINE', "http://line.me/R/msg/text/?#{request.url}&text=タイトル", title: 'LINE', target: '_blank' %>
<%= link_to 'Slack', "http://slackbutton.herokuapp.com/post/new/?url=#{request.url}&text=タイトル", title: 'Slack', target: '_blank' %>

先ほどのリンクのサイトに&text=タイトルを追加します。

タイトルの部分にシェア先で表示されるタイトルを記述しましょう。

インスタンス変数で#{@article.title}のようにタイトルを指定することもできます。

ボタンの装飾

装飾しやすいように先ほどのコードにclassidを追加します。

view/show.html.erb
<div id='sosyal'>
   <%= link_to 'Twitter', "https://twitter.com/share?url=#{request.url}&text=タイトル", class: 'twitter', title: 'Twitter', target: '_blank' %>
   <%= link_to 'Facebook', "https://www.facebook.com/sharer/sharer.php?u=#{request.url}&text=タイトル", class: 'facebook', title: 'Facebook', target: '_blank' %>
   <%= link_to 'LINE', "http://line.me/R/msg/text/?#{request.url}&text=タイトル", class: 'line', title: 'LINE', target: '_blank' %>
   <%= link_to 'Slack', "http://slackbutton.herokuapp.com/post/new/?url=#{request.url}&text=タイトル", class: 'slack', title: 'Slack', target: '_blank' %>
</div>

classidに対して装飾をします。

ここではシンプルなレイアウトを作成するコードをあげておきます。

assets/stylesheets/sns.css
#sosyal {
    margin: 50px auto;
  }
  .facebook {
    background-color: #2e4a88;
    box-shadow: 0 4px 0 #1B3D82;
    text-shadow: 0 -1px -1px #1B3D82;

    display: inline;
    position: relative;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    padding: 14px 80px;
  }
  .facebook:hover {
    background-color: #354F84;
  }
  .facebook:active {
    top: 2px;
      box-shadow: 0 2px 0 #1B3D82;
  }
  .twitter {
    background-color: #008DDE;
    box-shadow: 0 4px 0 #0078BD;

    display: inline;
    position: relative;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    padding: 14px 80px;
  }
  .twitter:active {
    top: 2px;
      box-shadow: 0 2px 0 #0078BD;
  }
  .twitter:hover {
    background-color: #1397D8;
  }
  .line {
    background-color: #35de00;
    box-shadow: 0 4px 0 #2dc715;

    display: inline;
    position: relative;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    padding: 14px 80px;
  }
  .line:active {
    top: 2px;
      box-shadow: 0 2px 0 #2dc715;
  }
  .line:hover {
    background-color: #35de00ed;
  }
  .slack {
    background-color: #9401ff;
    box-shadow: 0 4px 0 #720cb9;

    display: inline;
    position: relative;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    padding: 14px 80px;
  }
  .slack:active {
    top: 2px;
      box-shadow: 0 2px 0 #720cb9;
  }
  .slack:hover {
    background-color: #9401ffe8;
  }

Viewに追加

最後にViewに作成したCSSを反映させるコードを追記しましょう。

view/layouts/application.html.erb
<%= stylesheet_link_tag    'sns', media: 'all', 'data-turbolinks-track' => true %>
cofig/initializers/assets.rb
Rails.application.config.assets.precompile += %w( sns.css )

これでシェアボタンの実装は完了です。

まとめ

いかがだったでしょうか?

アプリケーションを色々な人に知ってもらうためにはSNSでの拡散が効果的になります。

よろしければこの記事のシェアもお願いします(笑)
ありがとうございました!