いいね!g+1ボタン設置で確認する事

LINEで送る
Pocket

最近、facebookのいいね!ボタンとか、google+の+1ボタンとかいろいろ登場しているので情報共有にとっても役だっていますが、このいいね!ボタンとかg+1ボタンとか配置する時に案外いろいろめんどくさい事があったりして思ったように機能してくれなかったりします。
もっとタグを貼るだけで簡単ポンで動けばいいのに・・・と思わずにいられません。

これらのボタンのいいところは、コンテンツを「いいね!」してくれた人がいると、その人とつながっている人々に「いいね!」された事が伝わるという事。その際に「いいね!」したコンテンツは「こんなタイトルで、こんな概要でこんな画像」という情報も一緒に紹介してもらえるということ。

で、問題なのはただボタンを付けても「いいね!」した事の共有がされないということ。
「いいね!」をされてもその人のタイムラインにそれが表示されないのです。では、どうすればよいか。それは、オープングラフと呼ばれる物を利用すれば良いのです。また、g+1ボタンの場合は似たような物を提供する手段として「+スニペット」という物を使います。

オープングラフや+スニペットはどうすれば設定できるかというと、ページの<head>内に<meta>として書けばよいだけなのです。まあ、簡単とえば簡単なんですが、これがまたいろいろ小難しいルールをつけていて結構めんどくさい。実例は以下な感じ。

facebook「いいね!」

<meta property="fb:app_id" content="144771918910649" />
<meta property="og:title" content="ユオニマス・ギャラリー" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://ja.gallery.euonymus.info/img/gallery/tengu.jpg" />
<meta property="og:image" content="https://ja.gallery.euonymus.info/img/gallery/kappa.jpg" />
<meta property="og:image" content="https://ja.gallery.euonymus.info/img/gallery/tortoise_snake.jpg" />
<meta property="og:url" content="http://ja.gallery.euonymus.info/" />
<meta property="og:site_name" content="ユオニマス・ギャラリー" />
<meta property="og:description" content="ユオニマス・ギャラリー(Euonymus Gallery)はEuonymus Productionsが提供する展示場です。" />

google「g+1」

<meta itemprop="name" content="ユオニマス・ギャラリー">
<meta itemprop="description" content="ユオニマス・ギャラリー(Euonymus Gallery)はEuonymus Productionsが提供する展示場です。">
<meta itemprop="image" content="https://ja.gallery.euonymus.info/img/gallery/tengu.jpg">
<meta itemprop="image" content="https://ja.gallery.euonymus.info/img/gallery/kappa.jpg">
<meta itemprop="image" content="https://ja.gallery.euonymus.info/img/gallery/tortoise_snake.jpg">

それぞれに設定しなければならない要素があり、それぞれにまためんどくさいルールがある。細かいことは、下記ページでも見てください。

スニペットは<head>ではなく<body>に書くこともできますが、やり方が異なるので割愛。で、スニペットのめんどくさいところは、<html>を下記の様に定義する必要が有るということ。

<html itemscope itemtype="http://schema.org/Article">

一方facebook方は「fb:app_id」というプロパティを設定しないといけない。これがまためんどくさくて、一旦開発者用サイトにてアプリの登録をする必要がある。その時アプリのドメインとして「いいね!」ボタンを貼るページを設定しておかなければならないのだ。

これら設定が上手くいかないといろいろ警告を出してきたり、うまくボタンが機能しなかったりしてイライラする事このうえなし。とくに「いいね!」ボタンはちゃんと設定しないと「承認」とか出てきていいね共有が素直にできない。また、ユーザーエージェントによって動作を変えているようなサイトだとせっかく設定したオープングラフやスニペットの情報が予定と異なる形で表示されたりする。これはあなたのサイトが予定していない独自のUser-Agentにてアクセスされた場合の挙動を制御できていないためだ。そのため、User-Agent毎に制御を変えるサイトの場合はfacebookやgoogleのエージェントからのアクセスも正しく扱う必要が出てくる。ユーザーエージェントはそれぞれ

  • facebook いいね!では、「facebookexternalhit
  • google+1では、 「Feedfetcher-Google」※

となる。なおFeedfetcher-Googleについては間違っているかも。(現在検証中)

そして、これらを設定後実際にかれらのbotによってどのようにhtmlが解釈されているのか確かめてみたくなるというのが心情という物だろう。そんな時は、下記のサイトにあなたのURLを入力してみて実際にfacebookやgoogleにどう見えているのかや、syntaxエラー等をチェックする事ができる。

これらのチェックをへてようやくあなたのサイトで「いいね!」ボタンや「g+1」ボタンを活用できるのだ。案外つまづく所が多い気がする。

 

簡単に説明すると気をつける事というのはボタンをクリックしてくれた人が「いいね!」と言ってくれている事をその人と繋がる人に知ってもらう時

「いいね」ご協力お願い致します!

LINEで送る
Pocket