Rails  爆速でSNSシェアボタンを実装してみよう

# 今日の目標
twitterやfacebookやLNEで自分のサイトをシェア出来るようにしよう！

今日実装してみるのは下の画像の赤枠の部分です

[![Image from Gyazo](https://i.gyazo.com/02181397335d29ea39ad1214905abe5c.png)](https://gyazo.com/02181397335d29ea39ad1214905abe5c)

例えば　twitterのアイコンをクリックすると

[![Image from Gyazo](https://i.gyazo.com/7e27d397ea5eb97b1ffa4353d37a95b6.png)](https://gyazo.com/7e27d397ea5eb97b1ffa4353d37a95b6)

このように　シェアしたいページをtwitterで投稿することができます。

##爆速でこのシェア機能を実装してみましょう

# twitterバージョン
[Twitter 開発者 ドキュメント日本語訳](http://westplain.sakuraweb.com/translate/twitter/Documentation/Twitter-for-Websites/Tweet-Button/Web-Intent.cgi)

Twitter には 2種類のシェア用 URL がある。
基本形は`intent`


`https://twitter.com/intent/tweet`
の形でTweetを投稿出来ます。

```
https://twitter.com/intent/tweet?text=Hello%20World!!
```
とすると

`Hello　World！！｀と出力される

[![Image from Gyazo](https://i.gyazo.com/3da4b9129822084f459f2efd2c956e53.png)](https://gyazo.com/3da4b9129822084f459f2efd2c956e53)

`https://twitter.com/share`

でも書くことができる

とりあえず

```html:html
<%= link_to 'Twitter', "https://twitter.com/share?url=#{request.url}", title: 'Twitter', target: '_blank' %>
```
と書くとシェアしたいページのURLがリンクでシェアできる

## ほげぇ　超簡単すぎるw　記事がこれで終わってしまうw

ということで　オプションの解説

## オプション
パラメータ名=値を&で連結することで、複数のパラメータを指定することが出来ます。

もちろん、すべての値はURLエンコードしてくださいね！

###text
先ほど紹介したパラメータです。ツイートの本文になります。

textを140文字以内(半角英数は0.5文字換算)に抑えていても、後述のurlやvia、hashtagsの値を含めて140文字を越えてしまうとツイートできないので注意です。

```
https://twitter.com/intent/tweet?text=ツイート本文
```

### url
ツイートにURLを関連付けます。ツイートの末尾にURLが追加されます。

bit.lyやgoo.glなどの短縮URLを使うことも出来ます。

ちなみに：今のTwitterは、URLをツイートすると自動でt.coで始まる短縮URLに変換されるので、短縮URLサービスの実用性はないです（どんなに短くても長くても、23文字前後として扱われます。）

```
https://twitter.com/intent/tweet?url=https://localhost:3000/teachers/3//
```
[![Image from Gyazo](https://i.gyazo.com/f460ad557a6c408020ae7960a11088d7.png)](https://gyazo.com/f460ad557a6c408020ae7960a11088d7)

### hashtags
ハッシュタグを指定します。ツイートの末尾に追加されます。

「#」マークは付けずに指定してください。また、カンマ「,」で複数指定が可能です。

カンマもエンコードする必要があるのと、パラメータ名がhashtagsと複数形になっているので、ちょっと注意が必要です。
```
https://twitter.com/intent/tweet?hashtags=家庭教師ワイズ,成績UP
```
実際に書いてみるとこうなります

```
=link_to "http://twitter.com/share?url=#{request.url}/&text=家庭教師のワイズの先生です/&hashtags=成績UP",{class:"footer-icon_1"} do
%i.fab.fa-twitter.twitter
```
[![Image from Gyazo](https://i.gyazo.com/4866606a169bc49c4769535255a4c086.png)](https://gyazo.com/4866606a169bc49c4769535255a4c086)
### via
ツイートにスクリーンネーム(@から始まるユーザー名)を関連付けします。

ツイートの末尾に「via @screen_name」や「@screen_nameさんから」が追加されます。この文言はlang（後述）によって変わります。

```
https://twitter.com/intent/tweet?via=ひがきけいた
```
詳しくはこちらをご覧ください
[Twitter 開発者 ドキュメント日本語訳](http://westplain.sakuraweb.com/translate/twitter/Documentation/Twitter-for-Websites/Tweet-Button/Web-Intent.cgi)

# facebookバージョン
[Facebookデベロッパーズページ](https://developers.facebook.com/docs/plugins/share-button)
シェアボタン構成ツールに必要なシェアしたいURLと、
ボタンのタイプを選択して、コードを取得ボタンをクリックします。
[![Image from Gyazo](https://i.gyazo.com/7aec163eec36a554d0929c9227ff2dcc.png)](https://gyazo.com/7aec163eec36a554d0929c9227ff2dcc)

コードを取得をクリックすると
[![Image from Gyazo](https://i.gyazo.com/1718b7d581d8336e41fa09030d608213.png)](https://gyazo.com/1718b7d581d8336e41fa09030d608213)

とコードが出力されるので　あとは設置したい場所にコピペするだけです

### LINEバージョン
[LINEソーシャルプラグイン](https://media.line.me/ja/how_to_install#lineitbutton)

説明の隙間がないくらい丁寧ですw　手順は以下のまんまです
[![Image from Gyazo](https://i.gyazo.com/f820f5303c8299d7e440d9b4cc06f94d.png)](https://gyazo.com/f820f5303c8299d7e440d9b4cc06f94d)

こんな感じでシェア出来ます
[![Image from Gyazo](https://i.gyazo.com/e7e66eaed982dd7c414c7bc58a250dc1.png)](https://gyazo.com/e7e66eaed982dd7c414c7bc58a250dc1)


完成品
[![Image from Gyazo](https://i.gyazo.com/0276e152e80bab23dd243f23618bb1fe.png)](https://gyazo.com/0276e152e80bab23dd243f23618bb1fe)

## 公式ドキュメントをしっかり読み解けばたいていのことは書いてあります！ 
## ソースコードをしっかり作り込んだ後はこういったSNSでのシェアを考えてもいいかもしれません。