[HowTo]Twitterへのリンクシェア機能をお手軽に実装する！

某スクールのチーム開発にて某フリマアプリを作成しており、追加機能を実装していくフェーズになりました。
そこで、前回は「取り置き機能」と「Twitter APIを利用した新規登録とログイン」をオリジナルで追加してみましたが、今回は更なる追加機能として、「Twitterへのリンクシェア機能」を作ってみました！

本記事該当Github：　https://github.com/Tatsu88-Tokyo/freemarket_sample_60ce


*前回追加機能に関する記事#1：[取り置き機能]某フリマアプリにオリジナル機能を実装してみた。
https://qiita.com/Tatsu88/items/2f690056f417ccb6494a

*前回追加機能に関する記事#2:【HowTo】某フリマサイトにRails+Devise+Twitter APIを利用した新規登録とログイン機能を実装してみた。
https://qiita.com/Tatsu88/items/a846dd62d7d9855fcf73


#背景:「Twitterへのリンク投稿機能」を追加機能に選んだ理由
今回も追加機能を選ぶにあたり、ネットで某フリマアプリユーザのコメントをネットで探したり、自分でサイトをいじっていた時に、フリマサイトならTwitterとの連携は欲しいなと思って実装を決めました。
＊当初、メ○カリにはTwitter認証での新規登録やログインがなかったので、てっきりTwitterリンクシェア機能がないと思ってましたが、よくみたらありました。。。笑
ということで、オリジナル追加機能でなくなりましたが、実装はしましたので、以下に記載します。

#実装イメージ
今回の実装イメージは以下のようになってます。
##投稿アクション
![demo](https://gyazo.com/4120b2b68c57244140a8f9499563ab54/raw)

##投稿画面（Twitter）
![demo](https://gyazo.com/c8145fb1f786ac8b8ac52388218a3abc/raw)

#実装方法
今回、実装は非常に簡単です。
ほとんどコーディングせずにできます。(簡単すぎて、自分も拍子抜けしました笑）
1. Twitterのdevelopersサイトで使いたい機能を選択
2. コードを記述
3. （番外編）Tweet内容をカスタマイズする


#1. Twitterのdevelopersサイトで使いたい機能を選択
それでは、Twitterのdevelopersサイトにいきましょう。
https://publish.twitter.com/#

サイトに入ると以下の画面があるので、使いたいスタイルを選びます。
今回は、一番右のTwitter Buttonsを選びました。
![demo](https://gyazo.com/acc3ad1e16e04933bfe4a093281f299b/raw)

すると以下の画面が出てきますので、ここでも自分が使いたいスタイルを選びます。
今回はシェア機能が欲しいので、一番左のShare Buttonを選びます。
![demo](https://gyazo.com/9bb18dd83c51442531ca4d1f11570c39/raw)

すると、以下のようにコードが出てきますので、こちらのCopy Codeボタンを押しましょう！
![demo](https://gyazo.com/a3b2953d1976c3665cf7437ef7907428/raw)

これで準備完了です！

##2. コードを記述
自身のサイトでボタンを設置したい箇所に、コピーしてきたコードを貼り付けましょう！

以上です！笑
非常に簡単ですね。
このままでも問題なく使えますが、折角なので、もう少しカスタマイズしましょう。

##3. （番外編）Tweet内容をカスタマイズする
先ほどの画面上、青字で set customization optionsとあります。
この文字の部分をクリックしましょう！
![demo](https://gyazo.com/a3b2953d1976c3665cf7437ef7907428/raw)

すると、以下の画面が出てきます。
自分の表示させたい内容をここに記載してUpdateを押しましょう！
さっきと同じくコードが出てきますので、そちらをコピーすれば、Tweet時にデフォルトで入力されている内容を記載できます！
![demo](https://gyazo.com/ff62ef6c3a89ff8f6e08456c636b3c29/raw)

|  |　| |
|:--|:--|:--|:--|
| カスタマイズ項目 | 入力したい項目（例） | ソースコード |
| ツイートテキスト | お得な情報満載です！ | data-text="お得な情報満載です！" |
| 指定のウェブサイトURL | https://applica.info/ | data-url="https://applica.info/" |
| スクリーンネーム | 自分のアカウント名 | data-via="applica" |
| ハッシュタグ | iPhone | data-hashtags="iPhone" |
| アカウントの推薦 | フォローを勧めるユーザ名 | data-related="applica" |
| ボタンの大きさ | 大きくしたいときだけ選択 | data-size="large" |
| 言語表示 | 特定の言語で表示したいとき | data-lang="ja"  |

自分の場合は、商品名や価格を一緒に入力したかったので、こちらでカスタマイズした後に、
少しコードを加えて以下のように実装しました！

```haml:view
%a.twitter-share-button{"data-hashtags": "テックエキスパート", "data-show-count": "false", "data-size": "large", "data-text": "Fmarketで商品を出品しました！商品名:#{@product.name},価格:#{@product.price}円", href:"https://twitter.com/share?ref_src=twsrc%5Etfw"} Tweet
%script{:async => "", :charset => "utf-8", :src => "https://platform.twitter.com/widgets.js"}
```

#参照
How to add the Tweet button to your website
https://help.twitter.com/en/using-twitter/add-twitter-share-button

Twitterのdevelopersサイト
https://publish.twitter.com/#

Twitterのツイートボタン設置方法！シェアボタンをカスタマイズする！
https://applica.info/twitter-button

以上となります。最後までご覧いただき、ありがとうございました！
今後も学習した事項に関してQiitaに投稿していきますので、よろしくお願いします！
記述に何か誤りなどございましたら、お手数ですが、ご連絡いただけますと幸いです。