ページに Google+ と Facebook の「いいね!」ボタンがあります。それらから必要なスクリプトを取得し、データ属性を動的に設定します。しかし、共有ボタンまたはいいねボタンをクリックすると、ランダムな画像とタイトルが表示されます。使用したいタイトル、画像、説明を認識するためのメタタグがありますが、どういうわけかメタタグを取得していません。
Facebook Developer Debug Tool からのエラーは次のとおりです。
fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high click-through rate.
og:title is missing. The og:title meta tag is necessary for Facebook to render a News Feed story that generates a high click-through rate.
og:type is missing. The og:type meta tag is necessary for Facebook to render a News Feed story that generates a high click-through rate.
og:image is missing. The og:image meta tag is necessary for Facebook to render a News Feed story that generates a high click-through rate.
HTML でレンダリングされたメタ タグ
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
itemscope itemtype="http://schema.org/Product">
<meta content="No appointment necessary. We hear you coming" name="og:title">
<meta content="http://www.mysite.com" name="og:site_name">
<meta content="blog" name="og:type">
<meta content="http://www.mysite.com/entries/viewentry.aspx" name="og:url">
<meta content="http://static.mysite.com/Images/imag21.jpg" name="og:image">
<meta content="447438772019226" name="fb:app_id">
<meta content="Temp title and some descriptions" name="description">
Facebook スクリプト
<div class="facebookShare">
<div class="fb-like" data-font="verdana" data-href=
'<%= currentPageURL.Value %>' data-layout="box_count" data-send="true"
data-show-faces="true" data-width="500"></div>
</div>
// currentPageURL is a hidden field which sets the URL fine.
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Google+ 共有ボタン スクリプト
<div class="googlePlusShare col span_1_of_12">
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-annotation=
"vertical-bubble" data-height="60" data-href='<%= currentPageURL.Value %>'</div>
</div>
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
両方のレンダリングされた HTML
<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget"
data-font="verdana" data-href="http://www.mysite.com/viewentry.aspx?entryId=6"
data-layout="box_count" data-send="false" data-show-faces="true"
data-width="500">
</div>
// Google+ は html 全体とdata-href
属性も置き換え、現在のページの URL が表示されないコードをいくつか挿入します。少なくとも私はFacebookのタグでそれを見ることができます
ただし、両方をクリックしてもメタ タグ情報が取得されません。助けてください。