【無料で丸ごと公開中】ブログコンサルティングの一部を見てみる

Twitterの埋め込みとカスタマイズ方法(タイムライン・ツイートをWordPressに埋め込む方法)

 
この記事を書いている人 - WRITER -
大島 松二郎
ログ集客屋まつ ブログ集客コンサルタント 1985年生まれ 福島県出身 月間57000PVのブログを運営中のブログ集客の専門家。 自身が運営してきたブログ・メルマガノウハウを基に集客のアドバイスをしている。 【略歴】 28歳の頃、会社の突然の倒産をきっかけにインターネットビジネスの世界に入る。その後、幾度となく挫折を経験後、ブログ運営やアフィリエイトに関する情報商材を買いあさり、全くのド素人から独学でWordPressの構築、記事の書き方、ライティング、SEO対策、マーケティング、メルマガ集客を学び取る。2015年8月から始めたブログ「ブログ集客屋まつ」は地道に成長し続け、2016年4月→1万PV、2017年7月→2万PV、2018年1月時点→45000PV(現在も運営中)。 また「ブログだけで稼ぐこと」にこだわらないマーケティング重視のスタイルであらゆる業界で使えるマーケティングノウハウを確立。現在は「自分にしかできない仕事を確立したい」人を対象に、ビジネス経験ゼロ、顧客ゼロ、売上ゼロからのブログの集客やビジネスの売上作りのサポートを行っている。

どうも、ブログ集客屋まつです。

この記事では「自分のTwitterタイムラインやツイートをWordPressなどのサイトに埋め込み・カスタマイズする方法」を解説しています。

Twitterをよく使うユーザーにとってはサイト内に埋め込むだけでオリジナリティが出せて、しかも真似されづらくなるという特権つきです。

この記事ではタイムラインやツイートの埋め込みやカスタマイズ方法をわかりやすく解説しているので、記事を読みながらぜひ作業をしてみてください。

Twitterの埋め込みとは何?

Twitterの埋め込み機能とは、自分のTwitterのタイムラインやツイートをWordPressなどに埋め込む方法です。

僕もよくツイートを記事内に埋め込んだりしてますが、オリジナリティが簡単に出せて、しかも人間味が出るのでリアルなコンテンツになります。

【タイムラインの例】

自分のタイムラインを貼ることができる

【特定のツイートの例】

https://twitter.com/arata0_100/status/1121302563523977216

自分がつぶやいた特定のツイートを貼ることができる

こんな感じですね。

これがあるだけで「人間らしい」って感じがしますし、ライターさんなどが書く記事と簡単に差別化できます。

WordPressならサイドバーでも記事内でもフッターでもどこでも埋め込むことができるので、WordPressとTwitterを連携して使ってる人は利用必須ですね。←個人的に

Twitterの埋め込み方法(パーツ毎に分けて紹介)

では具体的なTwitterの埋め込み方法をご紹介します。

①タイムラインをトップページや記事中に埋め込む

まずはタイムラインをトップページや記事中に埋め込む方法です。

始めにTwitterの自分のプロフィールページ(例(自分の場合):https://twitter.com/arata0_100)にアクセスしましょう。

Twitterタイムラインの埋め込みとカスタマイズ方法

右上の自分のTwitterアイコンをクリックして「設定とプライバシー」をクリックします。

Twitterタイムラインの埋め込みとカスタマイズ方法

左側のメニューから「ウィジェット」をクリックしましょう。

Twitterタイムラインの埋め込みとカスタマイズ方法

publish.twitter.com」をクリックします。

Twitterタイムラインの埋め込みとカスタマイズ方法

自分のTwitterドメインを入力してEnterを押しましょう。

Twitterタイムラインの埋め込みとカスタマイズ方法

「埋め込みタイムライン」をクリックします。

Twitterタイムラインの埋め込みとカスタマイズ方法

「カスタマイズオプションを設定する」をクリックしてください。

※「コードをコピー」をクリックすればもう埋め込みはできますが、一応カスタマイズの方法も解説しておきます。

Twitterタイムラインの埋め込みカスタマイズ方法

タイムライン埋め込みのカスタマイズでは以下の項目を変更することができます。

Twitterタイムラインの埋め込みとカスタマイズ方法

テキストで説明すると以下の通り。

height(px) 高さを指定できる
width(px) 横幅を指定できる
これをどのように見ますか 背景色を「光」「ダーク」の2通りから選択できる
色のマーク リンクにカーソルを載せた時の色を指定できる

上記の設定をいじることができるので、ご自身の世界観とマッチするようにカスタマイズしてみましょう。

Twitterタイムラインの埋め込みとカスタマイズ方法

上記は「height(高さ)」を600pxにした場合。

Twitterタイムラインの埋め込みとカスタマイズ方法

「height(高さ)」を400pxにした場合。

Twitterタイムラインの埋め込みとカスタマイズ方法

上記は「width(幅)」を500pxにした場合。

Twitterタイムラインの埋め込みとカスタマイズ方法

上記は「ダーク」に指定した場合。光にした場合は白背景になります。

Twitterタイムラインの埋め込みとカスタマイズ方法

上記はマウスのカーソルを載せた時の色。これもブログのリンクのマウスを載せた時(マウスオーバーした)の色と合わせてもいいと思います。

Twitterタイムラインの埋め込みとカスタマイズ方法

すべての設定が終わったら「更新」をクリックしましょう。

Twitterタイムラインの埋め込みとカスタマイズ方法

カスタマイズ後のコードがでてきますので「コードをコピー」をクリックしてコピーしてください。

※ちなみに「コードをコピー」をクリックすると真っ白な画面になりますが、ページを更新すれば元の画面に戻ります(原因は謎ですw)。

埋め込みコードをサイト内に埋め込む

次はコピーした埋め込みコードをサイト内に埋め込んでみましょう。

この記事では具体例として「WordPressのウィジェットからサイドバーに貼り付ける方法」を解説していきます。

Twitterタイムラインの埋め込みとカスタマイズ方法

「外観」→「ウィジェット」とクリックしましょう。

Twitterタイムラインの埋め込みとカスタマイズ方法

ウィジェットの左側のメニューから「テキスト」をクリックして「サイドバー」を選択し、ウィジェットを追加しましょう。

Twitterタイムラインの埋め込みとカスタマイズ方法

エディタを「テキスト」にして先程コピーした埋め込みコードを貼り付けていきます。

Twitterタイムラインの埋め込みとカスタマイズ方法

貼り付けたら「保存」をクリックしましょう。

これでサイドバーへの貼付け作業は終了です!

記事内に埋め込む場合は?

もし埋め込みコードを記事内に埋め込む場合は「新規投稿を追加」の画面から行います。

Twitterタイムラインの埋め込みとカスタマイズ方法

エディタを「テキスト」にしてコードを貼り付けましょう。

Twitterタイムラインの埋め込みとカスタマイズ方法

貼り付けが終わったら「下書き保存」→「プレビュー」を表示して確認してみます。

Twitterタイムラインの埋め込みとカスタマイズ方法

記事内に上手く表示されていれば完了です!

②ツイートをトップページや記事中に埋め込む

次はツイートをトップページや記事中に埋め込む方法です。タイムラインを埋め込むより超簡単ですのでやってみましょう。

ツイートをトップページに埋め込む場合

ツイートをトップページ(サイドバーなど)に貼り付ける方法です。

ツイートの埋め込み方法

自分の埋め込みたいツイートの右上にあるカーソルをクリックしましょう。

ツイートの埋め込み方法

「ツイートをサイトに埋め込む」をクリックします。

ツイートの埋め込み方法

コードが表示されるのでコピーをしてください。

ツイートの埋め込み方法

「外観」→「ウィジェット」の左側メニューから「テキスト」を選択します。

ツイートの埋め込み方法

位置を「サイドバー」にして「ウィジェットを追加」をクリックしましょう。

ツイートの埋め込み方法

「テキスト」をクリックしてから先程コピーしたコードを貼り付けて保存しましょう。これでツイートのトップページへのサイドバーへの埋め込み作業は完了です。

ツイートを記事中に埋め込む方法

次はツイートを記事中に埋め込む方法です。

ツイートの埋め込み方法

埋め込みたいツイートの右上にある矢印をクリックし「ツイートへのリンクをコピー」をクリックしましょう。

ツイートの埋め込み方法

あとは新規投稿などのページでリンクを貼付けすればツイートが表示されます。

↓↓実際にコードを貼り付けた例がこちら↓↓

https://twitter.com/arata0_100/status/1121302563523977216

こんな感じで表示されていればOKです!!

まとめ

ブログとTwitterを上手く連携しながら更新することで、真似されづらくなり、オリジナリティのあるコンテンツが作れるようになります。

特に今は超パクリパクられの時代です。

油断するとコンテンツ全コピーとかされますし、サイトの雰囲気が超似てる人とかも出てきますので、真似されにくいコンテンツ作りをする意味でTwitterと連携プレーをするのもいいと思いますね。

 

【無料プレゼント付】ブログ集客屋まつの公式メルマガ

公式メルマガでは

  • 月間12万PV突破
  • メルマガ読者1000名突破
  • Twitterフォロワー7500人突破

など、僕の4年間のブログ経験で培った
集客ノウハウをバンバン公開しています。

更に無料プレゼントでは
広告費0円
で、ブログの自動集客システムを作る方法を
お伝えしています。

詳しくは下記のボタンをクリックしてプレゼントをお受け取りください。

 

 

無料プレゼント

この記事を書いている人 - WRITER -
大島 松二郎
ログ集客屋まつ ブログ集客コンサルタント 1985年生まれ 福島県出身 月間57000PVのブログを運営中のブログ集客の専門家。 自身が運営してきたブログ・メルマガノウハウを基に集客のアドバイスをしている。 【略歴】 28歳の頃、会社の突然の倒産をきっかけにインターネットビジネスの世界に入る。その後、幾度となく挫折を経験後、ブログ運営やアフィリエイトに関する情報商材を買いあさり、全くのド素人から独学でWordPressの構築、記事の書き方、ライティング、SEO対策、マーケティング、メルマガ集客を学び取る。2015年8月から始めたブログ「ブログ集客屋まつ」は地道に成長し続け、2016年4月→1万PV、2017年7月→2万PV、2018年1月時点→45000PV(現在も運営中)。 また「ブログだけで稼ぐこと」にこだわらないマーケティング重視のスタイルであらゆる業界で使えるマーケティングノウハウを確立。現在は「自分にしかできない仕事を確立したい」人を対象に、ビジネス経験ゼロ、顧客ゼロ、売上ゼロからのブログの集客やビジネスの売上作りのサポートを行っている。

Copyright© ブログ集客実践の書 , 2019 All Rights Reserved.