私がこのブログを立ち上げる前に思っていたのは、最近のブログはWordPressで構築されているからSNSのボタンが普通にあって、 TwitterやFacebook等にワンタッチで記事をシェア出来るので、単純に「(・∀・)イイ!!なぁ」と思っていた。
特にTwitterは拡散力が強いので、ブログのサイドバーにブログ主のTwitterのタイムラインとかが埋め込まれているのを見ると、「どうやってるんだべ?(´・ω・`)」と疑問が不思議だったのだ。実際には、案ずるより産むがやすしきよしなので、今回はTwitterのタイムラインをWordPressサイドバーに埋め込む方法について書いてみる。
ツイッターでの作業
ネットで調べてみると、微妙に表示される画面や画面遷移が違ったりするので、コレが絶対正しいワケではないが、なるべく分かり易いように画像多めで丁寧に紹介してみよう。Twitterの仕様変更によって多少の画面の相違があっても、大きくは違わないだろうから。
まずはTwitterにログインし、「設定とプライバシー」を表示し、画面左下の方にある「ウィジェット」をクリックする。
上記画面から、「新規作成」をクリックする。
すると「What would you like to embed?(何を埋め込みたいですか?)」の画面になるので、TwitterのURL(https://twitter.com/ユーザ名)を入力する。
私の場合だと、https://twitter.com/dajya_ranger と入力(TwitterからURLをコピー・ペースト)し、「→」をクリックする。
「Here are your display options(表示オプションは次のとおりです)」の画面では、「Embedded Timeline(タイムラインの埋め込み)」をクリック。
「That’s all we need, unless you’d like to set customization options.(カスタマイズオプションを設定しない限り、これだけで十分です)」と画面に表示され、自分の最新のツイートが表示される画面になる。
これだけで十分とは言わずに、カスタマイズさせろや!で、「set customization options」のリンクをクリック。
「What size wouid you like your timeline to be?(タイムラインをどのようなサイズにしたいですか?)」と表示され、埋め込むタイムラインのサイズ等を指定出来る。
①高さ タイムラインの高さで、私は画面の通り600に設定。800ぐらいまでが吉。
②幅 タイムラインの幅で、特に設定しなくてOK。
③背景 背景色の指定で、Light(しろ)かDark(濃いグレー)に設定。
④文字色 ツイートのリンクの文字色の設定で、カラーコードで指定可能。
⑤言語 表示に使う言語の指定で、AutomaticのままでOK。
※Opt-out of tailoring Twitterはタイムラインの表示に全く影響しないのでスルー推奨
設定後、「Update」をクリック。
「That’s all we need, unless you’d like to set customization options.(カスタマイズオプションを設定しない限り、これだけで十分です)」に戻るので、「Copy Code」をクリック。
クリップボードにTwitter タイムラインを埋め込むコードがコピーされた状態になるので、WordPressのウィジェットでペーストする(後述)。
WordPressでの作業
自分のWordPressにログインし、「外観」→「ウィジェット」とクリックする。
利用できるウィジェットの「テキスト」を図のように「通常サイドバーエリア」にドラッグ&ドロップする。この例だと、カテゴリーの下にテキスト(Twitter タイムラインになる)を追加した形になる。
ドロップしたテキストの「▼」をクリックする。
先ほどツイッターでの作業の最後に「Copy Code」でコピーしたコードを、Ctrlキー+Vで図のようにペーストする。タイトルは任意のタイトルを入力するが、私の場合は「Twitter」とした。最後に「保存」をクリックして、作業完了。
なんだ、簡単じゃん!
だから、最初に言ったように案ずるより産むがやすしきよし・・・( ゚д.∵:・..ヒデブ!!
なーんか、以前のWordPressではプラグインで実現してたようだけど、やはりニーズが高いのか、標準機能で実現可能になった模様。ま、簡単なのは良きことかな。(´ー`)y-~~
関連記事
Warning: strpos() expects parameter 1 to be string, array given in /home/eware/dajya-ranger.com/public_html/wp-includes/compat.php on line 498
Warning: preg_match_all() expects parameter 2 to be string, array given in /home/eware/dajya-ranger.com/public_html/wp-includes/shortcodes.php on line 155
Array
コメントを書く