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

投稿日:

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

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

 

目次

 

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タグとscriptタグが生成されます。aタグのdata属性を細かく見ていきます。

 

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

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

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

index.html

 

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

 

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

ツイート内容

 

まとめ

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

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

-プログラミング学習
-,

Copyright© s u p ? , 2019 All Rights Reserved.