ホームページ構築のときにお客様から
「シェアボタンをおした時の文章を変更したい」とご依頼を受けました。
いままで考えたことがなかったので
「変更できるのか?」と思って調べてみました。
ちなみに何も設定しなければ
デフォルトでは「ページタイトル」と「ページURL」が使用されるはず。
Twitterの「Tweetボタン」

- シェアするURL
- ツイート内容
- ハッシュタグ等
公式のボタン設置案内ページでもこれだけ設定ができます。
コードが吐き出されるのでそれをコピペでOK。
<a href="https://twitter.com/share" class="twitter-share-button" data-url="共有したいURL" data-text="ツイートされる内容">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
でもこれだと、公式の「Tweet」ボタンでないと動作しないので
自前の画像を使いたいときは下記を使用します。
<a href="http://twitter.com/share?url=共有したいURL&text=ツイート内に含めるテキスト"> <img src="画像URL" alt="ALTタグ"> </a>
LINEの「LINEで送るボタン」

こちらも公式でコードを出力できます。
しかも親切に色々カスタマイズ方法も書いてあります!
公式サイトから引用。
<a href="http://line.me/R/msg/text/?ここにシェアしたい文章(URL+文章など)"><img src="ボタン画像のURL" width="幅" height="高さ" alt="LINEで送る" /></a>
WordPressならこのコード。
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>
WordPressで使用されるのを見越してコードを記載してくれているなんて
その親切さに脱帽です。
Facebookの「シェアボタン」

個人的にこれが一番厄介です。
何が厄介って、
Facebookのサイトは基本英語なのに設定項目がやたらと多い。
しかもaタグに何かを書き足せばOKとか
そういう方法じゃナンセンス。
ここで登場するのがOGPです。
ずっと国内総生産と同じつづりだなーとおもってたらあっちはGDPだった。恥ずかしい。
OGPとはOpen Graph Protocolの略だそうです。
かんたんに言うと、Facebookに
「このページはこんな内容のページです」と伝えるための記述。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta property="og:title" content="ページタイトル"> <meta property="og:type" content="website"> <meta property="og:url" content="ページURL"> <meta property="og:image" content="サムネイル画像URLの絶対パス"> <meta property="og:site_name" content="サイト名"> <meta property="og:description" content="ディスクリプション">
これらをヘッダーに記述します。
headタグは書き換えても問題無いです。
下2行は必ずしも無くてもOK。
入力しなかった場合はかってにページタイトルなどから取得してくれます。
これらの設定が終わったら
Facebookのオブジェクトデバッカーで変更を確認します。
※Facebookへのログイン必須
https://developers.facebook.com/tools/debug/og/object/
input URLに確認したいURLを押して
「Fetch new scrape information」をクリックします。
「Fetch new scrape information」 → OGP情報の更新
「Show existing scrape information」 → 現在の設定の確認
デバッガーではきちんと表示されるのに
実際にサイトに埋め込んだボタンは正常に表示されない!!
という症状が出た場合は
いいね!をしている人が50人以上いる場合は
反映がされない(されにくい?)ようです。
たくさんの人がいいね!しているのだから
ホームページの内容をそんなに変えるのはおかしい!
というFacebookさんの配慮だそうです。ありがた迷惑。
SNSボタンの文章変更は思ったよりかんたん
どうでしたか?
個人的にはFacebookが難関で、それ以外のLINEとTwitterは
コードに付け足すだけでサクっと実装できるので楽でした。
今日は何の日。
3/9「雑穀の日」
それでは、また。