FacebookやTwitterなどSNSのシェアボタンをオリジナル画像にする方法【WordPressも対応】

シェアボタンをオリジナルにしよう

最終更新 [2014年7月15日]

この記事内には広告リンクが含まれています。

キーワード：アカウント, サイト作成, 登録,

facebookやTwitterなどSNSで使うよく見るシェアボタンをオリジナル画像またはスタイルシートなどで作成したオリジナルに変更する方法です。

各コードとWordPressで使う際のサンプルを記載しています。

usedoorでも現在、Facebookのシェアボタン（いいね！じゃないよ）とツイートするボタンをオリジナル画像にしています。
適切な設定を行うことで自分が設定したいオリジナル画像をシェアボタンとして使うことができるようになります。

usedoorでもシェアボタンを増やしていこうかと悩み中です。
オリジナル画像シェアボタンの組み込み方はこのエントリにまとめていきます。

OGPを指定しておこう

またSNSボタンを配置するにあたってヘッダーに「OGP」というものを導入しておく必要があります。
絶対に必要というわけではないのですが、自分側で設定しておくことでシェアされた時に自分が表示させたいように表示させることができるようになります。
⇒ Open Graph Protocol（通称：OGP）の設定方法【wordpressサンプルあり】

ではオリジナルシェアボタンの導入を代表的なところから。

facebookのシェアボタンをオリジナル画像に変更する

Facebook シェアボタンの基本形

Facebook シェアボタンをWordPressで使う場合のサンプル

<a title=”facebookでシェアする” href=”http://www.facebook.com/sharer.php?u=<?php echo(“http://” . $_SERVER[“HTTP_HOST”] . $_SERVER[“REQUEST_URI”]); ?>&t=<?php echo trim(wp_title( ”, false)); ?>” target=”_blank”>
<img src=”【画像URL】>
</a>

↑はURLに現在の記事のURL（これはWordPressというかPHPですが。。）、タイトルにWordPressのwp_titleを使ってtrimしているというものです。

この方法でハメたのがコレ↓

クリックしてみてください～
タイトルとURLがハマった状態でFacebookにジャンプします。

そのままシェアしてもらえると嬉しいなぁ。。

Twitterのツイートボタンをオリジナル画像に変更する

ツイートボタンの基本形

ツイートボタンをWordPressで使う場合のサンプル

<a href=”http://twitter.com/share?url=<?php echo(“http://” . $_SERVER[“HTTP_HOST”] . $_SERVER[“REQUEST_URI”]); ?>&text=<?php echo trim(wp_title( ”, false)); ?>&via=sitename” target=”_blank”>
<img src=”<?php echo $twimg; ?>”>
</a>

この方法でハメたのがコレ↓

クリックしてみてください～
タイトルとURLがハマった状態でツイート画面が立ち上がります。

つぶやいて欲しいなぁ…