Nuxt.jsを使ってtwitter cardを設定する際につまったところ

この度MRouletteをアップデートしました!!

  • ルーレットにタイトルをつけられるようになった
  • 選ばれたものを自動で消せるようになった
  • 結果がツイートできるようになった
  • OGPが設定された

 

このアップデートを行う中で詰まったところ、解決策を書いておきたいと思います

 

Modal Window(v-showで表示管理)しているところにtwitter buttonが表示されない

タイトル通りなのですが MRouletteでは結果の表示をv-showで管理しており その表示画面の中にTwitterボタンを埋め込むと表示されない現象が起きました。

 

色々調べていた時に こちら を発見し、同じことがv-showでも起きるのではないかと思いました(想像)

 

そこで仕方なくTwitter公式ボタンは諦めて自分で作ったボタンを設置することにしました。

(もしかしたら携帯では表示されるかも iphoneのみ表示確認済み)

 

nuxt.config.jsに書いてるはずのog設定がうまく反映されない

og:image で設定しているはずなのにTwitterカードなどに表示されない・・

  • content=画像へのパスは 相対パスではなく絶対パス
  • 画像はstatic直下に置くと   サイトインデックスのurl/ogImage.png でアクセスできる

こちらに気をつけると無事表示されました

 

ルーレットの結果をTwitter投稿したい・・

ルーレットの結果データをTwitter投稿画面に渡す必要があったのですが よく検索で出てくるのは <a>タグの中に色々書いていくものでこれではjsのデータを渡せなかったので結構調べてると こちらを見つけて解決しました。

 

v-on:click=”createTwitterData” とかをTwitterボタンに設定して

createTwitterData(){
渡したい内容

window.open

}

 

という感じにすれば行けました

 

 

機能を追加するとその追加に対するデザインも変更しないといけなかったりとかで結構大変ですね・・・