mixiチェックボタンにOGPが反映されなかった原因と解決法

iPad3を買いました。 電子書籍とかPDFを突っ込んだり、 これまでに買った映画を突っ込んでみたりして楽しいおうち生活を送ってます。

mixiチェックボタン

今回はmixiチェックボタンでつまずいたので、 その原因と解決法をメモしておきます。
mixiにはソーシャルボタンが2つ用意しており、 『mixiいいね』と『mixiチェック』があります。

mixiいいねボタンもmixiチェックボタンもこちらよりパートナー登録することによりキーが発行され作成できるようになります。

mixiいいねは設置するURLを登録した時にHTMLを発行してくれるのですが、 mixiチェックはこちらの技術仕様を見ながら作成することになります。

設置方法は仕様書にあるように簡単(?)です


  mixiチェック
  

href、class、data-key、data-url属性は必須です。 mixiチェックボタンを押すとこんな感じで表示されます。

mixiチェックボタン ポップアップ画面例

mixicheck

OGPや特定のメタタグを指定しておくことでここに表示する画像や説明文を指定することができます。
で、早速設置してみました…

…なぜかOGPが反映されなかった

始めは反映されるのに時間がかかるんだろうなー
とかと思っていたのですが、
しばらく待っても変わらなかったので、
原因を探るために見なおしてみました。

ボタンはbasic認証をかけたテスト環境で設置しました。
data-urlには本番環境のURLを指定。
OGPにてサムネイルを指定。
パートナーの設定画面にてテスト用のサイトも予め許可しておく。

まずはBasic認証を外してみました

Basic認証がかかっているのでfacebookのイイネボタンのようにクローラーがアクセスできなくて表示されていないのかと思い、
Basic認証を外してみましたが、解決には至らず…
これが原因ではありませんでした。

原因はdata-urlでした

原因はdata-urlでした。data-urlを入力すると上記画像の④の部分に指定したURLが入力されます。


僕はてっきりチェックボタンを押した瞬間に押したサイトのOGPなどを取得してポップアップに反映させているのかと思っていたのですが、
そうではなくて、押した時にここで指定したURLを見に行くみたいです。
なので、いくらテスト環境で試した所でサムネイルの指定や説明文が反映されなかったわけですね。

というわけで本番のURLへOGPを突っ込むことでポップアップにも反映させることができました