こんばんはー！！今年は何だか多めに投稿しいる気がしますねぇ。それだけ詰まることが多いということでしょうか。。。まだまだ成長途中。
今回はホント今更なのですが、各SNSのリンク先をまとめることにしました。
毎回どこかからコピペしてたのですが、メモしとけば早いよね。ってことで。。。
リンク先の設定
早速いきましょう！！まずは各SNS、href属性に入れる値が決まっているので、そちらを設定します。
今回はWordPressで使用することを前提にいきます！
// Facebook
$facebookUrl = 'http://www.facebook.com/share.php?u=' . get_permalink();
// Twitter
$twitterUrl = 'http://twitter.com/share?url=' . get_permalink();
// Hatena
$hatenaUrl = 'http://b.hatena.ne.jp/entry/' . get_permalink();
// Line
$lineTitle = get_the_title();
$lineUrl = 'http://line.me/R/msg/text/?' . get_permalink();
// Google+
$googleplusUrl = 'https://plus.google.com/share?url='. get_permalink();
まぁこんな感じでしょう。
設定したリンクをいざaタグへ
後は、先程設定したリンクを各aタグに埋め込めばいいだけ！！
// アイコンを画像で表示した場合。aタグの中身を入れ替えれば自由に設定可能
<ul class="sns">
<li class="sns-list">
<a href="<?php echo $facebookUrl ?>" target="_blank">
<img src="<?php echo get_template_directory_uri(); ?>/img/icon_svg/icon_sns_fb.svg" alt="">
</a>
</li>
<li class="sns-list">
<a href="<?php echo $twitterUrl; ?>" target="_blank">
<img src="<?php echo get_template_directory_uri(); ?>/img/icon_svg/icon_sns_twitter.svg" alt="">
</a>
</li>
<li class="sns-list">
<a href="<?php echo $lineUrl; ?>" target="_blank">
<img src="<?php echo get_template_directory_uri(); ?>/img/icon_svg/icon_sns_line.svg" alt="">
</a>
</li>
<li class="sns-list">
<a href="<?php echo $googleplusUrl; ?>" target="_blank">
<img src="<?php echo get_template_directory_uri(); ?>/img/icon_svg/icon_sns_google.svg" alt="">
</a>
</li>
</ul>
まぁこんな感じでしょう。
そして、Facebookはheadタグにprefixを入れる必要があるので、こちらも忘れずに！！
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
OGPのog:imageについて
さて、今回はもうちょっと書いていきましょう。
いかんせんこれで引っかかったので！！！
og:imageで設定したものは初回シェアされる時に画像が出ないって知ってました？
ボクは知らなかったです。。。これで引っかかって100回くらいなんでやねんと呟きました。
理由としては、「Facebookクローラーがシェア対象のURLからメタデータをスクレイピングし、キャッシュします。クローラーは、画像を少なくとも1回確認してからでなければ、レンダリングできません」らしいです。
で、どうやって回避するの？と調べたら以下の対応で大丈夫だそうです。
- Facebookシェアデバッガーを使って一度キャッシュさせる
- og:image:width、og:image:heightを使用する
:widthと:heightってのは初めて知りました。。。
使い方は他のmetaと同じような感じで、画像サイズの数字を入れれば大丈夫みたい。
// :width、:heightの使用例
<meta property="og:image" content="http://sample.com/img/sample.jpg" />
<meta property="og:image:width" content="960" />
<meta property="og:image:height" content="500" />
今回はシェアデバッガーを使ってキャッシュさせると問題解決できましたが、基本的に:widthと:heightってのは付けれるなら付けた方が良いのかもしれませんね。
まだまだ知らないことが多すぎると最近になって痛感しております。。。
あんまり無いとは思いますが、og:imageで引っかからないように気をつけましょう〜！
ありがとうございましたっ！！