Twitterの検索キーワードで埋め込みTLを表示する方法 | コピペから応用へ!

Twitterの検索キーワードで埋め込みTLを表示する方法

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

5/8の朝に上げた記事の新着ツイートが、公式サイトのTwitter埋め込みに表示されてました。最初は、公式がRTしてるやったーと喜んでましたが、実はRTされて無かったんだよね。

サイトの内容を良く見ると、「みなさんが「能登島」をつぶやかれています。」と書いてあったんだよね。で、埋め込まれたツイートが全部「能登島」のキーワードが入っているので、どうやら検索ワードで埋め込みができるみたいだ。

こんな風に「能登島」でつぶやいたツイートが表示されます。

なので、Twitterの特定キーワードだけのタイムラインをブログに埋め込む方法について書いていきます。

検索キーワードでTwitterを埋め込む方法

何気なく、Twitterで埋め込む方法についてつぶやいた。

すると、フォロワーさんからやり方を紹介してもらった。

ふむふむ、Twitterタイムラインウィジェットを作成すると良いらしい。

紹介してもらった元の記事がこちらです。

3分で終わる!Twitterのタイムラインウィジェットをブログに設定する手順~3ステップ~
Twitterのタイムラインウィジェットをブログに設置することで、1クリックでブログ訪問者とTwitter上でも繋がることができます。今回の記事では、この「タイムラインウィジェット」をブログに設置する手順を3つにまとめて解説しています。

基本、こちらのサイトで書いてるやり方でできるんだけど、Twitterのホーム画面(PC)からウィジェット作成する方法について説明します。

Twitterホーム画面からウィジェット作成方法

Twitterホーム画面の右上にある「自分」のアイコンを選択。

すると、吹き出しメニューが出るので「設定とプライバシー」を選択。

左メニューにある項目「ウィジェット」を選択。

ウィジェットの「新規作成」を選択。

また、吹き出しメニューが出るので「検索」を選択。

表示したい検索キーワードを入力して、「ウィジェット作成」ボタンを選択。

ウィジェットが作成され、緑色で囲んでいる中に埋め込みコードが表示します。

その、埋め込みコードをブログのウィジェットやブログパーツなどに張り付ければ、特定キーワードのTwitterを表示させることができます。

表示確認ように作ったページです。

Twitter埋め込みのヘッダーを消す方法

埋め込みの上に「Tweets about coronblog」と出るのでメッセージを削除する方法です。メッセージを変更したかったのですが、やり方が分からなかったので表示させない方法で説明します。(メッセージを変えたい場合は、埋め込みコードの手前にヘッダータグなどで自分で追加する形になります)

<a class="twitter-timeline" href="https://twitter.com/search?q=coronblog" data-widget-id="861530968489811968" data-chrome="noheader">てすとツイート</a>

ツイッター埋め込みコードの「a class」に「data-chrome=”noheader”」を追加します。

ヘッダーが表示されなくなりました。

次に、見出しを付け加えます(一例ですのでタグの種類は各自で調整してください)

<h2>ツイッター埋め込みワード サンプル </h2>
<a class="twitter-timeline" href="https://twitter.com/search?q=coronblog" data-widget-id="861530968489811968" data-chrome="noheader">てすとツイート</a>

埋め込みツイートに見出しが表示されました。

Twitter埋め込みで非表示にできるタグの種類

「data-chrome=”noheader”」の「noheader」を変えることでフッターなどの要素も非表示にできます。

noheaderヘッダー非表示
nofooterフッター非表示
nobordersボーダー非表示
transparent背景透過
noscrollbarスクロールバー非表示

「transparent」は背景透過なので、ブログのコンテンツ内の背景を指定している場合は、Twitterのタイムラインにもブログの背景が表示されます。

複数組み合わせたいときはこう使います。

<a class="twitter-timeline" href="https://twitter.com/search?q=coronblog" data-widget-id="861530968489811968" data-chrome="noheader nofooter">てすとツイート</a>

noheader nofooter」タグの間に半角スペース「 」を入れます。スペース無しでも有効になりますが、半角スペースで区切ったほうが見やすいかと思います。

まとめ

実は、このブログも僕がつぶやいたツイートを埋め込んでるのですが、まったく同じやり方で埋め込んでて、その時「検索」について意識してなかったので気づきませんでした(笑)

検索ワードの埋め込みは、観光地の名所や特定商品の口コミなどのツイートを表示させるのに使えそうですね。
では^^

このブログはレンタルサーバーmixhost
運営してます。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする