まめわざにはFacebook・外部ブログの投稿を表示したり、Youtubeの動画を表示するブロックがありますが、Twitter表示用のブロックはありませんでした。
このたび、Twitterブロックの提供をスタートしましたので、使用方法について説明します。
また、技術者向けの内容として、Twitterウィジェットについての解説を付記します。
Twitterブロックは、登録済みのTwitterの投稿内容を表示するブロックです。未登録の場合は、まずはTwitterへの登録からスタートして下さい。
はじめに、Twitterを表示したいページ(トップページなど)に、次の手順でTwitterブロックを追加します。
入力欄に、TwitterのページアドレスかTwitterのアカウント名(@〇〇)を入力して「適用」をクリックし、最後に「OK」します。
ページに適用した変更を反映されるためには、最下部の「保存」をクリックしてページを保存するのを忘れないで下さい。
Twitterブロックは他のブロックと同様に、あらゆるページのあらゆる場所に無制限に設置可能です。
各ページはもちろん、サイドやフッターなどの共通部分にも設置できます。
次の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で実行のタイミングを自ら決めたい場合は、次のようなコードも可能です。
<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-chrome | noheader | 「@〇〇さんのツイート 」と表示されるヘッダー部分が非表示になる | |
nofooter | 「埋め込む」「Twitterで表示」が表示されるフッターが非表示になる | ||
noborders | ヘッダー・フッター・各Tweet間の区切り線が消える | ||
noscrollbar | スクロールバーが非表示になる | ||
transparent | 背景が透過する | 文字の色を変えられないので、暗い色の背景を使う場合は要色指定 |
一方、以下のカスタマイズはどうやら出来なそうなので注意が必要です。
文字サイズ | 表示域の幅に合わせて自動的に変化する |
文字色 | 変更不能なためdata-chrome="transparent"の場合は要注意 |
iframe内の子ドキュメントにツイート内容を表示しており、CSSでメディアクエリを利用することで、表示域に応じて文字サイズが自動変化しているようです。
文字サイズが切替わる「しきい値」は331px、431px、551px、661px、821px、971pxでした(環境によって異なる可能性があります)。
330pxと331pxで、表示レイアウトも若干変化します。
以前の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>
このコードは、次の手順で取得する必要がありました。
しかし、現在同じ手順で発行を試みると、日本語化されていない
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が必要な仕様に逆行することは今後考えにくいと思われます。