すぐに使える！WordPressでSNSのシェアボタンを自作で設置する方法を解説！

みなさんこんにちは！エンジニアの高澤です！

今回はWordPressでSNSのシェアボタンを自作で設置する方法を解説していきたいと思います。

SNSのシェアボタンは今やどのメディアサイトにもありますので、今回の内容はWordPressでサイト制作する場合にほぼほぼ必要になる内容になってくるかと思います。

よろしければぜひ当記事をお仕事の際にお役立ていただけますと幸いです。

SNSのシェアボタンとは

SNSのシェアボタンとは、ウェブサイトやコンテンツの特定のページや記事ページを、ソーシャルメディア上で簡単に共有できるようにするためのボタンです。

これらのボタンは、閲覧しているユーザーがコンテンツを気に入った場合に、そのページのリンクを自分のソーシャルメディアのプロフィールやタイムラインに投稿するために使用されます。

シェアボタンを設置するメリット

シェアボタンを設置することにはいくつかのメリットがあります。

メリットは以下の内容になります。

• コンテンツの拡散
• ソーシャルトラフィックの増加
• ブランドの認知度向上
• ユーザーエンゲージメントの増加
• SEOへの影響

それぞれ解説していきます。

コンテンツの拡散

ユーザーがコンテンツを簡単に共有できるため、より多くの人にコンテンツが見られる機会が増えます。

これにより、ウェブサイトの露出やトラフィックを増やすことができます。

ソーシャルトラフィックの増加

SNSでのシェアにより、ソーシャルメディアからのトラフィックが増加する可能性があります。

これにより、ウェブサイトの多様なトラフィックソースを確保し、SEOの向上にもつながります。

ブランドの認知度向上

コンテンツがソーシャルメディアで共有されることで、ブランドの認知度が向上します。

人々がコンテンツを共有することで、そのコンテンツやブランドが広く知られるようになります。

ユーザーエンゲージメントの増加

ユーザーがコンテンツを共有することで、そのコンテンツに対するエンゲージメントが増加します。

コメントやいいねの数が増えることで、コンテンツに対する関心や興味が高まります。

SEOへの影響

ソーシャルシェアは、SEOに影響を与える要因の一つです。

コンテンツがソーシャルメディアで共有されることで、そのコンテンツへのバックリンクや検索エンジンの信頼性が向上する可能性があります。

シェアボタンを実装する方法

それでは早速シェアボタンを実装する方法について解説していきます。

それぞれ基本コードとWordPress対応版の2点ずつ掲載しておりますので、コピー＆ペーストしてお使いいただけますと幸いです。

Facebook

以下の内容を必要な箇所にコピー＆ペーストしてください。

<a href="http://www.facebook.com/share.php?u={URL}" rel="nofollow noopener" target="_blank">リンクテキスト</a>

FacebookのWordPress対応版はこちら

WordPressで使用する場合は以下の内容をsingle.phpやsingle-{post_type}.phpなど必要な箇所にコピー＆ペーストしてください。

<a href="http://www.facebook.com/share.php?u=<?php echo get_permalink(); ?>" rel="nofollow noopener" target="_blank">リンクテキスト</a>

X（旧Twitter）

以下の内容を必要な箇所にコピー＆ペーストしてください。

<a href="https://x.com/share?url={URL}" rel="nofollow noopener" target="_blank">リンクテキスト</a>

X（旧Twitter）のWordPress対応版はこちら

WordPressで使用する場合は以下の内容をsingle.phpやsingle-{post_type}.phpなど必要な箇所にコピー＆ペーストしてください。

<a href="https://x.com/share?url=<?php echo get_permalink(); ?>" rel="nofollow noopener" target="_blank">リンクテキスト</a>

はてなブックマーク

以下の内容を必要な箇所にコピー＆ペーストしてください。

<a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={ページのタイトル}" rel="nofollow noopener" target="_blank">リンクテキスト</a>

はてなブックマークのWordPress対応版はこちら

WordPressで使用する場合は以下の内容をsingle.phpやsingle-{post_type}.phpなど必要な箇所にコピー＆ペーストしてください。

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo get_permalink(); ?>&title=<?php echo get_the_title(); ?>" rel="nofollow noopener" target="_blank">リンクテキスト</a>

LINE

以下の内容を必要な箇所にコピー＆ペーストしてください。

<a href="http://line.me/R/msg/text/?{URL}%0a{ページのタイトルなど表示したいテキスト}" target="_blank" rel="nofollow noopener">リンクテキスト</a>

LINEのWordPress対応版はこちら

WordPressで使用する場合は以下の内容をsingle.phpやsingle-{post_type}.phpなど必要な箇所にコピー＆ペーストしてください。

<a href="http://line.me/R/msg/text/?<?php echo get_permalink(); ?>%0a<?php echo get_the_title(); ?>" target="_blank" rel="nofollow noopener">リンクテキスト</a>

Pocket

以下の内容を必要な箇所にコピー＆ペーストしてください。

<a href="http://getpocket.com/edit?url={URL}&title={ページのタイトル}" rel="nofollow" rel="nofollow" target="_blank">リンクテキスト</a>

PocketのWordPress対応版はこちら

WordPressで使用する場合は以下の内容をsingle.phpやsingle-{post_type}.phpなど必要な箇所にコピー＆ペーストしてください。

<a href="http://getpocket.com/edit?url=<?php echo get_permalink(); ?>&title=<?php echo get_the_title(); ?>" rel="nofollow" rel="nofollow" target="_blank">リンクテキスト</a>

Feedly

以下の内容を必要な箇所にコピー＆ペーストしてください。

<a href="https://feedly.com/i/subscription/feed/{URL}" target="blank" rel="nofollow noopener">リンクテキスト</a>

FeedlyのWordPress対応版はこちら

WordPressで使用する場合は以下の内容をsingle.phpやsingle-{post_type}.phpなど必要な箇所にコピー＆ペーストしてください。

<a href="https://feedly.com/i/subscription/feed/<?php echo get_permalink(); ?>" target="blank" rel="nofollow noopener">リンクテキスト</a>

まとめ

WordPressでSNSのシェアボタンを自作で設置する方法の解説は以上になります。

SNSのシェアボタンは今やどのメディアサイトにも必要になりますので、今回の内容は仕事で頻繁に必要になってくるかと思います。

よろしければぜひ当記事をお仕事でお役立ていただけますと幸いです。