ツイッターがワードプレスで表示されない?埋め込み方法・手順は大丈夫?

今回は、ワードプレスでツイッターが表示されない場合の原因・対処方法や、埋め込み方法について詳しくご紹介していきます。

他のアフィリエイトブログなどを見ていると、TwitterなどのSNSを利用している人は多いですよね。

記事の本文に使用されていたり、ツイッターのマークのボタンが設置されていたり、使い方は様々です。

そのようにやってみたいけど方法がわからない、難しそう、と感じている方も多いかもしれませんね。

今回はそんなツイッターの貼り付け関する知識を詳しくご紹介していきます。

また、ブログ(サイト)にツイッターのボタンを設置する方法も解説していきますので、是非ご活用ください。

岡田康平

岡田康平
こんにちは、岡田康平です。

なぜ私が在宅ワークで、家族全員が楽しめるこんなライフスタイルを送れているのか?

期間限定で、私が自由なライフスタイルを手に入れた方法について特別公開しているので、是非見ていってくださいね。

▼2児のパパが自由になった方法▼

▲その秘密をメルマガで公開中▲

ワードプレスのツイッターに関連する機能とは?

今やスマホ利用者なら見た事が無いという人はいないのではないか?と言えるくらい普及したSNS。

中でも、Twitterに関しては利用者も多いですし、知名度も高いですよね。

ワードプレスでアフィリエイトを行っている人の中にも、Twitterと連携させている人は多いと思います。

例えば、投稿した記事を「Twitterカード」としてツイートで紹介したり、本文中に誰かのツイートを埋め込み、感想や意見として利用している人は多いですね。

他にも、サイトにソーシャルボタンと呼ばれるTwitterのマークのボタンを設置する事ができて、それを押すと押した人のツイートとして記事を紹介してもらう事もできます。

アフィリエイトを行う上でサイトや記事の存在を知ってもらう事はアクセス数アップのためにもとても重要です。

そのためにもTwitterのアカウントを作って、有効活用してみてくださいね。

 

画像の代わりとしてもツイートの埋め込みは使える!?

記事を書いていると、本文に画像を使いたい時がありますよね。

文字だらけでは見づらくなってしまう可能性もありますし、読者の方が飽きてしまう可能性もあります。

それに対しても画像はとても大切になります。

しかし、問題は著作権や、肖像権です。

フリー画像サイトからダウンロードした画像で事足りるのであれば問題はありませんが、エンタメやドラマや映画のサイトを運営している場合、芸能人の画像を使用したい場面があったりしますよね?

そこで、インターネットで見つけた画像を無断で使ってしまうと、著作権や肖像権に触れてしまう可能性があるのです。

そんな時に、誰かが芸能人の画像を付けてツイートしている人がいれば、そのツイートを埋め込んで画像の変わりとして利用する事でリスクを軽減する事ができるというわけです。

岡田康平

岡田康平
しかし、これに関しても絶対大丈夫というわけではありません。

厳密に言うとアウトの可能性もありますが、画像をそのまま利用するよりは比較的安全なのでオススメです。

あなたに読んで欲しいオススメ記事

 

なぜTwitterの画像ならOKなのか?

ツイッター 表示されない 埋め込み方法

なぜツイートの画像を利用すると比較的安全なのか?

理由はTwitterの性質にあります。

そもそもTwitterやインスタグラムなどのSNSは、世間に公開するために行われているという前提があるので、使用するにあたって肖像権に関してはグレイとなっています。

というのも、拡散という機能がついているだけに、それがどんどん広まっていく事が前提ですが。

そのため、Twitterの投稿を埋め込む形で、ブログに掲載する事はOK?という事になります。

ただTwitterの画像をコピーしてきて、画像だけ貼る行為は、インターネットで探した画像を掲載する事と何ら変わりません。

そこでツイッターをあなたのブログで掲載するには、ツイートを埋め込むという手段をとらなければなりません。

その手順については下記で詳しくご紹介していきます。

岡田康平

岡田康平
著作権・肖像権は正直グレイって事は頭に置いておきましょうね。

しかし、トレンドアフィリエイトブログを運営している人はツイッターを使用する事によって、アドセンスを剥奪されるリスクをより減らし、ブログを読みやすく、ユーザーの離脱率を下げる事ができます。

私は、トレンドアフィリエイトブログはやっていませんが、ツイッターを結構画像代わりに使用していたりします。

インスタ画像は画質が良過ぎるため、ブログ(サイト)の表示が遅くなり、SEOに悪影響を及ぼす恐れがありますので、インスタよりはツイッターがオススメです。

 

ワードプレスでツイッターの投稿を埋め込む方法とは?

ツイッター 表示されない 埋め込み方法

では実際に、記事中にツイッターの投稿を埋め込む方法についてご紹介していきます。

ビジュアルモードにツイッターのURLを挿入して表示させるという方法もありますが、この場合、正しく表示ができない場合があるようですね。

そこで今回は、「ツイートをサイトに埋め込む」という方法で手順をご紹介していきます。

埋め込むと聞くととても面倒な作業を想像されるかもしれませんが、実はとても簡単な作業になのでご安心くださいね!

 

5つの手順

  1. 記事に表示したいツイッターを表示させ、「Ⅴ」のマークをクリック
  2. 「ツイートをサイトに埋め込む」を選択
  3. 一番上の枠内にあるコードを全てコピー
  4. WordPressを「テキストモード」に切り替え、表示をさせたい位置に貼り付ける
  5. ビジュアルモードに戻る

例えば見出しの下にTwitterを埋め込みたい場合には、『<h2>(見出し2)』『<h3>(見出し3)』などのタグがありますので、その下にコピーしてきたコードを貼り付けます。

もちろん文中に埋め込む事も可能ですので、プレビューを見ながら位置を調整してみてくださいね。

 

「V」マークの場所

「ツイートをサイトに埋め込む」の項目がある「Ⅴ」マークの位置は、どの画面でツイッターを表示しているかにより2通りに分かれます。

 

①「画像」の項目で一覧表示している場合
ツイッター 埋め込み方法 表示されない

一覧表示されている中から好きな画像をクリックすると画面中央に拡大表示されます。

ツイッター 埋め込み方法 表示されない

画像の右下の赤枠で囲った中に「V」マークがありますのでそこから「ツイートをサイトに埋め込む」を選択します。

ツイッター 埋め込み方法 表示されない

一番上の枠内に表示される文字列全てが「埋め込みコード」となりますので、全てをコピーしてテキストモードに貼り付けましょう。

 

②「話題のツイート」「すべてのツイート」などを表示している場合
ツイッター 埋め込み方法 表示されない

記事に埋め込みたいツイートの一番右上の赤枠で囲った中に「V」マークがあります。

以降は①のやり方同様に「ツイートをサイトに埋め込む」を選択し、全てをコピーしてテキストモードに貼り付けましょう。

※どちらからコードをコピーしてきても同じコードになり、表示も同じになりますのでやりやすい方でOKです!

 

埋め込んだツイッターがうまく表示されない場合はどうすればいい?

ツイッターの投稿を埋め込んだ場合には、通常であれば、

このように投稿がそのままの状態で画像付きで表示されます。

しかし表示ができない場合だと、

ツイッター 表示されない 埋め込み方法

このように引用のボタンを利用した時のような枠の中に文字だけで表示がされてしまいます。

これはやり方が間違っているのか!?と不安になる方もいるかもしれませんが、そうではありません。

おそらく原因は閲覧する側のブラウザの設定になる可能性が高いです。

 

正しくツイッターの埋め込みを表示させる方法は?

この場合、多くの原因は利用しているインターネットブラウザの設定が関係していると思われます。

インターネットブラウザの設定で「Javascript」をオフにしているとツイッターは正しく表示されません。

そのため、オンに設定をし直してみてください。

もしこれが原因の場合、他の端末から見ると普通に表示が出ている、という可能性が高いですので確認してみてくださいね。

インターネットブラウザというと、

  • Internetexplorer
  • GoogleChrome
  • Safari

などなど、様々な種類があり、それぞれ設定方法が異なります。

利用されているインターネットブラウザでの設定方法については調べてみてくださいね!

 

▼2児のパパが自由になった方法▼

▲その秘密をメルマガで公開中▲

ツイッターのSNSボタンをワードプレスに埋め込む方法とは?

ツイッター 表示されない 埋め込み方法

よくサイトや記事でこのようなボタンを見かけますよね。

例えばツイッターを利用している場合、このツイートボタンを押すと、

ツイッター 表示されない 埋め込み方法

このような表示が出て、ツイートボタンを押すだけで簡単に投稿ができるという機能です。

このサイトを有益だと思った時や、他の人に知ってもらいたいと思ってもらえた場合に、閲覧している方に押してもらうために設置するボタンになります。

それよって広く周知される事によって、アクセス数の増加が望めますね。

SNSを利用している人は多いですし、流行に敏感な人が利用しているからこそ目に留まった時に興味を持ってもらえる可能性もあると思います。

もちろん必ず利用しなければいけない機能ではありませんが、邪魔になるものでもありませんし、利用するのがオススメです。

 

ソーシャルボタンを埋め込む方法は?

ソーシャルボタンを設置する方法はいくつかありますが、一般的に多く用いられる方法は、

  1. ソースコードを入力してソーシャルボタンを設置する方法
  2. テンプレートを編集してソーシャルボタンを設置する方法
  3. プラグインを利用してソーシャルボタンを設置する方法

この3つが比較的簡単で利用する人が多いです。

それぞれについてもう少し詳しくご紹介していきます。

 

ソースコードで設置する方法

ソーシャルメディアごとに個別の登録を行う方法です。

例えば、ツイッターとFacebookのボタンを表示させたい場合には、それぞれのコードをコピーしてきて、テキストモードの記事中などに貼り付ける作業を行います。

この方法だと、1記事ずつコードを貼り付ける作業が必要になります。

もし特定の記事だけに表示させたい場合などはこの方法が適切だといえますね。

しかし全部に表示させたい場合には効率的とは言えませんので、以下2つの方法の方が良いと言えます。

 

テンプレートで設置する方法

この方法で行うと、前記事に一度にSNSのボタンを設置する事ができます。

ただテンプレートのコードの中に、ソーシャルボタンを埋め込むためのコードを入力しなければなりません。

テンプレートの編集となると、サイト全体の表示を変えてしまいかねませんので、初心者の方や詳しくない方にとっては少し抵抗がありますよね。

また、英語の文字列の変更は思っている以上に大変な作業と言えます。

テンプレートやコードの編集が得意だという方にとっては一番手っ取り早い方法になるので、オススメです。

 

プラグインで設置する方法

個人的にはこのプラグインの利用が一番オススメです。

上記二つに比べて作業がかなり楽になるうえに、全記事にまとめてSNSボタンを設置する事が可能です。

ソーシャルボタンを埋め込むためのプラグインは複数存在していますが、今回オススメのプラグインは「WP Social Bookmarking Light」です。

これさえあれば手間なく全ての記事にSNSボタンを設置する事が可能になります。

作業時間も短くて済みますし、最初こそ多少の設定は必要になりますが、初心者の方にとっても扱いやすいプラグインなのでとてもオススメです。

 

「WP Social Bookmarking Light」でツイッターボタンを埋め込む方法は?

ツイッター 表示されない 埋め込み方法

WordPressのプラグイン「WP Social Bookmarking Light」とは、簡単にソーシャルボタンを追加できるプラグインです。

一度設定を行えば、全記事まとめて設置が可能ですし、コードを入力したりテンプレートの編集を行うよりも操作で迷う事はありません。

初心者の方にもとてもオススメですので、是非利用してみてくださいね。

インストール方法は、他のプラグイン同様に、

  1. WordPressの左側メニューから「プラグイン」を選択
  2. 「新規追加」をクリック
  3. 右上の検索窓で「WP Social Bookmarking Light」を検索し、見つかったらいますぐインストールをクリック
  4. インストール完了後「有効化」をクリックすれば完了。

この手順で追加を行ってくださいね。

では、設定についてご説明していきます。

 

「WP Social Bookmarking Light」設定方法

まず、「WP Social Bookmarking Light」をインストールし有効化したらサイトを確認してみてください。

デフォルトの状態でもはてなブックマーク・Twitter・Facebookのボタンが表示されていますよね。

もしこの状態でも問題がないという事であれば設定は必要なく、そのままの状態でご利用いただけます。

しかしご自身の好みに合わせてカスタマイズをしたいという方は、下記の設定をお試しください。

 

表示ボタンを設定する手順

ツイッター 表示されない 埋め込み方法
  1. WordPressの管理画面を開き、左側メニューから「設定」を選択
  2. 「WP Social Bookmarking Light」を選択し設定画面を表示
  3. 上部に表示されているタブから「一般設定」を選択
  4. 入れたい機能を右から左へドラッグする
  5. 外したい機能の「×」を押す

サービスと書かれている項目の下にあるのが、SNSの種類を選択する項目になります。

右側に並んでいるSNSが表示させる事ができるSNSになりますので、その中から選択をするようにしましょう。

特にオススメは利用者の多い以下の3つです。

  • Facebookのいいね!ボタン
  • Twitterのツイートボタン
  • はてぶボタン

もし他にも気になるボタンがあれば選択して表示されるようにしてみてくださいね。

 

表示する位置を設定する手順

ツイッター 表示されない 埋め込み方法

ボタンを表示させる場所を「記事上部」・「記事下部」・「両方」から選ぶ事ができます。

一番上の「位置」の項目の横にあるプルダウンを開いて、選択しましょう。

  • Both:ページ上部・下部 両方に表示をさせます。
  • Top:ページ上部にのみ表示させます。
  • Bottom:ページ下部にのみ表示させます。
  • None:表示させない設定になります。

好みで設定して頂いてOK、オススメは「Both」です。

 

トップページに表示させる設定にする手順

これは、記事の中にのみ表示をさせるのか、トップページにも表示をさせるのかを選ぶ設定になります。

2つ目の項目の「個別記事のみ」の項目を、“No”にすると、トップページやカテゴリーページでも、ソーシャルボタンが表示されるようになります。

逆に“Yes”を設定すると記事の中にのみソーシャルボタンが表示されますので、好みに合わせて設定を行ってみてくださいね。

 

固定ページに設定する手順

「ページ:」では、固定ページにもソーシャルボタンを表示するかどうかを選択することができます。

固定ページとは、読者に対して役立つコンテンツを作るための記事ページと違い、お問い合わせフォームや会社概要など、サイトにとっては必要だが、特にシェアされる必要のないページです。

そのため、この項目は「No」のままでOKです。

 

追加したSNSの設定

ツイッター 表示されない 埋め込み方法

表示させるソーシャルボタンを選ぶと、上部のタブの中にそのSNS名が表示されます。

それぞれのタブをクリックすると、各ボタンの個別の設定ができます。

今回は「Facebook」・「Twitter」・「はてぶ」の3種類についてオススメのカスタマイズ方法をご紹介していきます。

 

Facebook

「FB」タブをクリックすると、Facebookの設定項目が表示されます。

「Locale:」の項目を「ja_JP」に変更すると、Facebookボタンの「like」という文字が「いいね!」に変更されますので、好みに合わせて利用してみてください。

変更した場合には必ず「変更を保存」をクリックしましょう。

さらに「FB Like」のタブをクリックすると、いいね!ボタンの他に、シェアボタンを表示させるか否かの設定も可能です。

表示させたい場合には、「share:」の項目が“Yes”になっている事をご確認ください。

他にも、「Layout:」などの項目では、ボタンの表示を変更する事が可能ですので、サイトを確認しながら調整を行ってみてくださいね。

 

Twitter

「Twitter」タブをクリックし、Twitterの設定を行います。

「Language」を”Japanese”に変えることで、ボタンが日本語表記になります。

また、もしご自身もTwitterのアカウントを所持している場合には、「Via」の欄に、あなたのツイッターアカウントを入力しておくことで、コンテンツがツイートされた時に、自動であなたのアカウント情報もツイート文に含まれるようになります。

Twitterでも情報を発信している方は、フォロワーが増える可能性があるのでオススメです。

Twitterアカウントをお持ちでない方も是非この機会に作ってみてくださいね!

 

はてぶ

「Hatena」タブをクリックすると、はてぶの設定項目が表示されますが、かなり少ないですね。

この項目は、“standard”にするとカウント式のボタンになりますので、利用してみてくださいね。

 

『ツイッター ワードプレス 表示されない 埋め込み』まとめ

今回は、ワードプレスでのツイッターの埋め込み方法や、表示されない時の対処方法について詳しくご紹介してきました。

ソーシャルボタンの機能などは、実際に利用したことがないと知らなかったという方も多いと思います。

ただ使える物は使った方が得ですし、もしTwitterを使って情報を発信しているという人がいれば特に役立つ機能と言えますよ。

プラグインを利用すれば誰でも簡単にボタンの設置が可能ですので、是非取り入れてみてくださいね!

2児のパパが自由を手に入れた方法を メールマガジンで公開中!

 この記事へのコメント

  1. とも より:

    はじめまして。
    ワードプレス でツイートを埋め込みに不具合が起きる場合があります。。

    引用表示もされず、ツイートのURLだけになるのですが・・・

    なにか要因はありでしょうか???

    教えていただければ幸いです

    • okadakouhei より:

      問い合わせ頂きありがとうございます。

      URLで表示されない事象が起きています。

      ツイッターの埋め込みタグでHTMLで埋め込みを行ってみて下さい。

      https://youtu.be/ecLqPsidj2A

      こちらを参考にして下さい。

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ワードプレス 初心者 使い方 記事作成

ワードプレス初心者必見!使い方・記事作成方法

ワードプレスの始め方&アフィリエイトブログの記事の書き方

ワードプレスの始め方&アフィリエイトブログの記事の書き方

Master Post Advert 使い方 設定方法

広告挿入プラグイン「Master Post Advert」使い方・設定方法

ブログの表示速度が遅い時の対処法「lazy load」使い方・設定手順

ブログの表示速度が遅い時の対処法「lazy load」使い方・設定手順

インデックス促進プラグイン「PuSHPress」使い方・設定方法

seoでは読み込み速度が大事?やるべきことは?

SEOでは読み込み速度が大事?改善する方法も解説