オリジナルのシェアボタン設置方法とシェア画面URLをまとめました

オリジナルのSNSシェアボタンを設置

SNSのシェアボタンを設置するのって意外と面倒です。
なので、WordPressを使っている場合はプラグインで設定してしまいます。

が、WordPressを使っていてもシェアボタンをオリジナルの物にしたいという要望ってそこそこあります。

「公式のボタンを使えばいいやん！」と言いたいのですが、
そこはお客さんからの要望なので仕方がありません。
で、
そんな場合には、シェア画面のURLに直接飛ばしてしまえば簡単です。

例えば、
Facebookであれば、
https://www.facebook.com/share.php?u=ページURL
へリンクを貼るだけです。

こんな感じです。

<a href="https://www.facebook.com/share.php?u=ページURL" rel="nofollow noopener noreferrer" target="_blank">テキスト</a>
※「テキスト」の部分は各自で変更して下さい。画像に変更してもOKです。

もし、
シェア画面をポップアップで開きたい場合には、
Javascriptで簡単に実装出来ます。

Javascriptコードのサンプルも紹介しておきます。

<script>
<!--
function window_open(linkurl){
window = window.open(linkurl,"","width=700,height=500,scrollbars=yes,status=no,toolbar=no,resizable=yes");
window.focus();
}
//-->
</script>

↓

で、HTML側で以下のように設定すればOKです。

<a href="javascript:void(0);" rel="nofollow" onClick="window_open('http://www.facebook.com/share.php?u=ページURL')">テキスト</a>

※「テキスト」の部分は各自で変更して下さい。画像に変更してもOKです。

これでOKです。
簡単ですね。

SNSはFacebookだけではないので、他によく利用されるSNSシェアのリンク先をまとめておきます。

SNSシェア画面のURL

【Facebook】

https://www.facebook.com/share.php?u=ページURL

もし、WordPressを使っている場合はこんな感じですね。
↓
http://www.facebook.com/share.php?u=<?php the_permalink(); ?>

【Twitter】

https://twitter.com/share?url=ページURL&text=ページタイトル&hashtags=ハッシュタグ

WordPressを使っている場合はこんな感じです。
↓
https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>

【Linkedin】

https://www.linkedin.com/shareArticle?mini=true&url=ページURL&title=ページタイトル

WordPressを使っている場合はこんな感じです。
↓
https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>

【はてなブックマーク】

https://b.hatena.ne.jp/add?url=ページURL&title=ページタイトル

WordPressを使っている場合はこんな感じです。
↓
https://b.hatena.ne.jp/add?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>

【LINE】

https://line.me/R/msg/text/?ページURL

WordPressを使っている場合はこんな感じです。
↓
https://line.me/R/msg/text/?<?php the_permalink(); ?>