【プラグインなし】SNSのシェアボタンをコピペで設置する方法

SNSのシェアボタンを、プラグイン(Share Buttons by AddThis)を使用することで、簡単に設置することはできます。

 

とはいえ、SNSのシェアボタンの設置する程度でプラグインを導入していれば、そのうちプラグインまみれのサイトになってしまいます。

 

プラグインを大量に導入することで、

①メンテナンスできない(追いつかない)

②古いバージョンのプラグインが少なからず発生

③古いバージョンのプラグインを狙って、悪意のある方が攻撃

ということが起こる可能性があります。

 

ということで、今回は、SNSのシェアボタン(Twitter / Facebook / LINE)をプラグインなしで設置する方法をご紹介しますね。

SNSのシェアボタンを、プラグインなしで設置する方法

まず完成イメージは、下記になります。

 

コードの記載の前に

①主要なSNSのシェアボタン(Twitter / Facebook / LINE)となります。
(「はてなブログ」や「Pocket」などは含んでおりません)

 

②各アイコンは、公式サイトよりダウンロードしております。
記事の後半に各リンク先を記載します。

 

それでは、コードを記載しますね。

HTML

【 single.php 】などに貼り付けて、使用してください。

<?php
  $url_encode = urlencode(get_permalink());
  $title_encode = urlencode(get_the_title());
  // $title_encode = urlencode(get_the_title()).' | '.get_bloginfo('name');
?>
<ul class="share-buttons">
  <!-- Twitter -->
  <li>
    <a href="https://twitter.com/share?url=<?php echo $url_encode ?>&text=<?php echo $title_encode;?>" target="_blank" rel="nofollow noopener">
      <img src="<?php echo esc_url(get_theme_file_uri('images/logo_twitter.svg')); ?>" alt="">
    </a>
  </li>

  <!-- Facebook -->
  <li>
    <a href="https://www.facebook.com/share.php?u=<?php echo $url_encode ?>" target="_blank" rel="nofollow noopener">
      <img src="<?php echo esc_url(get_theme_file_uri('images/logo_facebook.svg')); ?>" alt="">
    </a>
  </li>

  <!-- LINE -->
  <li>
    <a href="https://social-plugins.line.me/lineit/share?url=<?php echo $url_encode ?>" target="_blank" rel="nofollow noopener">
      <img src="<?php echo esc_url(get_theme_file_uri('images/logo_line.svg')); ?>" alt="">
    </a>
  </li>
</ul>

簡単に説明しますと、各記事のURLを動的に取得し、SNSでシェアできるようにしております。

【 urlencode() 】している理由は、日本語のURLなどが混じると、シェアする時にURLがおかしくなるからです。
(その程度の理解度でよいかと。実際に【 urlencode() 】を外すと分かります。)

CSS

.share-buttons {
  display: flex;
  justify-content: center;
}

.share-buttons li {
  width: 40px;
  margin: 0 10px;
}

.share-buttons li a {
  display: block;
  transition: opacity .6s;
}

.share-buttons li a:hover {
  opacity: .6;
}

公式のロゴのリンク先

Twiiter
https://about.twitter.com/en/who-we-are/brand-toolkit

 

Facebook
https://en.facebookbrand.com/facebookapp/

 

LINE
https://line.me/ja/logo

ロゴを利用する際の注意点

当たり前のことですが、人様のロゴやアイコンを使用する際には、ガイドラインが存在します。

 

まだまだ、お客様のホームページでガイドラインに従わずに、ロゴやアイコンを使用しているホームページも見受けられます。

 

もちろん、今回ご紹介したコードは、ガイドラインに従い作成しておりますが、ガイドラインは随時更新されるため、こまめにチェックしつつ、この記事は更新していきます。

 

もう少しガイドラインに関して知りたい方は、下記の記事が参考になります。

よく使う5つのSNSアイコン・ロゴのガイドラインを紹介します!

 

今回は以上です。

SNSでもご購読できます。

コメントを残す

前の記事

次の記事