Twitterの特定ハッシュタグが付いたツイートを埋め込む方法

どうも、ぽこみち(@pokomichi_apple)です。

前回はWordPressにTwitterを埋め込む方法をご紹介しましたが、今回は特定のハッシュタグでのツイート一覧を埋め込む方法をご紹介します。

WordPressにTwitterを埋め込む基本的な方法やこのブログ(ぽこみブログ)の様に吹き出しの付いた埋め込みをしたい場合は前回のブログを参考にしてください。

▶️  WordPressにTwitterをウィジェットで埋め込む方法

 

ハッシュタグの埋め込みコードを取得

今回もTwitterから埋め込みコードを取得します。

※パソコンでの実施が楽なのでオススメです。

右上のプロフィールアイコンをクリックして表示される、「設定とプライバシー」をクリックします。

 

次に、左にあるメニュー一覧の「ウィジェット」をクリックします。

 

表示されたウィジェットの新規作成をクリックして、「検索」をクリックします。

 

表示されたページの「検索クエリ」に表示させたい特定ハッシュタグ(今回は#はたごちりめん山椒)を入力して、「ウィジェットを作成」をクリックします。

※今回は高さなどの細かい設定はしてません。

 

プレビューの下に埋め込みコードが表示されますので、こちらを埋め込んで完了です。

《埋め込み例》

《埋め込みコード》

<a class="twitter-timeline" href="https://twitter.com/hashtag/%E3%81%AF%E3%81%9F%E3%81%94%E3%81%A1%E3%82%8A%E3%82%81%E3%82%93%E5%B1%B1%E6%A4%92" data-widget-id="928164586947088384">#はたごちりめん山椒 のツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

 

埋め込みコードの編集

埋め込みコードに少し追記して、表示内容を変更する方法を少しご紹介します。

width="●" ウィジェットの幅を指定します(180px~520px)。
高さ height="●" ウィジェットの高さを指定します(200px~)。
表示ツイートの固定 data-tweet-limit="●" 表示するツイートの数を指定します。1~20の間で指定できます。
テーマ data-theme="dark" 暗いテーマにします。
data-theme="light" 明るいテーマにします。
リンクの色 data-link-color="●" ツイート内のリンクの色を指定します。
ボーダーの色 data-border-color="●" ウィジェットを囲むボーダーと、ツイートを区切るボーダーの色を指定します。
その他 data-chrome="noheader" タイムラインのヘッダーをなくします。
data-chrome="nofooter" タイムラインのフッターをなくします。
data-chrome="noborders" ツイート間の境界線(ボーダー)をなくします。
data-chrome="noscrollbar" タイムラインのスクロールバー表示をなくします。
data-chrome="transparent" タイムラインの背景を透明にします。

 

※その他を複数指定する場合は、data-chrome="noheader nofooter"のように記載してください。

 


以下のコードで埋め込んでみました。

<a class="twitter-timeline" href="https://twitter.com/hashtag/%E3%81%AF%E3%81%9F%E3%81%94%E3%81%A1%E3%82%8A%E3%82%81%E3%82%93%E5%B1%B1%E6%A4%92" data-widget-id="928164586947088384" data-tweet-limit="3" data-theme="dark" data-chrome="noheader nofooter" data-border-color="#fff">#はたごちりめん山椒 のツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

自分好みに編集したTwitterを埋め込んでみてくださいね。

ぽこみちの提供メニュー


・webの気になることを無料で調べてブログにします。
※お気軽にご質問ください。

・2時間密着webサポート
20,000円(税別・交通費別)

・藍染、茜染ワークショップ依頼
藍染代実費のみ/交通費・宿泊費別
※基本料金はかかりませんが、参加者5名が条件となります。
染物について詳しくはこちらよりご確認ください
お問い合わせは下記SNSからお気軽にどうぞ。


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