かきお子パパー
友達のブログを見て僕もやりたいと思ったんだけど
毎日更新しているTwitterのタイムラインをブログのサイドバーに表示したいんだよね。
どうすればいいの？
かき男簡単だよ！こんな感じで表示できるよ！
詳しく説明していくね♪
サイドバーにTwitterのライムラインが表示されると
それなりに運営しているブログ感が出ていいですねー♪
では詳しくやり方を見ていきましょう♪
Twitterのタイムラインをブログ（SWELL）のサイドバーに埋め込む方法
用意するページ
- Word Pressのホーム画面
- タイムラインをブログに載せたいTwitterプロフィール画面
- Twitter Publishのページ（リンク先はこちら）
Twitterライムライン埋め込みまでの7ステップ
- TwitterプロフィールのURLをコピー
- Twitter Publishに貼り付け
- 「→」➡「Embedded Timeline」➡「Set customization options」の順にクリック
- Height(px)に500、Width(px)に350と入力
- 「Update」➡「Copy Code」の順にクリック
- WordPressを開いて「外観」➡「ウィジェット」➡「カスタムHTML」➡「共通サイドバー」➡「ウィジェット追加」の順にクリック
- HTMLコードを貼り付ける
かき男初めてチャレンジしても5分あれば終わりました♪
それじゃ、画像付きで詳しく見ていこう＾＾
タイムラインを表示したいTwitterのアカウントプロフィール画面のURLをコピーする
⇩
⇩
かき男おすすめは500×350ですが
ご自身のブログのデザインに合わせて変更してみても良いと思います♪
⇩
⇩
⇩
ブログのトップページを開いてサイドバーを確認します。
無事に埋め込みが成功すると
サイドバーに下記のようにリアルタイムのツイート（タイムライン）が表示されます。
スマホのサイドバーに挿入したい場合は
STEP❻、❼と同じ手順で「共通サイドバー【スマホ版】」にウィジェットの追加をすると
「記事」と「トップページ」の最下部にSTEP❽のタイムラインと同じように表示されます。
「スマホ開閉メニュー」に表示させたい場合も同様の手順で行います。
Twitterのタイムラインをブログ（SWELL）のサイドバーに埋め込めない時の対処法
上記のステップで完了なはずが・・・
まさかの「保存」できませんでした。。
そんな方もいたかと思うので下記の方法を試してみてください。
契約しているサーバーのサイトを開いて「WAF設定」まで行き「攻撃扱いされているデータ読み込みを除外」します。
かき男かき男はConohawingです♪
下記の❶→➋→❸のステップで処理したら
ツイッターのタイムラインが表示されるようになりました！
- プラグインを一つ一つ「無効化して」サイドバーのカスタムHTMLを保存してみる
- 「Google設定」➡「プライバシーセキュリティ」➡「JabaScript」➡「サイトが JavaScript を使用できるようにする」にレ点を入れる
- パソコンの再起動
- Twitterを開いて➡「プロフィールと設定」➡「設定とプライバシー」➡「プライバシーとセキュリティ」➡「ツイートを非公開にする」にレ点がついていたらレ点を外す
-まとめ- SWELL|ブログにTwitterのタイムラインを埋め込む方法
Twitterのタイムラインをブログに掲載することにより
検索流入した方が、Twitterを見てフォローしてくれるかもしれません♪
フォローしてもらうことにより交流も増えて自分の学びも増えると思うので
Twitterタイムラインをブログに掲載するのはおすすめです♪
かき男所要時間は大体5分くらいなのでやる価値ありますよ♪
分からないことがあればTwitterから連絡ください！
また、こちらのブログは「Swell」のテーマを使用しています。
最初はcocoonでしたが、サラリーマンと子育てをやりながら手の凝ったブログを運営するのは無理でした。。。
そんな時に「感覚的」に操作が可能な「Swell」にテーマを変更してから
ブログの更新頻度が1.5倍になりました。
プログラミング言語が全く分からない私でも何不自由なく使えているのでおすすめです＾＾
以上「SWELL|ブログにTwitterのタイムラインを埋め込む方法」でした！
コメント