SNSシェアボタンをカスタマイズする【PHP,WordPress】

ページのシェアボタンを設置するときに、カスタマイズしたアイコンやテキストリンクにしたい。という時があります。
Socialアイコンの画像はつくった。次はコードだ！何を書けばいい？というときの参考になれば。

以下がそのソース。今回はPHPで記述しています。PHPなのでWordPressのテンプレでも使えますね。
WordPressならページ名もサイトのURLも取得が簡単です。

ポイントとしては以下2つ

ページURLは自動取得
URLはエンコードする

OGPを設置しない状態で以下の内容が表示されていることを確認しました。

FB（iphoneアプリ）：ページURL, ページタイトル,ランダムな画像　の取得

FB（PC）：ページURL, ページタイトル, ページディスクリプション, ランダムな画像　の取得

TW （PC, iphoneアプリ）：ページURL, 設置したハッシュタグ　の取得

Line（PC, iphoneアプリ）：ページURL, ページタイトル, ページディスクリプション, ファビコン？apple touch icon?あたりが取得されている

■ＰＨＰ
<?php 
$url_page= (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
$enc_url_page = urlencode($url_page);
?>
<ul>
<li>
<a href="https://www.facebook.com/share.php?u=<?php echo $enc_url_page; ?>" target="_blank">FACEBOOK</a>
</li>
<li>
	<a href="https://twitter.com/share?url=<?php echo $enc_url_page; ?>&hashtags=hashtagA ,hashtagB " target="_blank">Tweet</a>
</li>
<li>	
	<a href="https://social-plugins.line.me/lineit/share?url=<?php echo $enc_url_page; ?>">Line</a>
	</li>
</ul>

拡散するならOGPを一緒に設定しましょう

上記のようにOGPを入れなくてもそれなりにはデータを取得してくれていますが、OGPを入れれば画像のコントロール、表示テキストのコントロールなどができますし、ユーザーへの訴求力も変わってくるでしょう。Socialボタンとともに一緒に設定しましょう。
以下は参考です。

入力がちゃんとできているかはそれぞれのバリデーションツールからできます。

<html prefix="og: http://ogp.me/ns#">
<head>
<!-- og -->
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:type" content="article">
<meta property="og:url" content="">
<meta property="og:image" content="画像のパス">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- twitter card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:url" content="">
<meta name="twitter:image" content="画像のパス">
</head>

<html prefix=”og: http://ogp.me/ns#”>について：今はTwitterでは以下のように書かれてて必要ないそう。FACEBOOKのデバッガーでも記述がなくてもエラーは表示されなかった。しかしOpen Graphでは指定することを推奨としているので書いておくことにします。

Open Graphは<html prefix=”og: http://ogp.me/ns#”>を介して“og” RDFa Core 1.1 CURIEプレフィックスマッピングを指定することを推奨していますが、Twitterカードや、HTMLメタ要素のname属性のtwitter:プレフィックスでの使用には、そのようなマークアップは必要ありません。

引用：https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started

参考リンク

FACEBOOL デベロッパーサイト

FACEBOOK Sharing Debugger

Twitter デベロッパーサイト

Twitterカードについて

Twitter Card Validator

Line　

TOPページに戻る

拡散するならOGPを一緒に設定しましょう

参考リンク

カテゴリーリスト