連載第128回
2017年1月3日
今更だけど、twitterのタイムライン埋め込みの覚え書き

 むかしむかしのことじゃった。twitterのタイムラインのweb埋め込み機能に「1ツイートのみ表示」出来るオプションが気に入り、更新の滞りがちなこのブログが少しでも生きているよう、見た目の変化を持たせるためにサイトに埋め込んで活用していたのだが、ある日突然twitterがその機能提供を停止してしまった。やむをえず、こちらもそのエリアを削除して以前のように全く更新された気配のないブログを晒していたのだけれど、またある日突然、twitterが埋め込み機能の提供を再開。しかし僕の欲している「1ツイートのみ表示」というオプションは無く、がっくり気落ちしたまま放置することまた数年。そしてある日何となくtwitterの設定項目を眺めていたら、いつの間にか「1ツイートのみ表示」オプションが復活しているのを発見。これは是非また埋め込みたい(何故なら長期間ブログ更新しなくても、ツイートだけすればひとまず見た目の変化を与えられるから)と思い、このサイトの下の方に設置したのはいつだったか…。

以下、覚え書き

 というわけで既にコチラ、flipflipflip.comの方には埋め込み済みなのですが、flfl.meの方が手付かずだったので、この連休中に設置することにしました。というか、向こうのアカウントでは全然twitterを使ってなかったのだけれど、これからは積極的につぶやいて(語義矛盾?)いきたい。

1.まず、なにはともあれ、twitterの設定に入る。

2.左側に表示されるメニューの中から「ウィジット」をクリック、新規作成ボタンを押す。

3.すると全く見覚えの無いリストが出てきた。…これは、何かヤバい気配がする。「タイムライン」という項目が無いではないか。プロフィールを選択してみる。

4.何だこれは…。

5.また仕様変更していやがった!ワケが分からないからとりあえずflflmeのURLを入力し「→」をクリック。

6.お、タイムラインはここで選択出来るようです。

7.必要があれば簡易オプションは設定し(今回は日本語をセレクトした)、提示されるコードをコピー。

WordPressのphpに埋め込み&少々のカスタマイズ

 コードをコピーしたら、それをWordPressのいずれかのphpの中、タイムラインを表示させたい任意の場所に埋め込みます。それから下記のように修正。横幅はtwitterの仕様的には520pxが最大値だったと思います。今回はコード生成時には指定せず、CSSスタイルシートの方でエリアのサイズを770pxに指定。ただし、横幅を大きくするとフォントサイズも強制的に大きくなってしまい、それを調整することは難しいようです。個人的には、ひときわ大きな表示は目立つので気に入っています。

タイムラインの埋め込み

<a class="twitter-timeline" data-lang="ja" href="https://twitter.com/flflme"
height="auto"
data-chrome="noheader nofooter noborders transparent"
data-tweet-limit="1">
</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

1行目:最初の設定部分。日本語を選択したので「ja」が指定されている。
2行目:ここからカスタマイズ。高さはautoにしておく。
3行目:ヘッダー無し、フッター無し、ボーダー無し、透過。
4行目:表示するツイートは1つのみ!今回はこれが重要。

 改変の予告をしているのかしてないのか、あるいは事後でもいいから仕様変更の連絡は欲しいものです。flipflipflip.comの方は、いつか不具合を起すまで旧仕様のままにしておきます。表示に差異は無いようです。

 それにしても、twitter社内政治的にもいろいろ大変なようですが、個人的には広告収入モデルじゃなくて、サブスクリプション型で良いと思います。月300円くらいなら喜んで利用料支払いますよ。