ワードプレス「ストーク」にtwitterのタイムラインとフォローボタンを表示させる方法

初心者ブロガーの一歩先を行く、なかのっちです@fumikondatackle

今回は、WordPressブログに、ツイッターの「タイムライン」と「フォローボタン」を表示させる方法をシェアしますね!この記事を読めば、初心者ブロガーのあなたでも約5分でできます。本当です(笑)

WordPressにツイッターのタイムラインとフォローボタンを設置しました

 

初心者ブロガーだったボクは、調べるのにめっちゃ苦労しましたけど。あなたはこの記事を読んで、サクッとタイムラインをブログに表示させちゃってくださいね。

では、わかりやすく解説していきます。

 

タイムラインを表示させる方法

タイムラインを表示させるための手順はつぎの2つです。

  1. WordPressに貼り付ける「コード(英語や数字の文字列)」を作成する
  2. WordPressのウィジェットに、作成した「コード」を貼り付ける

この2つでOKです!

 

WordPressに貼り付ける「コード(英語や数字の文字列)」の作り方

このような文字列を作成して、WordPressの所定の場所に貼り付ければ、タイムラインが表示されます。

<a class=”twitter-timeline” data-width=”300″ da ~一部省略~ om/widgets.js” charset=”utf-8″></script>

では「コード」の作り方を解説します。

まず最初に、赤枠内の「自分のツイッターのURL」をコピーします。

ツイッターのURLをコピーする

 

次に、https://publish.twitter.com/へ行きます。

https://publish.twitter.com/へ行きます

 

「Enter a Tweet URL」に、先ほどコピーしておいた「自分のツイッターのURL」を貼りつけます。貼りつけたら「→」をクリック。

自分のツイッターのURLを貼りつけます

 

「Embedded Timeline(タイムラインを埋め込む)」を選択します。

埋め込みを選択します

「set custmization options」をクリック。

カスタマイズを選択します

 

(1)「Height(px)」は、タイムラインの縦の長さです。

(2)「Width(px)」はタイムラインの横の長さです。

ぼくは、縦を600に、横を300に設定しました。他の項目は、そのまま(デフォルト)でOKです。

幅と高さを入力します

 

「Update」をクリックします。

アップデートをクリック

 

「コード」が完成したので。「Copy Code」をクリックします。

コピーコードをクリック

 

これで、WordPressに貼り付ける「コード(英語と数字の文字列)」がコピーされました。

コードがコピーされました

 

WordPressのウィジェットに「コード」を貼り付ける方法

先ほどコピーした「コード」をWordPressに貼り付ける作業を解説していきます。

「外観」→「ウィジェット」を選択。

ウィジェットを選択

 

「カスタムHTML」を「PC:メインサイドバー」にドラッグ&ドロップします。

※「カスタムHTML」ではなく「テキスト」でもOKです。(たぶん)

カスタムHTMLをドラッグ&ドロップします

 

「内容」に、先ほどコピーした「コード(英語と数字の文字列)」を貼りつけます。

内容にコードを貼りつけます

必要であれば「タイトル」も記入しましょう。最後に「保存」をクリックすれば完成です。

 

ブログのサイドバーにタイムラインが表示されました!かんたんでしょ(^^

タイムラインが表示されました

 

つぎは、フォローボタンの設置です。

フォローボタンを表示させる方法

フォローボタン

フォローボタンを表示させるための手順はつぎの2つです。

  1. フォローボタンの「コード(英語や数字の文字列)」を作成する
  2. WordPressのウィジェットに、作成した「コード」を貼り付ける

この2つでOKです!

 

フォローボタンのコードの作り方

先ほどの「Embeddmd Timeline(タイムラインを埋め込む)」の右隣にあった「Twitter Buttons」を選択します。

Twitter Buttons

 

つぎに「Follow Button」を選択

Follow Buttonを選択

 

「コード」が完成したので。「Copy Code」をクリック。

コピーコードを選択

WordPressのウィジェットに貼り付ける、フォローボタンの「コード」がコピーされました。

コードがコピーされました

 

フォローボタンのコードを貼り付ける方法

「フォローボタンのコード」を、タイムラインと同じように、ウィジェットに貼りつけていきます。

「内容」に貼り付けてある「タイムラインのコード」の下に、「フォローボタンのコード」を貼りつけます。

貼りつけたら、「保存」をクリック。

 

タイムラインの下に「フォローボタン」が表示されました。

フォローボタンが表示されました

 

フォローボタンの横に「フォロワー数」を表示させる方法

ツイッターのフォローボタンとフォロワー数

フォロワー数を表示させる方法を解説します。

下記画像で、青色に反転している箇所に「false」と記載されているのを。「true」と書き換えればOKです。

falsetをtrueに上書きします

 

こんな感じで、フォロワー数が表示されます。

フォロワー数が表示されました

おつかれさまでした!

 

ブログ運営に関するおすすめコンテンツ

ボクがブログ運営で利用しているサービスの一覧をシェアしますネ。

▼おすすめのサービス一覧

  • レンタルサーバーエックスサーバーのX10プラン
  • ドメインお名前.comとバリュードメイン
  • ネット環境:NTTの光からauひかりへ乗り換え申請中
  • Google:Gメール、Analytics、SearchConsole、AdWords(キーワードプランナー)、フォト、youtube
  • WordPressテーマSTORK(ストーク) 初心者ブロガーにオススメの有料テーマ。このブログもストークで作りましあ。超かんたんに、見た目をカスタムすることが可能です。ざっくり言うと、ストークは「とっても使いやすいホームページビルダー」みたいなものです。
  • サロン:八木仁平さんのイントラサロン
  • 画像加工系:WinShot、PhotoScape、Unsplash、Canva、集中線追加ツールなど
  • SNS:LINE@、twitter、facebook、Messenger
  • その他amazonプライム、Kindle、note、FeBe、Podcast

 

この記事の中でわかりにくい箇所があれば、ツイッターでボクをフォローしてDMを飛ばしてください。もしくはfacebook Messengerでメッセージしてくださいね。

なかのえいじ
「あなたが読みたい記事」もリクエスト待ってます!

2 件のコメント