まさぼっち.net

SI→MBA→起業→事業開発エンジニアのただの日記。

WEBサービス

Twitterのタイムラインウィジェットがいつの間にか変わっていたので、ブログ設定する方法について紹介したい

2017/11/04

Twitterのウィジェットって、とても便利です。

例えば、自分のサイトやブログに、好きなタイムラインを表示させたり、特定の検索ワードなどもひっかけて表示させることが可能です。

ただ、2016年6月あたりに、Twitterのウィジェットの仕様が変わってしまい、当初どのように使えばいいのかわかりませんでした。
僕は右往左往しながらやってみました。
今回の記事でTwitterのウィジェット設定を紹介し、ブログの埋め込み方法について紹介します。

[追記 2017/11/4]しょっちゅう、設定方法が変わる気がします。 2017年11月4日時点の内容を記載します。

自分のTwitterのタイムラインをブログやホームページに出す方法

まずは右上にある自分のアイコンをクリックします。

そうすると、その下に項目が表示されますので、「設定とプライバシー」をクリックします。


下の画面のような、左に設定項目があります。下の方に「ウィジェット」という項目があるはずです。画面になければ、下にスクロールしましょう。

下の方に「ウィジェット」をクリックします。

「新規作成」ボタンをクリックすると、そのボタンの下に選択欄が表示されますので、ここの「プロフィール」をクリックします。
※「いいね」や「リスト」の表示、「コレクション」(ツイートをまとめる機能)をしたい場合はそれをクリックしてください。今回の記事では、タイムラインを表示させる方法になります。

t02

ここから新しい仕様になります。入力欄が表示されます。

t03

ここにTwitterのアカウントのアドレスを入力します。(アドレスは「https://twitter.com/アカウント名」になります。ここでは、自分のアカウント名「masabochi」なので、「https://twitter.com/masabochi」を入力しています。)
t05

URLを入力したら、右にある「→(右矢印)」をクリックします。

下にスライドされますので、「Embedded Timeline」を選択します。

そうすると、また下にスライドされ、入力したアカウントのタイムラインが表示されます。
t06

このままの状態でよければ「Copy Code」をクリックして、それをHTML内に記載すればOKです。

カスタマイズするには、「set customization options」をクリックします。

t06-1

簡単なカスタマイズが可能です。タイムラインの高さ、幅、色、言語は変更できます。
t07

入力後、「Update」をクリックします。
t08-1

ソースコードが変更されているのを確認してください。
t09-1

「Copy Code」をクリックすることで、コピーができます。
t10

それをブログとかホームページにコピーすると、以下のように表示されるはずです。

---ここから---

---ここまで---

ちなみに、コピーしたコードは以下になります。

「<a class="twitter-timeline" href="https://twitter.com/masabochi" data-lang="ja" data-width="600" data-height="800">Tweets by masabochi
</a><script src="//platform.twitter.com/widgets.js" async="" charset="utf-8"></script>」

なので、

「<a class="twitter-timeline" href="https://twitter.com/masabochi" data-lang="ja" data-width="600" data-height="800">Tweets by masabochi
</a><script src="//platform.twitter.com/widgets.js" async="" charset="utf-8"></script>」

赤文字を変更することで、他のTwitterのタイムラインを表示することが可能です。

例えば、このように。

他のアカウントのタイムラインを出すことが可能です。
(ここでは、ボードゲームカフェのJELLY JELLY CAFEのタイムラインを埋め込んでみました。)

コピペで、ウィジェットの変更が可能になるため、
いままでよりも便利にブログやホームページにTwitterを埋め込むことができるようになりました。

ここでは紹介しませんが、同じような方法で、
「いいね」、「リスト」、「コレクション」も同様の方法でウィジェットをつくれるようになっています。

今までとの違い

今までは、自分のツイートとか、誰かのツイートをタイムラインで表示させるために、コードを変更しても反映されませんでした。
ウィジェットで一つずつ追加していかなければなりませんでした。
しかも、1アカウント100しか作れないため、足りなくなったら、アカウントを新規に作らないといけないというめんどくさい仕様でした。

今回の仕様の変更によって、埋め込むコードを知っていれば、該当箇所を変更することで、Twitterのタイムラインをブログやホームページに表示することができるようになりました。

うん、便利になった!
(あれ、昔はそんな感じの仕様じゃなかったっけ?)

Twitterのウィジェットをさらにカスタマイズする方法

上記のように、Twitterのタイムラインをブログに埋め込むことができましたが、色々とカスタマイズができることがわかりました。
とくに埋め込んだあと、「✕✕さんのツイート」という表示をどうやって消すか、方法がわかりましたので、それを紹介する記事を書きました。
よろしければどうぞ。

Twitterの埋め込みタイムラインで「〜さんのツイート」を消す方法

-WEBサービス