【Rails】自作のSNSボタンを貼り付ける方法

Railsに限った話ではありませんがWEBサイトの記事をシェアしてもらおうと思ったらいわゆるSNSボタンを設置しますよね。 ここではFacebook、Twitter、はてなブックマークの自作ボタンをつくる方法を記します。自作じゃなくてそれぞれのSNSのオリジナルボタンであればシェアされた数やツイート数も表示できるのですが、自作ボタンだとその数が出ません。自分で作った画像を張りたいなと思えばこちらの方法をご活用ください。 こんなボタンですね ↓

Facebookのシェアボタンを実現するコード

<a href="https://www.facebook.com/share.php?url=ここにURL" rel="nofollow" target="_blank">画像やテキスト</a>

このような書き方になります。ここにURLのところにご自身のサイトのURLや個別ページのURLを記述します。Railsでやる場合は<%= request.url %>を使えば現在のURLを出力できます。画像やテキストのところには上の画像を貼り付けたりします。そうすると以下のようになります。

<a href="https://www.facebook.com/share.php?url=<%= request.url %>" rel="nofollow" target="_blank"><img src ="/images/icon/facebook-icon2.png"></a>

私はAmazon AWS Cloud9で開発をしていまして。画像はpublic/images/icon/に入れています。なので上記のような画像URLとなっています。 挙動はこちらでご確認ください。 ↓

Twitterのツイートボタンを実現するコード

<a href="https://twitter.com/share?url=ここにURL&text=ここに文字" rel="nofollow" target="_blank">画像やテキスト</a>

ツイッターもFacebookと似ていますね。”ここにURL”のところに現在のURLを入力、”ここに文字”のところにツイートしてもらうときの文章を埋め込むことができます。ここはサイトのタイトルタグなんかを入れておくようにしました。そうすると以下のようになります。

<a href="https://twitter.com/share?url=<%= request.url %>&text=<%= page_title %>" rel="nofollow" target="_blank"><img src ="/images/icon/twitter-icon2.png"></a>

<%= page_title %>のところですが、これは自分がヘルパーで実装したメソッドです。現在ページのタイトルを返り値とするメソッドです。こちらの記事にそのやり方を書いています。（→各ページでタイトルを変更する方法） 挙動はこちらでご確認ください。 ↓

ハテブのボタンを実現するコード

<a href="//b.hatena.ne.jp/add?mode=confirm&url=ここにURL&title=ここに文字" target="_blank" rel="nofollow">画像やテキスト</a>

これもTwitterと同じです。以下のように実装します。

<a href="//b.hatena.ne.jp/add?mode=confirm&url=<%= request.url %>&title=<%= page_title %>" target="_blank" rel="nofollow"><img src ="/images/icon/hatena-icon2.png"></a>

挙動はこちらでご確認ください。 ↓ これで色んな人にシェアしてもらえたらいいな＾＾