WordPressでTwitterのツイートの引用、埋め込みなどの使い方

昨日の人気記事
古戦場で攻撃隊長や防衛隊長のアビリティの使い方や発動方法
最近グラブルが重いので高速化出来ないか検討してみる
武器スキルやLBのクリティカルについて発生率や上昇率を理解しよう。
2018.09.10

Twitterの引用をしたい時に、ちょっと書き方に悩んだので似たような悩みを持つ方へご紹介。kekekeです。こんにちは

いいツイートや、紹介したいツイートなど色々あると思いますが、それらを引用する際にちょこっと見せ方を変えたい時の書き方を試してみようと思います。

 

Twitterからの単体ツイートの引用

ツイッターの標準機能のツイートをサイトに埋め込むだとこんな感じ

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">うさまる11リリースしました！<br>今回は夏夏夏〜🏝なスタンプです🍉<br>ぜひぜひたくさん使ってください✨<a href="https://t.co/VBTiTY5jFy">https://t.co/VBTiTY5jFy</a> <a href="https://t.co/pJYjgM0F1b">pic.twitter.com/pJYjgM0F1b</a></p>&mdash; sakumaru＠うさまるといっしょ (@skmr_29) <a href="https://twitter.com/skmr_29/status/1013983986224283648?ref_src=twsrc%5Etfw">2018年7月3日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

メディア(画像等)を含めない場合はこのような表示。

<blockquote class="twitter-tweet" data-cards="hidden" data-lang="ja"><p lang="ja" dir="ltr">うさまる11リリースしました！<br>今回は夏夏夏〜🏝なスタンプです🍉<br>ぜひぜひたくさん使ってください✨<a href="https://t.co/VBTiTY5jFy">https://t.co/VBTiTY5jFy</a> <a href="https://t.co/pJYjgM0F1b">pic.twitter.com/pJYjgM0F1b</a></p>&mdash; sakumaru＠うさまるといっしょ (@skmr_29) <a href="https://twitter.com/skmr_29/status/1013983986224283648?ref_src=twsrc%5Etfw">2018年7月3日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

Twitterのリプライのツイートの引用元も含める

ツイッターの標準機能で埋め込むとこんな感じ

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">リリースおめでとうございますヽ(・∞・)ノ<br>遊び心満載で、リストを見てるだけでもクスっとしてしまいます(・∞・)笑<br>たくさん使わせていただきますヽ(・∞・)ノ<br><br>わっしょいヽ(・∞・)ノわっしょい <a href="https://t.co/jsAvgH8fon">pic.twitter.com/jsAvgH8fon</a></p>&mdash; Noir@さくまらー (@FromNoir) <a href="https://twitter.com/FromNoir/status/1014065695829602304?ref_src=twsrc%5Etfw">2018年7月3日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ツイッターの引用元を含めないパターン

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">リリースおめでとうございますヽ(・∞・)ノ<br>遊び心満載で、リストを見てるだけでもクスっとしてしまいます(・∞・)笑<br>たくさん使わせていただきますヽ(・∞・)ノ<br><br>わっしょいヽ(・∞・)ノわっしょい <a href="https://t.co/jsAvgH8fon">pic.twitter.com/jsAvgH8fon</a></p>&mdash; Noir@さくまらー (@FromNoir) <a href="https://twitter.com/FromNoir/status/1014065695829602304?ref_src=twsrc%5Etfw">2018年7月3日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ツイッターのリプライ、引用元引っ張ってかつ、メディアは表示させないパターン。どうやらデフォルトで利用できるものだと引用元のメディアは使われるようだ。

<blockquote class="twitter-tweet" data-cards="hidden" data-lang="ja"><p lang="ja" dir="ltr">リリースおめでとうございますヽ(・∞・)ノ<br>遊び心満載で、リストを見てるだけでもクスっとしてしまいます(・∞・)笑<br>たくさん使わせていただきますヽ(・∞・)ノ<br><br>わっしょいヽ(・∞・)ノわっしょい <a href="https://t.co/jsAvgH8fon">pic.twitter.com/jsAvgH8fon</a></p>&mdash; Noir@さくまらー (@FromNoir) <a href="https://twitter.com/FromNoir/status/1014065695829602304?ref_src=twsrc%5Etfw">2018年7月3日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

Twitterの引用を多数利用するならjavascriptを宣言しておく

bodyの前に以下のスクリプトを埋め込めば都度宣言する必要はない

<script id="twitter-wjs" type="text/javascript" async defer src="//platform.twitter.com/widgets.js"></script>

 

TwitterカードのCSSを変更する場合

大本はこんな感じでblockquote.twitter-tweetを上書き追記すれば色々できそう。

blockquote.twitter-tweet {
  display: inline-block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 10px 5px;
  padding: 0 16px 16px 16px;
  max-width: 468px;
}

blockquote.twitter-tweet p {
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}

blockquote.twitter-tweet a {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
  outline: 0 none;
}

blockquote.twitter-tweet a:hover,
blockquote.twitter-tweet a:focus {
  text-decoration: underline;
}

 

Twitterのサイトレベルのテーマオプションを定義する

metaに書き込んであげれば特に何もしなくても反映されるようだ。

<meta name="twitter:widgets:theme" content="light">
<meta name="twitter:widgets:link-color" content="#55acee">
<meta name="twitter:widgets:border-color" content="#55acee">

 

 

まとめ

ツイートの埋め込みでも色々と方法があり、いじってみるのは楽しそう。

この辺りの設定もCMSならプラグインを探せばGUI化されてるのもあるだろう。

ある程度設定を作ったらショートコード化してしまえばいいよってTwitterDevelopperサイトには書いてあったけど、そう思うならTwitterが作成してくれたらいいのに。

でもデフォルトで十分なら特に何もしなくても良いだろう。
ちょっと気になったのがAMP向けページはまた別の処理が必要そう。軽量化を目指すなら勉強しないといけないかも。

おしまい。

タイトルとURLをコピーしました