ビジネス

【ヒヨコの足】ワードプレスにTwitterのツイート埋込の方法

皆さんこんにちは。

今回のテーマはブログ×TwitterということでTwitterからブログへの集客についてまとめさせていただきます。

その第一歩ともなるブログ記事、Twitterの埋め込みを今回ご紹介します

ともき@晴れ男
ともき@晴れ男
ブログを立て始めた段階ではTwitterからの集客もばかにならないので、是非とも今回の記事内容を試してくださいね。

普段Twitterを使わない方のためにまずはブログにTwitterを埋め込む方法から紹介していきます。

ブログ記事内にTwitterを埋め込む方法

ではまずは自分の埋め込みたいツイートまで飛びましょう。

自分の埋め込みたいツイートを選んだら右上のボタンをクリックしてください。

するとツイートを埋め込むという画面が表示されるのでそれをクリックしましょう。

クリックをしたら上の写真のように画面が変わります。

埋め込み用のリンクはこちらからどうぞ。

Copy codeと出てきますのでコピーして後はそのコードをブログに張り付けてください。

するとこんな風に表示されるので完了。

ともき@晴れ男
ともき@晴れ男
自分の使っているJINのテーマでは場合によっては表示されないこともあります。表示が上手くいかないときはツイートのリンクをそのままブログに張り付けることで埋め込みが完了するのでそちらを試してみてくださいね。

JINにおいてはリンクをただブログを入れるだけでいいので、寧ろそちら側を採用したほうが時間の短縮になりそうです。

タイムラインの埋め込み方法

続いてはタイムライン全体の埋め込みをご紹介します。

タイムライン全体を埋め込みたいときは埋め込み用のリンクへまず飛んでいただき、その後で検索窓で自分のアカウントのリンクを入力します。

入力が済んだら次に埋め込みの方法を聞いてきますので、

左側のEmbedded Timelineを選択。

するとコピーするコードが出てきますので、後は自分のブログに張り付けましょう。 https://twitter.com/TOMOKIA5

ともき@晴れ男
ともき@晴れ男
無事に表示されましたね!これで完成!
※因みにJINではTwitter Timelineを表示するときにこれをしてしまうとただのリンクの挿入となってしまいますのでご注意を。

タイムライン全体を埋め込みたい方は、twitter.com/自分のアカウント名

で埋め込むと上のように表示されるので試してくださいね♪

埋め込みができない方へ

ブログへ埋め込みができない方のために注意事項をまとめてみました。

例えば自分のブログに埋め込んでみても

https:///twitter.com/TOMOKIA5

のようにリンクだけが挿入されてしまうケース

ともき@晴れ男
ともき@晴れ男
ワードプレステーマ側の問題か、若しくはTwitterのアカウント側の問題どちらかであることが多いので、助けになれば嬉しいです。

ケースその1

ワードプレス側に問題がある場合は自分の使っているテーマを確認してみましょう。

Twitter埋め込み 【自分の使っているワードプレステーマ】

で検索をかけるとテーマ独自の挿入方法が記載されている場合があります。

もし上記の方法でうまく埋め込みができなかった場合は自分のワードプレステーマを確認してください。

ケースその2

今度はTwitterアカウント側の問題についてです。

ツイッターの設定画面に飛んでいただき、自分のツイッターを非表示にするで設定していないかどうか確認してください。

非表示設定の場合、publish.twitter.comでURLを入れても上記の画面のようにプレビュー画面に何も埋め込み結果が出てこなくなります。

ともき@晴れ男
ともき@晴れ男
以上の二つを確認すれば自分のブログに埋め込むことが出来るようになるはず!

Twitterにブログを埋め込みましょう!

自分が投稿したブログ記事をTwitterのフォロワー、潜在フォロワーに伝えていきましょう。

ワードプレス側で設定していないと、ブログ記事がサムネイル画像なしの素のURLのまま表示されてしまうなんて事態に陥ることになります。

目標としては、

のような埋め込みを目指したいですね。

ともき@晴れ男
ともき@晴れ男
JINのようにWordpress側で既に設定が完了している場合があるので、まずは自分でブログに投稿してみてカード化されているか確かめてみましょう!
ともき@晴れ男
ともき@晴れ男
残念ながらうまく表示されなかった場合は自分の手で表示設定を行う必要があります。

方法は2パターンありますので、自分に適した方法で設定してくださいね!

パターン1

まずは簡単な方から紹介していきます。

最初の方法は、「All in One SEO Pack」というWordpressのプラグインを利用する方法です。

まだインストールを完了していない場合は、プラグインの新規追加で「All in One SEO Pack」を入力してインストールを完了しましょう。

インストールが完了したら有効化してください。

有効化したら、「機能管理」から「ソーシャルメディア」を有効にして設定画面に入ってください。

OG:imageの部分はアイキャッチ画像に変更してください。

いよいよ最後の設定です。

Twitterサイト

@からはじまる自分のTwitterユーザー名を入力してください。

Twitterドメイン

Twitterのユーザー名から”@”を外して入力してください。

ここまで設定したら完了を押して、変更を保存しましょう。

最後に自分の設定がちゃんと変更されたか、こちらから確認しましょう。

Card URLに自分がカード化したいブログURLを入力して、カード化されたか確認しましょう。

ともき@晴れ男
ともき@晴れ男
変更に時間がかかることがあるので、変更が終わってから少し時間をおいてから変更が効いているか確認するといいでしょう。

パターン2

ワードプレスにプラグインを入れたくない方は自分でコードをfunctions.phpに入力する必要があるのですが、よくわからない方はプラグインを入れて作成したほうが正直手っ取り早いです。

ともき@晴れ男
ともき@晴れ男
functions.phpに手を加えるときは必ずバックアップを取っておきましょう!

Twitterカードをプラグインなしで導入!

おまけ

ツイートをブログに埋め込むと左側に表記してしまう方で、中央に寄せたい方は、以下のコードを使ってツイート内容を中央寄せにしましょう!

コードサンプル

/*埋め込みツイートを中央表示させるCSSコード*/
.twitter-tweet {
margin: 0 auto !important;
}

是非こちらをCSSに記入して中央ぞろえにしてください。

ともき@晴れ男
ともき@晴れ男
ではまた次回の投稿で!