フリーランスのホームページ

簡単3分プラグイン要らず!Twitterをワードプレスサイト/ブログに埋め込む方法

140文字のコミュニケーションツールとして世界中で利用されているソーシャルネットワーキングサービス(SNS)『Twitter(ツイッター)』。

「ツイート」と呼ばれる140文字(英語では280文字)のつぶやきで、興味があること、自分の思想や考え、学んだこと、役立つ情報などを発信していくシステムで、プライベートからビジネス用途まで幅広く活用されています。

今回は、そんなTwitterとワードプレスサイト/ブログを連携させる方法について。

Twitterはリツイート機能など拡散力が非常に強いSNSなので、ブログやHPと連携させて認知度やアクセス数アップにつなげましょう。

スポンサードリンク

タイムラインを埋め込む方法

まず最初に、サイトのページの中、もしくはウィジェットを使ってサイドバーやフッターなどにTwitterのタイムラインを埋め込む方法です。

まずは、Twitter.comに飛んで自分のアカウントにログインしましょう。

①自分のTwitterページURLをコピー

https://twitter.com/アカウント名

TwitterのプロフィールページのURLが必要になるので、アカウント名が入ったURLを用意しておきましょう。

プロフィールページの見方は、トップページから右上のプロフィール画像をクリックしてメニューを開き、その中から「プロフィール」を選択します。

もしくは、@の後ろにアカウント名の記載があるので、@以下(例:miolalaclip)をhttps://twitter.com/アカウント名に当てはめてコピーしておいてもいいでしょう。

②設定とプライバシー

自分のアカウントにログインをしたら、右上にあるプロフィールアイコンをクリックしてメニューを開きます。

メニューの中から「設定とプライバシー」を選んでクリックしましょう。

③ウィジェットの新規作成

設定メニューの中から「ウィジェット」を選び、ウィジェットページの右上にある新規作成ボタンをクリック。その中から「プロフィール」を選択しましょう。

④プロフィールURLの入力と設定

最初に用意しておいたプロフィールページのURL[https://twitter.com/アカウント名]を入力して、右の矢印をクリック、またはエンターボタンを押します。

ディスプレイ(表示)オプションでは、「Embedded Timeline」を選びましょう。

プロフィールタイムラインのコードが表示されますが、コードをコピーする前に表示のカスタマイズを行いましょう。

「set customization options」の部分をクリックします。

カスタマイズでは、表示されるタイムラインの高さと幅、デザイン、リンクの色、言語を選ぶことができます。

  • Height(高さ)・・・設定しないとツイート全部が表示されてしまい見づらいので、タイムラインを設置したい場所の高さに合わせると良いです
  • Width(幅)・・・幅は入力しなくても自動的にちょうどいいサイズに合わせられます
  • デザイン・・・背景色を明るい(Light)と暗い(Dark)から好きな方を選べます
  • リンク色・・・ハッシュタグ(#)などのリンクの色が選べます
  • 言語・・・デフォルトのAutomatic(自動)で問題ありません

設定したら[Update]ボタンを押しましょう。

再び画面が切り替わり、コードが書き換えられたので、プレビューを確認したら[CopyCode]ボタンをクリックします。

この画面が出ればコピー完了です!

⑤ワードプレスに貼り付け

公式サイトでコピーしたものを、ツイッターのタイムラインを表示させたいワードプレスのページ、もしくはウィジェットに貼り付けます。

貼り付ける際は、必ずタブを「テキスト」モードにします。「ビジュアル」の編集モードだとエラーが起きてしまうので注意。

プレビュー画面で確認して、正しく表示されていればOKです。表示されない場合、コードが正しくコピペされていない可能性があるので、一度全て消してコピペし直しましょう。

カスタマイズ例①

高さ:800 / 幅:600 / デザイン:Light / リンク色:グリーン / 言語:Automaticの場合

カスタマイズ例②

高さ:500 / 幅:500 / デザイン:Dark / リンク色:オレンジ / 言語:Automaticの場合

各投稿(ツイート)を埋め込む方法

続いて、タイムライン全体ではなく、各投稿を記事内に埋め込む方法です。上のような表示で、こちらはコピペ10秒で簡単にできますよ。

①埋め込みたい写真を選ぶ

プロフィールページ、またはタイムラインからワードプレスサイトやブログに埋め込みたい投稿を探します。

投稿の右上のメニューの中から「ツイートをサイトに埋め込む」をクリック。

②埋め込みコードをコピー

投稿の埋め込みコードを全て選択して、手動でコピーします。

マウスの右クリックのコピー、もしくはキーボードでWindowsなら[Control + c]、Macなら[Command + c]でコピーができます。

③表示させたいページにコードを貼り付け

表示させたいページを必ずテキストモードのタブに切り替えてから、コードを貼り付けます。

マウスの右クリックの貼り付け(ペースト)、もしくはキーボードでWindowsなら[Control + v]、Macなら[Command + v]で貼り付けができます。

貼り付けたら、プレビュー画面でちゃんと表示されているか確認しましょう。

スポンサードリンク

まとめ

以上、今回はTwitterのタイムラインと投稿をワードプレスに埋め込む方法をご紹介しました。

タイムラインも投稿の埋め込みもTwitterならプラグイン不要で手順通りにすればとっても簡単!3分もあれば完了します。ぜひワードプレスと連携させてみてください。参考にどうぞ!

 

ホームページ作成サポート

ホームページを作って、サービスの宣伝・集客をしたいけど・・・

「ウェブがとにかく苦手」
「一人でできる気がしない」

「大人数の講座でついていけない」
「業者に頼むほど予算に余裕がない」

こんな悩みを抱えていませんか?

ララクリップのサービスは
フリーランスに特化したホームページ制作

会社のように、ホームページ制作費や、広告・宣伝費に数十万円も数百万円もかけられない・・・。そんなフリーランスの方にターゲットを絞ってサービスを展開しています。

\他社に負けない5つの魅力/

ワードプレス講座付き
3ヶ月間で制作&カスタマイズレクチャー
作成後の運営アドバイスあり
個人経営ならではの低価格
嬉しい16もの特典付き

\今だけモニター価格/
3ヶ月パックで15万円