【Rails】Twitterのツイートボタンの内容を変数でカスタマイズ

プログラミング初心者の勉強ブログ #71

「Twitter Publish」で用意されているTwitter Buttonsの一つに、ツイートボタンがあります。今回は、Railsアプリにツイートボタンを実装し、Railsの変数を用いて内容をカスタマイズしたので、やり方を紹介します。

 

目次

[toc]

 

Twitter Publishとは

Twitter Publish

Twitter Publish

Twitter Publishとは、Twitterのツイート投稿リンクボタンやツイート内容、タイムラインなどを、生成された貼付けコードをコピペするだけでWebサイトに載せることができます。

コードの生成も簡単で、APIなどを使わず、とても手軽にTwitterのリンクを作成できます。

 

Twitter Buttonsでツイート投稿リンクボタンを作成

占いアプリ Twitterボタン

 

今回はRailsで開発中の「朝の占いまとめアプリ」にツイートボタンを実装します。実装したものが上の画像です。

 

まずTwitter Publishから、下にスクロールし「Twitter Buttons」を選択します。

Twitter Buttons1

 

 

一番左がツイートボタンです。他にもフォローボタンやメッセージボタンなど種類があります。

Twitter Buttons2

 

「set customization options」をクリックすることで、ブラウザ上である程度のカスタマイズが行えます。

Twitter Buttons3

 

カスタマイズ内容は以下の通り。

Twitter Buttons4

 

 

僕が実際に生成したコードは以下になります。

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button"
   data-text="【Fortune Checker】今朝の占いをまとめてチェック!
   data-via="app_fortune"
   data-hashtags="今朝の占い"
   data-related="app_fortune,supunic_sup"
   data-lang="ja"
   data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

aタグとscriptタグが生成されます。aタグのdata属性を細かく見ていきます。

// ツイート内容の設定
data-text="【Fortune Checker】今朝の占いをまとめてチェック!
// ツイートに載せるTwitterアカウント名(@はつけない)
data-via="app_fortune"
// 表示するハッシュタグ
data-hashtags="今朝の占い"
// ツイート後フォローを促すアカウント
data-related="app_fortune,supunic_sup"
// 言語設定(日本語にするとボタンの表記がTweet→ツイートに変わる)
data-lang="ja"
// フォロワー数の表示(デフォルトでfalseだったが、tweetボタンでは特にtrueにしても変化はない)
data-show-count="false"

 

ツイート内容をRubyの変数を用いてカスタマイズ

ブラウザ上で「<%=%>」を使い編集した場合、生成されるコードが「&lt;%%&gt;」のようにエンコーディング?されてしまうため、Rubyの変数を挿入したい場合は、コード生成後エディタで編集するとうまくいきます。

ものすごく読みづらいコードになってしまいましたが、編集後のコードが以下です。

index.html

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button"
   data-text="【Fortune Checker】今朝の占いをまとめてチェック!&#13;&#10;&#13;&#10;今日の<%= @sign %>の運勢&#13;&#10;○めざまし占い:<%= @mezamashi_sign_fortune.rank %>位&#13;&#10;<%= @mezamashi_sign_fortune.text1 %>。<%= @mezamashi_sign_fortune.text2 %>。&#13;&#10;ラッキーポイント:<%= @mezamashi_sign_fortune.lucky_point %>&#13;&#10;&#13;&#10;他の占いもチェックしよう!&#13;&#10;"
   data-via="app_fortune"
   data-hashtags="今朝の占い&#13;&#10;"
   data-related="app_fortune,supunic_sup"
   data-lang="ja"
   data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

改行の文字コードで「&#13;&#10;」を使用しております。改行コードを調べると、「CR」「LF」「CR+LF」など色々出てきます。CRは単体では基本使用しないみたいです。「&#13;&#10;」はCR+LFの改行コードで、少し調べた限りでは一番良さげだったので、おすすめします。

 

上のコードでツイートボタンを作成した場合、以下のようなレイアウトになります。変数を用いたおかけで、おとめ座の運勢が悪いことをあらかじめ自動で文章化してくれます。

ツイート内容

 

まとめ

Twitter以外にもfacebookやLINEなどのシェアボタンも同じように、生成されたコードをコピペするだけで実装できます。タイムライン表示も実装してみたいと思います。

以上ありがとうございました。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA