ブログを運営してると、
『自分の投稿したツイートを紹介したい!ブログに載せたい!』って思うときが来ます。
今まさにその時が来てる方の参考になればと思い、書いていきます。
自分のツイート一覧(タイムライン)をブログに埋め込みたい場合
まず、自分のTwitterのツイート一覧に行ってください。
(twitterにログイン後、自分のアカウント名をクリックするといけます。)
そのページのURLをコピーしてください。
Twitterでタイムラインの埋め込みのデザインとコードを作る
今回このリンクの内容(twitterヘルプセンター)を参考にしてます。
リンク先内容を一読の上、リンク先の画面下の注記にあるように
開発者契約およびポリシーに同意される方のみ、作業を続けてください。
同意しないことには、始まりませんので。。
では、こちらのリンクをクリックしてください。
するとこの画面に来ます。
この真ん中の白いバーに
先ほどコピーしたURLをペースト(貼り付け)してください。
貼り付けたらEnter(もしくはreturn)キーを叩きましょう。
すると下の画面が出てくるので
左側の『埋め込みタイムライン』をクリック!
また画面が切り替わる(下にスライドする)ので
『カスタマイズオプションを設定する』をクリック
①タイムラインの縦の長さをpx単位で指定
②タイムラインの横幅をpx単位で指定
③タイムラインの背景を白にするか黒にするか
④タイムラインの中のリンクの色の設定
⑤表示したい言語。ぼくは「自動」にしてます。
ここを設定入力すると、画面下に表示されてるプレビューに反映されます。
プレビューを確認しつつ、調整。
設定が終わったら『更新』を押してください。
すると
この画面になるので、
赤ワク『コードをコピーする』をクリックしてください。
ちゃんとコピーはされてるので。
では、次の工程に行きます。
WordPressテーマをいじってtwitterのタイムラインを表示させる
方法は様々ありますが、
今回はWordPressの有料テーマ〜AFFINGER5を使った実例でいきます。
ぼくは記事下に表示させたいのでそこをいじっていきます。
まずはウィジェット画面へ
『トップページ下部ウィジェット』をクリック
左下の『カスタムHTML』をトップページ下部ウィジェットの一番下にドラッグする。
今、ドラッグしてきた『カスタムHTML』をクリックし、
twitterのパブリッシュで作成した埋め込みコードをペースト(貼り付け)し、
『保存』をクリック
ブログを表示し、タイムラインが表示されてることを確認。
モバイルファーストの件もあるので、スマホやタブレットからも表示を確認しましょう。
実際表示してみて気に入らない時は、
Twitterのパブリッシュに戻り、作り直しましょう。
以上でっす!
ちょっと脱線
『AFFINGER5』が気になった方はこちらの記事をご覧ください
→【失敗したくない人向け】テーマはAFFINGER5一択!!
めっちゃ楽にいろんな項目いじれますし、
コードの知識ゼロでも、簡単に扱えます!!