Cocoonフォーラムで質問があったツイッターカードタイプをプレーヤーでポストする方法
ちょっとこの方法に興味が湧き自分でも色々試してみたのでその結果を記事にしておきます
この記事はテーマにCocoonを使っている前提で書いていますのでその点はご了承ください
インストールと設定
まずプレーヤーカード用のメタタグを挿入しないといけないので
メタタグを挿入するためにプラグインを使います
プラグイン検索をすると色々出てきますが今回は以下の物を使用します
インストール 有効化をすると設定の項目に追加されます
このプラグインは英語表記なので分かり辛い所もあると思いますが
日本語に翻訳などを使えばある程度の意味は分かると思います
meta tag manager
全体的な設定は上の項でも書きましたが設定の中にありますのでそこでします
＋ Add Meta Tagを押すとこの様になるので必要なものを追加していきます
Where to display this tagの部分で投稿ポストタイプやタクソノミー等を選ぶことが出来ます
全体的な設定が必要ない場合はここで設定する必要はないかもしれません
その場合は追加するメタタグの部分を見て設定してくださいね
Cocoonの設定
ツイッターカードのテストをした感じは重複していてもCocoonの設定が優先されている感じでした
なのでカードタイプを変更したい場合は ツイッターカードタグの挿入をオフにする必要があります
オフにしたらキャッシュを削除してページのソースを見て
Cocoonが出力するツイッターカードのメタタグがないことを確認しましょう
＜ !-- Twitter Card -- ＞
｜
この部分
｜
＜!-- /Twitter Card -- ＞ 確認する際高速化内にあるHTMLを縮小化はオフにしておきましょう
追加するメタタグ
Meta Tag Managerを導入すると各記事編集画面にもメタタグを追加する項目が追加されます
プレーヤータイプのツイッターカードでポストをしたい記事のメタタグ項目を追加します
最低限これだけは必須項目になります
ツイッターカードがプレーヤータイプですよーと指定する部分なのでplayer
・twitter:title
ここは記事のタイトルで良いと思います
・twitter:site
ツイッターIDか自分のツイッターホームへのアドレス
注意：ID、アドレス共に頭にアットマークが必要みたいです
・twitter:player:width
プレーヤーの埋め込み用の幅数値
・twitter:player:height
プレーヤーの埋め込み用の高さ数値
・twitter:player
埋め込み用のアドレス
width、height、playerの部分は動画などの通常アドレスではなく
埋め込み用のアドレスじゃないと接続が拒否されプレーヤーが表示されなかったので注意です
例：Youtubeの場合はシェアで埋め込み用があるのでそのアドレス(embedが付いているもの)
ソースを確認した時の表示はこんな感じで挿入されています
Cocoonのメタタグから変更した際の注意点
プラグインの機能を全て確認した訳ではないので憶測になってしまうのはご了承ください
Cocoonに標準で付いているツイッターカード設定は万能で
各ページ、投稿記事によってタイトルやアイキャッチなどが変更されるように設計されています
しかしその機能をオフにするので、投稿毎に自分で設定する必要があると思われます
固定ページなどは全体設定でしておけば大丈夫なのかな？と思いますが
如何せんプレーヤータイプで表示されるかなーと試した記事しか分かりません
そういう訳でこの機能を使う場合は各自こうなるんだという事を理解した上で使ってください
投稿毎に変更できるというのは便利な部分もありそうなんですけどね
設定されているか確認
設定が終わったら以下のサイトでカードが変わっているか、どのように表示されるかを確認しましょう
このように表示されていればプレーヤータイプとして認識されています
メタタグにイメージを追加すれば大きい画像でポストされる！？
おわり
ちょっと興味が出て調べて試してみたけど、こんなにメタタグが必要なのかと思いました
結構面倒なんですね…
OGP設定があるテーマを使用している人に限定されますが
特に変更したりせず投稿毎に記事にあったものがポストされる機能をオフにするので
毎回自分で追加することになります
それが面倒だと感じる人には向かない方法ですね
PHPをカスタマイズ出来る人は上手いこと設定出来るんでしょうけど…
万人向けな記事ではないですが、もし参考になった人が居たら幸いです
[share]
