ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

たったこれだけ!WordPressのブログやサイトにTwitterのタイムラインを埋め込む方法

WordPress
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

WordPressでブログやサイトを運営していて、サイドバーやフッターにTwitterのタイムラインを埋め込みたい!

どうすればいいか分からないので、簡単なTwitterの埋め込み方法を教えて欲しい!

できればプラグインを使わない方法で!

今回は、WordPressでブログ運営をされている方向けに、サイドバーやフッターにTwitterのリアルタイムラインを埋め込む方法をご紹介します!

完成形イメージはこんな感じで、サイドバーなどに埋め込み、Twitterが更新されるとブログサイトの埋め込みタイムラインも自動的に更新される仕組みになっています。

一見難しそうに見えますが、この記事通りに進めていけばたったの3分程度で埋め込みが完了するので、ぜひ手を動かしながら記事を読み進めてください!

この記事を読むとできること
  • TwitterのリアルタイムラインをWordPressサイトに埋め込める
  • ブログのサイドバーにTwitterのタイムラインを埋め込める
  • たったの3分プラグインいらずでTwitterを埋め込む方法が分かる
スポンサーリンク

WordPressのブログやサイトにTwitterのタイムラインを埋め込む方法

WordPressのブログやサイトにTwitterのタイムラインを埋め込む流れを、まずはざっくりとご紹介します。

  1. https://publish.twitter.com にアクセス
  2. 入力ボックスに アカウントのURLをコピペ
  3. Embedded Timelineを選択
  4. set customization optionsで自分好みにカスタマイズ
  5. コードをコピー
  6. WordPressの管理画面から好きな場所にコードをペースト
  7. Twitterの埋め込み完成!

やることはたったのこれだけで、準備するものは自分のTwitterアカウントのURLのみでOKです!

https://publish.twitter.com を使えば、、、

このように背景を黒にして埋め込めできます。

こんな感じに、公式のフォローボタンも簡単に作れちゃいます!

Hiko
Hiko

順番に詳しく解説していきますね!

1.https://publish.twitter.com にアクセスしアカウントURLをコピペ

まずは、https://publish.twitter.com にアクセスします。

入力ボックスがあるので、そこの埋め込みたいTwitterアカウントのURLをコピペします。

一般的には、「https://twitter.com/ユーザー名」になっています。

コピペしたら、右の→ボタンをクリックします。

2. Embedded Timelineを選択

次に、タイムラインを生成するか、フォローボタンを生成するか聞かれるので、Embedded Timelineを選択し、タイムラインを作ります。

3.set customization optionsで自分好みにカスタマイズ

Embedded Timelineを選択すると、埋め込みコードが表示されますが、それをそのままブログに貼り付けても高さが微妙だったりします。

なので、set customization optionsで自分好みに高さや幅をカスタマイズしていきます。

まずは、set customization optionsをクリックします。

  • Height:高さ(600pxがオススメ)
  • Width:ブログ側で自動調整してくれるので空白でOK
  • 背景色を白か黒を選択
  • 言語を日本語に
  • Updateをクリックしてコードを生成

4.コードをコピーしWordPressの管理画面から好きな場所にペースト

<a class="twitter-timeline" data-lang="ja" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/Hiko_Pro?ref_src=twsrc%5Etfw">Tweets by Hiko_Pro</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Updateをクリックすると、このようなソースコードが生成されるので、このコードをコピーします。

サイドメニューにTwitterのタイムラインを埋め込む場合は、、、

  1. WordPressの管理画面にログイン
  2. 外観→ウィジットと進む
  3. サイドバーに「テキスト」を追加
  4. コピーしたコードを貼り付け
  5. 保存する

このような手順で、貼り付けていけばサイドバーにTwitterのタイムラインが埋め込まれていると思います!

5.高さ(height)を微調整する

サイドバーにTwitterのタイムラインを埋め込むことができたけど、高さが微妙。。。

こんな問題が出てくることでしょう。

その際には、ソースコード内の data-height=””の数値を変えてあげればOKです!

  • data-height=”1000″:数字が大きいほど高さが大きくなる
  • data-height=”100″:数字が小さいと高さが小さくなる

Ex. フォローボタンを作成する

タイムラインを埋め込むことができましたが、「あれ?フォローボタンがない!」と思われる方もいることでしょう!

このソースコードは、タイムラインを表示するだけのコードなので、フォローボタンがありません。

←このようなフォローボタン付きのタイムラインを作ってみましょう!

方法はとっても簡単で、https://publish.twitter.com にサイドアクセスし、Twitter Buttonsを選択します。

下に生成されたソースコードをコピーします。

そして、先ほど貼り付けたタイムラインのソースコードの直前に貼り付けて保存すればOKです!

Twitterの個別ツイートを記事内に埋め込む

次に、Twitterの個別ツイートをブログ記事内に埋め込む方法をご紹介します!

イメージとしてはこんな感じです!

このように、Twitterに表示されているツイートをそのまま記事内に埋め込むことができます。

Twitterのツイート画面に行き、埋め込みたいツイートの右上にある、下矢印のアイコンをクリックします。

ツイートをサイトに埋め込むを選択します。

このように、ソースコードが生成されるので、コピーし記事内に貼り付ければ完成です!

埋め込みがうまくいかない場合は?
  • 旧エディター:テキストタイプで埋め込み
  • Gutenberg:カスタムHTMLで埋め込み

このように、エディタによって埋め込み方が異なるので、上記の方法で試してみてください!

WordPressのブログやサイトにTwitterのタイムラインを埋め込む方法 まとめ

ネコ君
ネコ君

一見難しそうだけど、案外カンタンにできたよ!

いかがでしたでしょうか!

こちらの記事では、Instagramのタイムラインの埋め込みも解説しているので、ぜひ試してみてください!

最後までご覧いただきありがとうございました!

WordPressの学習にオススメの本

WordPressの基礎知識がある程度ある方向けの参考書で、HTMLファイルをWordPressのテーマ化にするまでの過程が詳しく書かれているので、実務にも使えるスキルが身につきます。

また、お客様のニーズで多い、カスタムフィールドの導入方法や、プラグインの開発方法や、管理画面の編集など実務でよく使う技術がよく学べます!

これからWordPressで高単価な案件を取りたい方は必ず読んでおきたい1冊です!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
WordPress
HikoPro Blog

コメント

タイトルとURLをコピーしました