某スクールのチーム開発にて某フリマアプリを作成しており、追加機能を実装していくフェーズになりました。
そこで、前回は「取り置き機能」と「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リンクシェア機能がないと思ってましたが、よくみたらありました。。。笑
ということで、オリジナル追加機能でなくなりましたが、実装はしましたので、以下に記載します。
#実装イメージ
今回の実装イメージは以下のようになってます。
##投稿アクション
##投稿画面（Twitter）
#実装方法
今回、実装は非常に簡単です。
ほとんどコーディングせずにできます。(簡単すぎて、自分も拍子抜けしました笑）
- Twitterのdevelopersサイトで使いたい機能を選択
- コードを記述
- （番外編）Tweet内容をカスタマイズする
#1. Twitterのdevelopersサイトで使いたい機能を選択
それでは、Twitterのdevelopersサイトにいきましょう。
https://publish.twitter.com/#
サイトに入ると以下の画面があるので、使いたいスタイルを選びます。
今回は、一番右のTwitter Buttonsを選びました。
すると以下の画面が出てきますので、ここでも自分が使いたいスタイルを選びます。
今回はシェア機能が欲しいので、一番左のShare Buttonを選びます。
すると、以下のようにコードが出てきますので、こちらのCopy Codeボタンを押しましょう！
これで準備完了です！
##2. コードを記述
自身のサイトでボタンを設置したい箇所に、コピーしてきたコードを貼り付けましょう！
以上です！笑
非常に簡単ですね。
このままでも問題なく使えますが、折角なので、もう少しカスタマイズしましょう。
##3. （番外編）Tweet内容をカスタマイズする
先ほどの画面上、青字で set customization optionsとあります。
この文字の部分をクリックしましょう！
すると、以下の画面が出てきます。
自分の表示させたい内容をここに記載してUpdateを押しましょう！
さっきと同じくコードが出てきますので、そちらをコピーすれば、Tweet時にデフォルトで入力されている内容を記載できます！
| | | |
|:--|:--|:--|:--|
| カスタマイズ項目 | 入力したい項目（例） | ソースコード |
| ツイートテキスト | お得な情報満載です！ | 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" |
自分の場合は、商品名や価格を一緒に入力したかったので、こちらでカスタマイズした後に、
少しコードを加えて以下のように実装しました！
%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に投稿していきますので、よろしくお願いします！
記述に何か誤りなどございましたら、お手数ですが、ご連絡いただけますと幸いです。