MAGAZINE

Twitter
Facebook

投稿毎にTwitterウィジェットを埋め込む

ある案件で、ブログ記事ごとに関係者のTwitterウィジェットを表示したいとのこと
ただし、Twitterウィジェットを縦に並べるのは、野暮ったいので簡単にできるように思案しました。

概要

  • 投稿記事にカスタムフィールドを繰り返しフィールドで設置
  • 設置したカスタムフィールドにTwitterアカウントを記入
  • 記入したアカウントの数だけウィジェットを生成する

工程

  • npmのvue-tweet-embedを使用
  • Vue.jsのコンポーネントを作成する
  • webpack4でコンパイル

npmでvue-tweet-embedを追加

カスタムフィールドを設定

.vueファイルを作成

.jsファイルに記入

表示先phpに描画用に記入

上記内容をwebpackを使ってバンドルすることで描画されます。

完成品イメージは下記です。

あとはお好みでCSSで横並びなどにするだけです。