Facebook OGPとTwitter Cardの設定

先日、気の置けない友人2人とランチに行った時のお話。

お知り合いの方のサイトのデザインについての相談を受けた。

私「私もブログ作ったんだよ~!」

友人「「見せて~!」」

fb1

友人「(・ω・)(・ω・)」

私「…ほ、ほら!メニューもこんな感じで降りてくるんだよ!」

fb2

友人「(・ω・)(・ω・)…?」

…………見なかったことにしてもらった。 自分でサーバー借りて、Wordpressぶち込んで、カスタマイズして、 すっかり満足していた、苦労した気になっていた。

** 私のブログ、真っ黒じゃん。**

テーマをTCDのMAGに変更


ついに課金しました、家計簿の費目は自己投資にしておきました(震え声)

試しにtwitterに共有してみると

fb3

溢れ出るコレジャナイ感。

fb4 こういうのとか、 fb5

↑こういうのを想像していた。

投稿を共有したらただの文字の羅列、なんてSNS映えしない。 TCDのマニュアルにOGPの設定コードを書き込まないと使えないとあったことから それに従ってOGPの設定を実装したものの頭が悪すぎて朝4時になっても実装できず、 翌朝ようやく成功した次第。躓いたポイントを整理しておく。

header.phpを修正


OGPの設定は、サイトの<head>内の<meta>要素にソースを記述します。投稿記事と、それ以外のページを条件分岐させています。

それってWordressのどこかわからなくて、とりあえずfunction.phpに書いてみたら動いた。 噛み砕くとheader.phpのタグの中に下記ソースを追加せよ、という意味だった。

<?php if (is_single()) { ?>
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<?php } else { ?>
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">

これはog:typeを伝えているらしい、投稿記事は”article”、それ以外のページは”website”を送りますってだけ。

これは私の場合既にheader.phpに記載されていたから追加の必要はなかった。

<!--OGP Setting-->
<meta property="og:locale" content="ja_JP">
<meta property="fb:app_id" content="facebookのApp id">
<meta property="og:site_name" content="<?php bloginfo('name'); ?>'>
<?php
if (is_single()){
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";
echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";
echo '<meta property="og:type" content="article">';echo "\n";
echo '<meta property="article:publisher" content="FacebookページのURL">';echo "\n";
endwhile; endif;
} else {
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";
echo '<meta property="og:type" content="website">';echo "\n";
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
if (is_single()){
if (has_post_thumbnail()){
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl )){
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {
echo '<meta property="og:image" content="画像へのリンク">';echo "\n";
}
} else {
echo '<meta property="og:image" content="画像へのリンク">';echo "\n";
}
?>
<!--OGP Setting end-->

問題はこっちだ、Facebook Developersに登録するために利用停止していたFBアカウントを復活させた。

App idを取得するためにプライバシーポリシーを書き直した。

プライバシーポリシーのリンクを誤って利用規約URLを記載する欄に貼っていて数時間を無駄にした。

(FB苦手なのになぁ…Twitter Card使うだけならfb:app id要らないのはわかるんだけど... FBに負けた気がしてなんか悔しくて......

コメントはhtml形式で


php拡張子がついているから安心してしまったのだがphpタグの外のコメントは<!-- -->形式でした。

おかげで上3行のmetaタグが認識されなくてFB シェアデバッガーに

fb:idがありません、og:typeが不正です

とはねられ続けた。

設定完了


ここまで大変でしたがうまく設定できました、いいねも反映されてますね (公式ボタン好きじゃないから使わないんですけどね)

fb7

Twitter Cardはこんな感じ。

fb8

投稿しなくていいのでFacebookかtwitterの投稿作成画面で”microayatron.com”と打ってみてください。 にゅるんっ、とカードが登場しますよ 開発者の方は4種類からカードの形が選べるらしいので試してみてください。

おまけ


うまくいったのを確認したので再度FBの利用停止しようとしたら

あなたはこのアプリの唯一の開発者です、アプリを削除するか他の開発者に引き継いでください。

とFBに怒られた。 開発者ツールを使わせてほしいんだけなんだよなぁ...... コミュ強SNS怖い、とほほ。