売れるHPとデザインと。

初心者でも簡単にできるTwitterタイムラインの埋め込み方

更新 :

ホームページやブログを運用していると、特定の箇所にTwitterのタイムラインを埋め込みたいケースがしばしばあります。

ここでは初心者でも簡単に埋め込み作業ができるよう、タイムラインの種類と、設定および設置方法を解説します。

 

Twitterタイムラインの種類

Twitterタイムラインには4つの種類があります。

  1. ユーザータイムライン
  2. お気に入りタイムライン
  3. リストタイムライン
  4. 検索とハッシュタグ

それぞれ特徴的な機能を持っているので目的に合わせて選ぶことが重要です。

1.ユーザータイムライン



多くのホームページで見かけるタイプです。当サイトでも同様のものをフッターに設定しています。基本的にはツイートした内容がそのまま表示されます。

 icon-lightbulb-o 活用例
Wordpressでホームページを運用している場合、記事を投稿した時点で自動的にTwitterへも投稿してくれる機能と連動させると、ホームページの更新情報としても使えます。

2.お気に入りタイムライン



こちらはツイートのお気に入りを表示するタイプです。自身のTwitterのタイムライン上に流れてくるツイートをお気に入りするとそのツイートが埋め込みタイムラインにも反映されます。

 icon-lightbulb-o 活用例
例えば自サイトでとくにおすすめしたい記事のツイートをお気に入りに入れたり、読者にとって有益な情報(業界情報やニュースなど)をお気に入りすることで、ホームページのホットトピックス(おすすめ情報)としても使えます。

3.リストタイムライン


こちらはツイートのリストを表示するタイプです。ツイッターにはある特定のユーザーだけのタイムラインを作ることができ「親しい友人」、「知人」、「直接の接点はない人」などといった分け方が可能です。

 icon-lightbulb-o 活用例
複数のサービスを運用している場合にこのリスト機能を活用して「サービスAの感想」、「サービスBの感想」などと自社に対するネット上の声をリストに分けて表示させることが可能です。

4.検索とハッシュタグ



こちらは検索とハッシュタグを表示させるタイプです。対象となるツイートは全ツイッターアカウントで、「キーワード」をあらかじめ指定しておき、そのキーワードが使われたツイートがされると連動して表示されるようになります。またハッシュタグと呼ばれる「#」からはじまるタグ付けされたツイートも設定することができます。

 icon-lightbulb-o 活用例
自社でハッシュタグを使ったプロモーションを行う際に、ハッシュタグリストを設置するとライブ感を演出することができます。

タイムラインの設定方法

続いて実際の設置方法です。こちらの設定ページから直接作成することもできますが、基本的にはTwitterの管理画面にログインし、自身のアイコンをクリックすると表示される「設定」から進んでいきます。

執事(古越 幸太) aatoku さん Twitter

 

「設定」に進むと下図のメニューが表示されます。

設定画面「ウィジェット」

 

一番下にある「ウィジェット」をクリックすると、以下の画面が表示されます。

ウィジェットの新規作成

 

「新規作成」から作成画面に進みます。

ウィジェットの細かな設定

 

続いて各設定項目を見ていきましょう。

 icon-check-square-o ユーザータイムラインの設定項目

ウィジェットの設定項目

 icon-check-square-o ユーザー名

ホームページに埋め込みたいTwitterアカウントの「@」マークをはずしたユーザー名を入力します。

タイムラインの種類を「リスト」にしている場合はユーザー名の代わりにあらかじめツイッターの設定画面で作成されたリストを選ぶ形になり、タイムラインの種類で「検索」を指定した場合はユーザー名の代わりに「検索クエリ」となって検索したいキーワードやハッシュタグを入力する形になります。
 icon-check-square-o オプション取引

「@ツイートは除外する」はリプライなどの会話も含めて埋め込むか、純粋な自身のツイートのみを埋め込むかの設定です。「画像を自動的に開く」にチェックをすると埋め込みタイムライン上で自動的に画像が表示されるようになり、チェックを外すと画像は表示されず「画像を見る」といった文字に置き換わります。

タイムラインの種類で「検索」を選んだ場合は、「トップツイートのみを表示する」「セーフサーチ」の2つのチェック項目も加わります。トップツイートのみを表示するにチェックを入れると、Twitterが独自のアルゴリズムで分析した人気のあるツイートのみが表示されるます。また、「セーフサーチ」にチェックを入れると、不適切なコンテンツや冒涜的なコンテンツを除くことができます。
 icon-check-square-o 高さ

タイムラインの高さをピクセルで指定する箇所です。なにも設定しなければ標準の600ピクセルになります。ホームページのデザインに合わせて設定してください。

 icon-check-square-o テーマ

タイムラインの色合いを「明るい」、「暗い」の2種類で指定することができます。「暗い」を指定すると以下のようなデザインに変わります。

タイムラインをダークに

こちらもご自身のホームページのデザインの色合いに合わせて変えてください。

 icon-check-square-o リンクの色

ツイートの中に含まれるリンクの色を指定する項目です。

 

ツイッタータイムラインのリンクの色を変更

 

予め用意された色から選ぶことも、「#」から続く入力欄にRGB値と言われる数字を入力して直接色を指定することもできます。

 icon-check-square-o カスタマイズ機能を無効にする

この項目は少しわかりづらいのですがチェックをOFFのままにしておくと、まれにまったく関係のないツイートが含まれてしまう場合があります。今回の趣旨でタイムラインをホームページ上に埋め込む際にはONにしておいたほうが無難でしょう。

タイムラインの設置方法

ウィジェットの設定

設定が終わったら「変更を保存」ボタンを押します。プレビュー画面の下に貼り付け用のコードが表示されるので、コピーしてホームページの好きな箇所に貼りつけることで設置完了です。

ブログなどに貼り付ける場合は、HTMLなどのコードを入力する欄から貼り付けましょう。

まとめ

ホームページのアクセスアップにはTwitterなどに代表されるSNSとの連動は欠かせません。ただ設置するだけでなく、ホームページを更新したらツイッターにもそのお知らせを流す。あるいはホームページに対する反響をもらったらコミュニケーションを取る。そうした日々の活用とセットではじめて設置した効果が活きてきます。

設置自体はほんの5分程度でできる作業なので、ぜひ上記手順を参考にあなたのホームページにベストなかたちで設置してみてください。

アバター画像

古越 幸太

「もともと何されてたんですか?」→「公務員保育士です」で、初対面の方でも5分は話せるのですが、次に続く鉄板の雑談ネタがないのがここ10年来の悩みです。

記事一覧はこちら

  • BLOG

ninoya inc.のお知らせ

この記事はいかがでしたか?

いいね!と思ったらボタンを何度でもタップ!いいね数はライターに届きます。

515LIKES

LIKE

ライターへ感想を送るライターへ感想を送る

Share

Follow on SNS

SNSとメルマガでninoyaの最新情報を配信中

メルマガ登録

メルマガ登録

週1回&酒と泪と女と女更新時にメルマガをお届けしています。

pagetop