SNS

Twitterの「ツイートを埋め込む」で元ツイートを表示させない方法

短いつぶやきを簡単に投稿できるTwitter(ツイッター)

ときには誰かのツイートをブログ等で引用したいこともある。

そんなときに使うのが「ツイートを埋め込む」の機能。

しかしいざツイートを貼り付けようとすると、引用したいツイートの他に元ツイートが一緒に表示されてしまう

特定のツイートだけ表示したいときに余計なツイートまで見せてしまっては見栄えが悪い。

なんとかして表示させない方法はないか。

今回はそんな「Twitterの「ツイートを埋め込む」で元ツイートを表示させない方法」ついて解説する。

この記事を書いている人


ITエンジニアをする傍らIT系雑記ブログ「ITips」を書き溜めているブロガー。「ITips」は1年半くらい継続しており、収益は月に2000~4000円程に成長。有益な記事を提供しつつ自分の懐も潤う状況を目指して勉強中。Twitterアカウントの運用も試行錯誤しながら行っており、ツイートインプレッションは2020年12月に45万まで到達している。

記事を読むメリット

Twitterの「ツイートを埋め込む」で元ツイートを表示させない方法がわかる

 

Twitterの「ツイートを埋め込む」とは

 

Twitterの「ツイートを埋め込む」とは、ツイートをブログやWEBサイトのような「Twitterの外部に埋め込む」為の機能

 

step
1
右上の「・・・」ボタンを押す

 

step
2
「ツイートを埋め込む」をクリックする

 

step
3
「Copy Code」をクリックしてツイート用のHTMLタグをコピーする

 

step
4
HTMLとして自分のサイトに貼り付ける

WordPressの場合はテキストエディタモードで貼り付ける

WordPress HTMLコピペ

 

すると以下のようにツイートを貼り付けることができる。

 

しかし見ての通りツイートが2つ表示されてしまっている

これは「ツイートを埋め込む」で選んだツイートが、リプライ(返信)のツイートであった場合に、元のツイートまで表示してしまう為。

ではこの元ツイートを表示しない方法はあるのだろうか。

 

元ツイートを表示させない方法

 

元ツイートを表示させない方法はある。

それは「Hide Conversation(会話を非表示)」を使う方法だ。

ウェブサイトやブログにツイートを埋め込む方法

4.そのツイートが別のツイートへの返信である場合は、[Hide Conversation(会話を非表示)] をチェックして元のツイートを非表示にできます。

参考:ウェブサイトやブログにツイートを埋め込む方法

 

やり方としてはステップ3で紹介した【「Copy Code」をクリックしてツイート用のHTMLタグをコピーする】の前に以下の操作を行う。

step
2.1
「set customization options」をクリック

 

step
2.2
「Hide Conversation」にチェックを入れてUpdate

「Hide Conversation」とは「会話を隠す」ということで、元ツイートを表示しない意味になる。

 

step
3
「Copy Code」をクリックしてツイート用のHTMLタグをコピーする

するとチェックを入れる前とHTMLコードが変わって、元ツイートが入っていないHTMLコードになっているので、コピーして貼り付ける。

 

すると以下のような表示になる。

 

HTMLとしての違い

 

HTMLコードのどこが変えたことで元ツイートが消えたのか。

 

違いを見てみると、元ツイートありの場合のblockquoteタグの開始がコレ。

 html
<blockquote class="twitter-tweet">

元ツイート無しの場合のblockquoteタグの開始がコレ。

 html
<blockquote class="twitter-tweet" data-conversation="none">

 

違いとして 「data-conversation="none"」が追加されている。

なので「Hide Conversation」にチェックを入れなくても、直接「data-conversation="none"」を追加して元ツイートを表示させなくすることもできる。

 

まとめ

 

今回はTwitterの「ツイートを埋め込む」で元ツイートを表示させない方法について紹介した。

やり方は2種類。

元ツイートを表示させない方法

  • 「ツイートを埋め込む」を選択した後で「set customization options」で「Hide Conversation」にチェックを入れる
  • コピーしたHTMLコードに「data-conversation="none"」を追加する

 

 

他にもTwitterに関する記事があるので、よければ参考にして欲しい。

 

 

にほんブログ村 IT技術ブログ SEO・SEMへ
  • この記事を書いた人

KRSW

ITエンジニア兼ブロガー。 SEOは有名ブロガーやインフルエンサーの発信内容を読み、理解した内容を自分なりの解釈で書いています。 Twitterでも活動中。 よかったらフォローお願いします。 (,,゚Д゚)ノ

-SNS
-

Translate »

© 2024 SEO初心者の学び舎