Web制作実務役立ち

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】
本ページにはプロモーションが含まれています。

ありさちゃん
ありさちゃん
WordPressサイトにSNSシェアボタンを導入したいけど、自作か、公式の共有リンクを使うか、プラグインを使うか、迷っています。
ゆうすけくん
ゆうすけくん
プラグインは使わずに実装してみたいっす。でも念のためプラグインでの方法も知りたいっす。

この記事ではこのような悩みを解决します。

ここで言うSNSシェアボタンというのは、例えばこのブログ記事のサムネ画像下のような、全記事ページに共通で出現させるSNSシェアボタンを言います。

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】

SNSシェアボタンの作成には大きく3つの種類があります。

SNSシェアボタンの作り方
  1. 自作し、ロゴはアイコン素材サイトから引っ張る(自由度:★★★)
  2. 公式の共有方法とロゴを使う(自由度:★★☆)
  3. WordPressプラグインを利用する(自由度:★☆☆)

それぞれ一長一短あるので、どの手法も手段として使えるようにしておくといいです。

今回の記事では3つ全て紹介していきます。

有名所として、「X(旧Twitter)」「Meta(旧facebook)」「Pocket」「はてぶ」「LINE」の5つを紹介します。実案件でもこれだけあれば問題ありません。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

❶SNSシェアボタンを自作する場合

まずは自作する場合です。

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>タグなど入れると良いです。

https://fontawesome.com/icons/twitter?f=brands&s=solid&pc=%239f5656

はてなブックマークは素材が無いので、その場合は公式の素材を活用するか、「B!」とテキストで入れてもいいと思います。

株式会社はてなの運営するソーシャルブックマークサービス、はてなブックマークのロゴ

アイコンを使用する際は(特に改変するとき)、問題ないかブランドロゴの利用規約をよくご確認ください。

❷SNSシェアボタンに公式アイコンを利用する場合

各社公式ボタンは以下の感じです。

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】
公式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

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】

set customization options」をクリックし、以下の部分を確認します。

screen nameは必要なければ空欄にし、言語は日本語にしておきましょう。

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】

ここで生成できたコードは以下。

<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>

Twitterのリンクは優秀で、自動でタイトルなどを取得するので、リンクを動的にする必要がありません。

ここで作成できたシェアボタンの表示は以下です。

facebook(Meta)公式シェアボタン(URLを動的にする)

いいねボタン

https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP

シェアボタンを追加」をチェックすれば、シェアボタンといいねボタンを両方一気に設置することが可能です。

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】

いいね!する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

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】
<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/

まず設置方法を選んで下さい。

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】

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がおすすめ

https://ja.wordpress.org/plugins/add-to-any/

AddToAny Share Buttonsは「よく使われていて、更新されていて、種類が豊富」なのでおすすめです。

SNSアイコンのデザインは限られますが、デザインが相談できるなら是非デザイナーやディレクターとも相談してみてください。

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】

AddToAny Share Buttonsの使い方

まずはプラグインをインストールし有効化します。

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】

その後、「設定→AddToAny」を選択。

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】

サービスの追加/削除」を選択。

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】

その後、使用したいSNSアイコンを選択します。

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】

ユニバーサルボタン」に関しては日本では馴染みない機能なので、「なし」で良いと思います。

WordPressでSNSシェアボタンを設定する方法【自作と公式アイコンとプラグイン利用全て解説】

ブックマークボタンの場所」では設置場所を選ぶことができます。

WordPressで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実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください!

しょーごログ-コーディング課題のレビュー
レビューの様子

\課題の購入はこちらから/

しょーご

応援して頂ける方へ

ご寄付を頂けると今後の更新の励みになります!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!
});