皆さんこんにちわ！ブロガーのRyosukeです！本日は、Railsでsnsのシェアボタンを作る方法について解説をしていきたいと思います。今回の前提条件は以下の通りになっています。

• snsのボタンは画像を使う
• 画像は/app/assets/imagesへ保存しておく
• 画像の大きさはcssで調整する
• railsのタグを使う

最終的には下記のような感じになります。こちらは私が運営しているサービスhttps://www.language-exchange.fun/ です！ツイッターのボタンを押すと画面遷移します。では、張り切って行きましょう！

sns画像を用意する

今回はググって適当にツイッターの画像をパクってきたのでそれを使います

link_to と image_tagを使う

<%= link_to image_tag('twitter.jpg', :class => "add_style"), "URL&text=タイトル", title: 'タイトル', target: '_blank', class: 'add_style' %>

こんな感じですねー！。 urlを入力して、 titileを入力する感じです、ここは動的にお願いします。

CSSで画像を小さくする

ここまで来たら後は簡単ですね。CSSで画像を調節しましょう。事前にclassに`add_style` というクラス名を付与してますのでこちらに対してcssを書いていけばいいということになります。今回は簡単に以下のようにしました。

.add_style{
  width: 25px;
  height: 25px;
}

これで全部完了です。そのほかのsnsのシェアのurl構造については下記の記事を参考にしてみてください！

techdeeper.jp

https://techdeeper.jp/articles/10

https://techdeeper.jp/articles/10