ワードプレスシェアボタンをコピペ設置、プラグイン無し

2023年08月16日

本日はワードプレスSNSのシェアボタンをプラグイン無しで、厳選した４種のSNSのシェアボタンの設置方法をご説明させていただきます。

シェアボタンいるの？
どのシェアボタンを設置したらいいかわからない
記事は若干いい加減でもいい
少しでも為になれば

SNSシェアボタンいるの？

設置の前にシェアボタンについて調べてみました。
設置方法のみご覧になりたい方はページ下部にありますのでこちらをクリックしてください。

シェアボタンは

「なんとなく入れていた方がいいでしょ」

と思っていましたが、少し反対意見もあり勉強になりましたので共有させていただきます。

シェアボタンメリット

最大のメリットはやはり、バズる可能性があがることですね。シェアボタンを設置してシェアしやすくすることで、拡散する可能性が少し上がり、バズる可能性も少し上がります。この少しが重要で確率を少しでも上げるということはとても重要ですね。

とてもいいメリットですよね。

シェアボタンデメリット

デメリットの代表格はぺージの表示速度が遅くなるでした。
ほかには、そもそも見ている方がシェアボタンをほぼほぼ利用していないとか、ブラウザの共有機能で十分とか、ボタンなくてもシェアできる的なこともありました。
そのほかにはデザインがくずれるや、シェアボタンをたくさん置くと、却って見ているユーザーのストレスになるなどでした。

マリオ君の結論

様々の方の意見を調べてみて、検討した結果マリオ君はシェアボタンを

設置いたします。

メリットのバズる可能性があるは、確率が少なかろうがチャンスが上がるならやった方がいいですね。

また、デメリットの件ですが、ページの表示速度が遅くなる件とデザインが崩れる件はプラグインを使用しなければ問題をクリアできるんじゃないかと思います。自作だとただのリンクボタンが数個増えるだけですし、デザインもサイトにあったボタンを設置することができます。

シェアボタンをたくさん置くと、却って見ているユーザーのストレスになるは、作り手側からすると上とかサイドバーとか複数個所入れたくなりますが、いろいろな意見を反映してシンプルに1箇所にのみ設置なら問題なさそうですね。

調べるとどこに設置したらいいかとかもありましたが、記事の末尾がシェアされる確率が高いようなので、文末に入れてみます。

１箇所にだけ、シンプルに文末にシェアボタンを設置

設置方法完全コピペ

コードは下記になります
aタグの中はお好きな画像又はテキストをお入れください。コード自体はワードプレスのsingle.phpなどにそのままコピペで使えます。

ツイッター（エックス）シェアコード

<a href="https://twitter.com/intent/tweet?text=<?PHP the_title();?>&<?php echo get_permalink()?>&url=<?php echo get_permalink()?>" target="_blank" rel="nofollow noopener">ツイッター・Xでシェア</a>

ラインシェアコード

<a href="https://line.me/R/msg/text/?<?php echo get_permalink()?>" target="_blank" rel="nofollow noopener">LINEでシェア</a>

はてなブックマークシェアコード

<a href="https://b.hatena.ne.jp/add?mode=confirm&url=<?php echo get_permalink()?>&title=<?PHP the_title();?>" rel="nofollow noopener" target="_blank">はてなブックマークでシェア</a>

フェイスブックシェアコード

<a href="https://www.facebook.com/share.php?u=<?php echo get_permalink()?>" rel="nofollow noopener" target="_blank">フェイスブックでシェア</a>

上記をsingle.phpなどの投稿記事に貼り付ければ完了です。

上記でシェアするにあたり、ogp設定も合わせてやっておくと、画像やタイトルがわかりやすくシェアされますので、ogp設定もやっておくのがおすすめです。

下記にogp設定について記事にしておりますので気になる方はご覧ください。

LINEトークでホームぺージサムネ画像表示

マリオ君シェアボタン見本コード

最後にマリオ君の見本コードです。マリオ君は各SNSボタンは画像（SVG）で制作して作っています。
HTMLはこんな感じでリストで表示しています。

<ul class="sharebtn">
	<li>
		<a href="https://twitter.com/intent/tweet?text=<?PHP the_title();?>&<?php echo get_permalink()?>&url=<?php echo get_permalink()?>" target="_blank" rel="nofollow noopener"><img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/sns_share01.svg" alt="ツイッター・Xでシェア"></a>
	</li>
	<li>
		<a href="https://line.me/R/msg/text/?<?php echo get_permalink()?>" target="_blank" rel="nofollow noopener"><img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/sns_share02.svg" alt="LINEでシェア"></a>
	</li>
	<li>
		<a href="https://b.hatena.ne.jp/add?mode=confirm&url=<?php echo get_permalink()?>&title=<?PHP the_title();?>" rel="nofollow noopener" target="_blank"><img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/sns_share03.svg" alt="はてなブックマークでシェア"></a>
	</li>
	<li>
		<a href="https://www.facebook.com/share.php?u=<?php echo get_permalink()?>" rel="nofollow noopener" target="_blank"><img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/sns_share04.svg" alt="フェイスブックでシェア"></a>
	</li>
</ul>

CSSは

.sharebtn{
	
	display: flex;
	justify-content: flex-end;
	
	li{
		
		width: 25px;
		margin: 0 0 0 10px;
		img{
			width: 100%;
		}
	}
}

フレックスでリストを横並びにして、フレックスエンドで右端ぞろえにしています。

ちなみに何が厳選４種かというと、特に意味はなく、他のサイトにはPocketやFeedlyも入れられているサイト様が多数ありましたが、あまり私が知らないので外しました。

また、ほかのサイトより少なくすることで、少し厳選してこだわってる感を演出したいので、４種にしております。

以上がワードプレスで厳選４種のシェアボタンをプラグイン無しでコピペで設置するでした。