SNSシェアボタンを押した時に表示される文章を変更する方法（Twitter･LINE･Facebook） - 建設現場デジタルサイネージの「モニたろう」と「モニすけ」ブログ

ホームページ構築のときにお客様から
「シェアボタンをおした時の文章を変更したい」とご依頼を受けました。

いままで考えたことがなかったので
「変更できるのか？」と思って調べてみました。

ちなみに何も設定しなければ
デフォルトでは「ページタイトル」と「ページURL」が使用されるはず。

Twitterの「Tweetボタン」

f:id:yamato-yamamura:20160309114219p:plain:w150

シェアする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で送るボタン」

f:id:yamato-yamamura:20160309114225p:plain:w150

こちらも公式でコードを出力できます。

しかも親切に色々カスタマイズ方法も書いてあります！
公式サイトから引用。

<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の「シェアボタン」

f:id:yamato-yamamura:20160309114231p:plain:w150

個人的にこれが一番厄介です。

何が厄介って、
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="ディスクリプション">