この記事ではこのような悩みを解决します。
ここで言うSNSシェアボタンというのは、例えばこのブログ記事のサムネ画像下のような、全記事ページに共通で出現させるSNSシェアボタンを言います。
SNSシェアボタンの作成には大きく３つの種類があります。
- 自作し、ロゴはアイコン素材サイトから引っ張る（自由度：★★★）
- 公式の共有方法とロゴを使う（自由度：★★☆）
- WordPressプラグインを利用する（自由度：★☆☆）
それぞれ一長一短あるので、どの手法も手段として使えるようにしておくといいです。
今回の記事では3つ全て紹介していきます。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
❶SNSシェアボタンを自作する場合
まずは自作する場合です。
SNSシェアボタンのデザインが作り込まれているとき
→自作だとCSSでカスタマイズしやすいため。
以下添付画像のアイコンを作っていきます。
完成のコードは以下です。
<?php
// 現在のページURLを取得してURLエンコード
$url_encode = urlencode( get_permalink() );
// 現在のページのタイトルを取得してURLエンコード
$title_encode = urlencode( get_the_title() );
?>
<div class="container">
<ul class="sns-list">
<!-- Twitterの共有リンク -->
<li class="sns-twitter">
<a class="sns-link" target="_blank" href="<?php echo esc_url( 'https://twitter.com/share?url=' . $url_encode . '&text=' . $title_encode ); ?>">Twitter</a>
</li>
<!-- Facebookの共有リンク -->
<li class="sns-fb">
<a class="sns-link" target="_blank" href="<?php echo esc_url( 'https://www.facebook.com/share.php?u=' . $url_encode ); ?>">Facebook</a>
</li>
<!-- pocket -->
<li class="sns-pocket">
<a class="sns-link" href="<?php echo esc_url( "https://getpocket.com/edit?url={$url_encode}&title={$title_encode}" ); ?>" target="_blank" rel="nofollow noopener">pocket</a>
</li>
<!-- hatena -->
<li class="sns-hatena">
<a class="sns-link" href="<?php echo esc_url( "//b.hatena.ne.jp/add?mode=confirm&url={$url_encode}&title={$title_encode}" ); ?>" target="_blank" data-hatena-bookmark-title="<?php echo esc_url( get_the_title() ); ?>" title="このエントリーをはてなブックマークに追加する">はてブ</a></a>
</li>
<!-- LINEの共有リンク -->
<li class="sns-line">
<a class="sns-link" target="_blank" href="<?php echo esc_url( 'https://line.me/R/msg/text/?' . $title_encode . '%0A' . $url_encode ); ?>">LINE</a>
</li>
</ul>
</div>そのページのタイトルやURLをPHPで動的に取得して、共有時に活かされるようにしています。
リンク部分を動的にするのは、WordPressでは膨大なページがあるので、自動で共有時のページのURLやタイトルを取得できれば楽だからです。
esc_url() 関数は、WordPressでURLを安全に出力するための関数です。
これにより、URLが安全にエスケープされ、XSS（クロスサイトスクリプティング）のリスクを軽減します。
.sns-list {
display: flex;
justify-content: space-between;
}
.sns-list li {
width: 19.44%;
text-align: center;
}
.sns-list li a {
color: #fff;
display: block;
height: 25px;
line-height: 25px;
}
.sns-twitter {
background-color: #00acee;
}
.sns-fb {
background-color: #3b5998;
}
.sns-hatena {
background-color: #5d8ac1;
}
.sns-pocket {
background-color: #f03e51;
}
.sns-line {
background-color: #6cc655;
}リンク先がうまく設定されない場合
esc_url() 関数が原因のときがあるので、外してみてください。
アイコンを利用する場合
基本的に「Font Awesome」を利用して、aタグ内に<i>タグなど入れると良いです。
はてなブックマークは素材が無いので、その場合は公式の素材を活用するか、「B!」とテキストで入れてもいいと思います。
株式会社はてなの運営するソーシャルブックマークサービス、はてなブックマークのロゴ
アイコンを使用する際は(特に改変するとき)、問題ないかブランドロゴの利用規約をよくご確認ください。
❷SNSシェアボタンに公式アイコンを利用する場合
各社公式ボタンは以下の感じです。
デザインが比較的自由なときは、できるだけ公式用意のボタンを使う
→細かなカスタマイズはできないが、安心安全
完成のコードが以下です。
FacebookとLINEに関しては動的に共有ページのURLを取得させています。
<?php
// 現在のページURLを取得してURLエンコード
$url_encode = urlencode( get_permalink() );
// 現在のページのタイトルを取得してURLエンコード
$title_encode = urlencode( get_the_title() );
?>
<div class="container">
<ul class="sns-list">
<!-- Twitterの共有リンク -->
<li class="sns-twitter">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-lang="ja" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<!-- Facebookの共有リンク -->
<li class="sns-fb">
<div class="fb-like" data-href="<?php $url_encode; ?>" data-width="" data-layout="button" data-action="" data-size="" data-share="true"></div>
</li>
<!-- pocket -->
<li class="sns-pocket">
<a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
</li>
<!-- hatena -->
<li class="sns-hatena">
<a href="https://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-label-counter" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
<!-- LINEの共有リンク -->
<li class="sns-line">
<div class="line-it-button" data-lang="ja" data-type="share-a" data-env="REAL" data-url="<?php $url_encode; ?>" data-color="default" data-size="small" data-count="true" data-ver="3" style="display: none;"></div>
<script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
</li>
</ul>
</div>.sns-list {
display: flex;
justify-content: left;
}
.sns-list li {
text-align: center;
margin-right: 10px;
}
.container {
max-width: 960px;
margin-right: auto;
margin-left: auto;
padding: 20px;
}これは一つずつ解説していきます。
X(旧Twitter)公式シェアボタン
X(旧Twitter)の公式シェアボタンは以下から作成できます。
https://publish.twitter.com/?buttonType=TweetButton&buttonVia=cure_office&lang=ja&widget=Button
「set customization options」をクリックし、以下の部分を確認します。
screen nameは必要なければ空欄にし、言語は日本語にしておきましょう。
ここで生成できたコードは以下。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-lang="ja" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>ここで作成できたシェアボタンの表示は以下です。
facebook(Meta)公式シェアボタン(URLを動的にする)
いいねボタン
https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP
「シェアボタンを追加」をチェックすれば、シェアボタンといいねボタンを両方一気に設置することが可能です。
「いいね！するURL」は、WordPressの場合とりあえずどこかのURLを仮で入れます。
「レイアウト」は好きなものを選んで大丈夫ですが、今回は「button」にします。
生成されたコードは以下。
まずステップ1のコードは</body>の直前あたりに記述します。
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v18.0" nonce="iL1V2BRA"></script>ステップ2のコードは、表示させたい部分に挿入します。
<div class="fb-like" data-href="https://shogo-log.com" data-width="" data-layout="button" data-action="" data-size="" data-share="true"></div>WordPressの場合、このdata-hrefの部分に動的にURLが入れば良いので、以下のコードに改変します。
<?php
// 現在のページURLを取得してURLエンコード
$url_encode = urlencode( get_permalink() );
?>
<div class="fb-like" data-href="<?php $url_encode; ?>" data-width="" data-layout="button" data-action="" data-size="" data-share="true"></div>これで以下のボタンが表示されたかと思います。
共有ボタン
共有ボタンのみ欲しい場合はこちらから。
https://developers.facebook.com/docs/plugins/share-button/?translation
基本的手順は一緒でURL部分のdata-hrefを動的にすれば良いです。
pocket公式シェアボタン
pocketは簡単です。まず以下のサイトにアクセスし、好みのボタンを選べば終わりです。
https://getpocket.com/publisher/button
<a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>以下の表示になります。
はてぶ公式シェアボタン
はてぶも簡単です。
https://b.hatena.ne.jp/guide/bbutton
「保存するURL→ページのURLを使う」にしていれば、あとはコードを貼るだけです。
<a href="https://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-label-counter" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
LINE公式シェアボタン（URLを動的にする）
LINEではURL部分を動的にする必要があります。
https://developers.line.biz/ja/docs/line-social-plugins/
まず設置方法を選んで下さい。
「URLを設定」の部分は一旦飛ばします。
「LINE Social Pluginsガイドラインに同意します」にチェックし、コードをコピーします。
<div class="line-it-button" data-lang="ja" data-type="share-a" data-env="REAL" data-url="https://developers.line.biz/ja/docs/line-social-plugins/install-guide/using-line-share-buttons/" data-color="default" data-size="small" data-count="true" data-ver="3" style="display: none;"></div>
<script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script>このコードの中で、data-urlが肝です。
data-url="https://developers.line.biz/ja/docs/line-social-plugins/install-guide/using-line-share-buttons/"data-urlの部分のURLが動的になれば良いので、PHPで変更します。
<?php
// 現在のページURLを取得してURLエンコード
$url_encode = urlencode( get_permalink() );
?>
<div class="line-it-button" data-lang="ja" data-type="share-a" data-env="REAL" data-url="<?php $url_encode; ?>" data-color="default" data-size="small" data-count="true" data-ver="3" style="display: none;"></div>
<script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
</div>これで以下のボタンからシェアできるようになりました。
❸SNSシェアボタンにプラグインを利用する場合
デザインが比較的自由で、納品後も管理者側でカスタマイズできるようにするとき
→SNSの足し引きが容易、プラグインの更新には注意
WordPressのSNSシェアボタンプラグインは「頻繁に更新がされているか」が超重要です！！
「WP Social Bookmarking Light」などの過去の有名所のプラグインも更新が終了していたりします。
そこで、今回おすすめプラグインを一つだけ紹介します。
AddToAny Share Buttonsがおすすめ
AddToAny Share Buttonsは「よく使われていて、更新されていて、種類が豊富」なのでおすすめです。
SNSアイコンのデザインは限られますが、デザインが相談できるなら是非デザイナーやディレクターとも相談してみてください。
AddToAny Share Buttonsの使い方
まずはプラグインをインストールし有効化します。
その後、「設定→AddToAny」を選択。
「サービスの追加/削除」を選択。
その後、使用したいSNSアイコンを選択します。
「ユニバーサルボタン」に関しては日本では馴染みない機能なので、「なし」で良いと思います。
「ブックマークボタンの場所」では設置場所を選ぶことができます。
任意の場所にシェアボタンを設置する場合
[addtoany]がショートコードになるので、テンプレートファイルの場合、以下のdo_shortcode()関数を利用すれば任意の場所に表示することができます。
<?php echo do_shortcode(‘[addtoany]’); ?>WordPressのSNSシェアボタン3種類の引き出しを持っていこう
この記事ではSNSシェアボタンの3つの作り方を解説しました。
「共有URLを動的にすべきかどうか」「動的にするならどうコードを書くか」が要点になり、そこでは$url_encode = urlencode( get_permalink() );や、$title_encode = urlencode( get_the_title() );といったコードも出てきたので、復習しておきたいですね。
宣伝：レビュー付きWordPress実践課題をリニューアル
実務レベルのWordPress実装を学べる課題を2024年にリニューアルしました！
開始宣言をし、24日以内に提出→修正数10個以内で合格と決めているので、良い緊張感の中でかなり鍛えられると思います。挑戦したい方は是非👇
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
Twitterのリンクは優秀で、自動でタイトルなどを取得するので、リンクを動的にする必要がありません。