HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

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

約7分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

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

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

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のタイムラインの埋め込みも解説しているので、ぜひ試してみてください!

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

HikoPro
HikoPro

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)