SNSのシェアボタンを、プラグイン（）を使用することで、簡単に設置することはできます。
とはいえ、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/
ロゴを利用する際の注意点
当たり前のことですが、人様のロゴやアイコンを使用する際には、ガイドラインが存在します。
まだまだ、お客様のホームページでガイドラインに従わずに、ロゴやアイコンを使用しているホームページも見受けられます。
もちろん、今回ご紹介したコードは、ガイドラインに従い作成しておりますが、ガイドラインは随時更新されるため、こまめにチェックしつつ、この記事は更新していきます。
もう少しガイドラインに関して知りたい方は、下記の記事が参考になります。
よく使う5つのSNSアイコン・ロゴのガイドラインを紹介します！
今回は以上です。
