Twitterと楽々連動・Twitterウィジェットを貼り付ける

技術者向け)Twitterウィジェットの仕様変更?カスタマイズ方法など

まめわざにはFacebook・外部ブログの投稿を表示したり、Youtubeの動画を表示するブロックがありますが、Twitter表示用のブロックはありませんでした。
このたび、Twitterブロックの提供をスタートしましたので、使用方法について説明します。
また、技術者向けの内容として、Twitterウィジェットについての解説を付記します。

Twitterブロックの使い方

Twitterブロックは、登録済みのTwitterの投稿内容を表示するブロックです。未登録の場合は、まずはTwitterへの登録からスタートして下さい。

はじめに、Twitterを表示したいページ(トップページなど)に、次の手順でTwitterブロックを追加します。

  • まめわざにログイン
  • ページ一覧からTwitterブロックを設置したいページ名をクリックして、ページの中身(コンテンツ)の編集をスタート
  • Twitterを表示したい場所の「+」をクリックしてTwitterブロックを追加

入力欄に、TwitterのページアドレスかTwitterのアカウント名(@〇〇)を入力して「適用」をクリックし、最後に「OK」します。
ページに適用した変更を反映されるためには、最下部の「保存」をクリックしてページを保存するのを忘れないで下さい。

Twitterブロックは他のブロックと同様に、あらゆるページのあらゆる場所に無制限に設置可能です。
各ページはもちろん、サイドやフッターなどの共通部分にも設置できます。

技術者向け)Twitterをまめわざ以外のホームページやブログに貼り付ける方法

次のHTMLをコードを貼り付けるだけで簡単に設置可能です。

HTMLコード

「〇〇」部分を自分のアカウント名に変更しましょう。 

<a class="twitter-timeline" href="https://twitter.com/〇〇">Tweets by 〇〇</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 

jQueryで実行のタイミングを自ら決めたい場合は、次のようなコードも可能です。

jQueryで実行する場合のサンプル

<a class="twitter-timeline" href="https://twitter.com/〇〇">Tweets by 〇〇</a>
$.ajax( {
    "timeout": 5000,
    "url": "http" + (document.URL.match(/^https:/) ? "s" : "") + "://platform.twitter.com/widgets.js",
    "dataType": "script",
    "cache": false,
} ); 

表示のカスタマイズ

<a class="twitter-timeline" href="https://twitter.com/〇〇">Tweets by 〇〇</a>

<a class="twitter-timeline" width="300" height="400" data-tweet-limit="5" data-chrome="nofooter transparent" href="https://twitter.com/〇〇">Tweets by 〇〇</a>
というようにaタグに属性を設定し、表示をカスタマイズ可能です。
カスタマイズ項目は以下です。 

カスタマイズ可能な項目
属性適用できる値効果注意点
width数字入力欄の幅を指定
height数字入力欄の高さを指定ツイート内容の高さが上回る場合はスクロールバーが表示される
data-tweet-limitを指定すると無視される
data-tweet-limit数字(1~20)表示するツイート数を指定heightが無視される(スクロールバーが表示されなくなる)
data-chromenoheader「@〇〇さんのツイート 」と表示されるヘッダー部分が非表示になる
nofooter「埋め込む」「Twitterで表示」が表示されるフッターが非表示になる
nobordersヘッダー・フッター・各Tweet間の区切り線が消える
noscrollbarスクロールバーが非表示になる
transparent背景が透過する文字の色を変えられないので、暗い色の背景を使う場合は要色指定

一方、以下のカスタマイズはどうやら出来なそうなので注意が必要です。

カスタマイズ不可と思われる項目
文字サイズ表示域の幅に合わせて自動的に変化する
文字色変更不能なためdata-chrome="transparent"の場合は要注意

iframe内の子ドキュメントにツイート内容を表示しており、CSSでメディアクエリを利用することで、表示域に応じて文字サイズが自動変化しているようです。
文字サイズが切替わる「しきい値」は331px、431px、551px、661px、821px、971pxでした(環境によって異なる可能性があります)。
330pxと331pxで、表示レイアウトも若干変化します。

旧コードとの比較、data-widget-idは不要になったのか?

以前のTwitterウィジェットのコードは下記のようなものでした。

旧コード

<a class="twitter-timeline"  href="https://twitter.com/mamewazacom" data-widget-id="658901082286886912">@mamewazacomさんのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

このコードは、次の手順で取得する必要がありました。

  • Twitterにログイン
  • 右上の「設定」をクリック
  • 左側のメニューの「ウィジェット」をクリック
  • 「新規作成」をクリック

しかし、現在同じ手順で発行を試みると、日本語化されていない
https://publish.twitter.com/
にジャンプします。

このコードにはdata-widget-idというものがあって、上記の手順でウィジェットを生成するたびにユニークなIDが発行されていた模様です。
Twitterウィジェットの表示方法が見直された2012年頃、このIDは必須であったと記憶しています。
ウィジェットの利用の敷居を上げることで不適切な利用を減らし、ウィジェット表示のサーバー負荷を抑えて、経費節減を狙ったのかも知れません。
トラフィック減も伴う諸刃の剣ですから、結果的にマイナス効果の方が大きくなり、旧来の自由に貼り付けられるウィジェットに戻したと推察されます。

data-widget-idが必要なため、Twitterウィジェットの貼り付けは面倒でした。
まめわざでは、Twitterブロックは用意せず、設定手順を紹介して「HTML(ブログパーツ)」ブロックにHTMLコードを直接貼り付ける方法を紹介してきました。
今回、IDが不要になったことで設置が手軽になったので、Twitterのページアドレスやスクリーンネームを貼り付けるだけでTwiterウィジェットを表示できるTwitterブロックを新たに用意しました。

いつまで使えるか

Facebookでは、iframe型のLikeボックスを2015年で終了するとアナウンスしていましたが、未だに機能しています。
利用者やトラフィックが減る可能性がある仕様変更は、巨大なサービスであるほど難しいと思われます。
TwitterウィジェットのIDが不要になった仕様変更は「利用者やトラフィックが減る可能性がある仕様変更(経費節減策)」のチャレンジ失敗を意味しており、IDが必要な仕様に逆行することは今後考えにくいと思われます。

2016/8/1