読者です 読者をやめる 読者になる 読者になる

岡山・広島の広告パートナー ヤマト広告ブログリレー

岡山・広島エリアで広告の制作・コンサルティングを提供するヤマト広告のブログリレー。

ヤマト広告ブログリレー
岡山・広島を中心に活動する広告制作・広告パートナー。
デザインやホームページ制作、折込チラシやテレビCMなど販促物や媒体出稿、
リスティング広告などSEMやSEOなどWebマーケティング全般。

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="ディスクリプション">

これらをヘッダーに記述します。
headタグは書き換えても問題無いです。

下2行は必ずしも無くてもOK。
入力しなかった場合はかってにページタイトルなどから取得してくれます。

これらの設定が終わったら
Facebookのオブジェクトデバッカーで変更を確認します。
※Facebookへのログイン必須
https://developers.facebook.com/tools/debug/og/object/



f:id:yamato-yamamura:20160309113536p:plain

input URLに確認したいURLを押して
「Fetch new scrape information」をクリックします。

「Fetch new scrape information」 → OGP情報の更新
「Show existing scrape information」 → 現在の設定の確認


デバッガーではきちんと表示されるのに
実際にサイトに埋め込んだボタンは正常に表示されない!!

という症状が出た場合は
いいね!をしている人が50人以上いる場合は
反映がされない(されにくい?)ようです。

たくさんの人がいいね!しているのだから
ホームページの内容をそんなに変えるのはおかしい!
というFacebookさんの配慮だそうです。ありがた迷惑。


SNSボタンの文章変更は思ったよりかんたん

どうでしたか?
個人的にはFacebookが難関で、それ以外のLINEとTwitterは
コードに付け足すだけでサクっと実装できるので楽でした。



今日は何の日。
3/9「雑穀の日」

f:id:yamato-yamamura:20160309111305j:plain

それでは、また。

ページトップ