ブログ 資産作り

【超初心者でもわかるAffinger6】SNSシェアボタンの簡単設置方法～ツイッターやフェイスブックでの拡散を促そう～

2023-02-06

ブログを拡散してもらいやすくするために必須のSNSシェアボタンを設置する方法です。
SNSシェアボタンは読者が「この記事を保存したい、シェアしたい」と思った時に便利なだけでなく、
自分のSNSにリンクを貼って自己拡散する時も使えます。
このボタンをまだ設置していない方は、この記事を読んで早速設置していきましょう。

SNSシェアボタンは、ワードプレスを使い始めたばかりで知識ゼロの超初心者にこそおすすめの
Affinger6を使って超簡単にボタン設置することができます。

Affinger6の導入手順については別の記事で専門用語なしで細かく解説していますので
こちらも参考にしてください。
【超初心者でもわかる】Affinger6テーマ インストール方法を徹底解説

ＳＮＳボタン設置方法は３通り→おすすめは絶対③。

SNSボタン設置方法その１：コードを書き、サイト設定に埋め込む


　最も基本的なやり方ですが、コードを書けるような方はこの記事を読んでいないと思います。
　　
　具体的な手順は以下のような感じですが、もう単語すらわからない方も多いはず。
　でもご安心ください。それで全く問題ありません！

この手順はざっと斜め読みで「こういう感じのやつが基本なのね、知らんけど」くらいの認識でＯＫ。
　このめんどくさそうな感じがわかるだけで、Affingerを使う価値を感じられるはず。

【手順1】
SNSボタンについての基本設定コードを書いたsns.phpを作成する

【手順2】
書いたコードをheadタグに追加

【手順3】
CSSスタイルシートに追加してデザインを調整する

【手順4】
記事のシートに調整後のコードを追加する

めんどくさすぎ！無理！

ですよね～。この手のやつは追々覚えていけばよいとして、今はこの方法はやめときましょ。

コードとは、こんな感じのやつ！
　↓
<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>
<div class="share">
<ul> 
    <!--ツイートボタン-->
    <li class="tweet">
    <a href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
      <i class="fa fa-twitter"></i><span> tweet</span>
    </a>
    </li>
</ul>
</div></php>

※これでツイッター分だけです。

SNSボタン設置方法その２：プラグインを使う


　プラグインは、ワードプレスの機能を追加できるもので、スマホで言うところのアプリのようなもの。
　

【手順1】
　ＳＮＳボタンを設置するためのプラグインをインストールする.
【手順2】
　プラグインの管理画面で設定を行う。

　手順としては比較的簡単。
　しかし、スマホアプリ同様にプラグインを入れすぎるとサイトが重くなり、
　ページ表示のスピードが下がってしまたり、プラグインを通じてセキュリティ上のトラブルが発生することも。
　
　特にページ表示のスピードが下がことは読者へのストレスとなり、
　閲覧数が減少するなどのサイトパフォーマンスに悪影響を及ぼすので
　プラグインはむやみに増やすべきではありません。
　
　プラグインに頼らずに解決できることは、できるだけ本体機能を使いたい。スマホと同じですね。
　

SNSボタン設置方法その３：ワードプレスのテーマを使う【これが正解！】

数あるワードプレステーマ（テンプレートのようなもの）の中で、
ＳＮＳシェアボタンの設置もテンプレ化されているものがあります。

こちらの記事↓で初心者ブロガーにおすすめしている二つのテーマはどちらもSNSシェアボタン機能搭載。

【超初心者向け】ワードプレスのテーマ選びは二択！CocoonかAffingerで間違いない理由を解説

　
　私も使っているAffinger6でSNSシェアボタンを設置する手順を説明していきましょう。

Affinger6でSNSシェアボタンの設置は超簡単！

※まだAffingerを導入していない方はこちらの記事も参考にしてください。
　【超初心者でもわかる】Affinger6テーマ インストール方法を徹底解説

Affinger6でのSNSシェアボタン設置方法

操作が必要なのはたった一画面だけ。このページに必要なチェックを入れていくだけで簡単にSNSシェアボタンが設置できます。

①ダッシュボード左メニューの「AFFINGER管理」をクリック。

②「SNS/OGP」をクリック。

③SNSボタンの色合いと形状を選ぶ。（チェックを入れ替えると右図のように変化します。）

④SNSシェアボタンを設置する場所を指定する。

※デフォルトの設置場所は記事の真下。こんな感じ↓

投稿ページの上に表示を選ぶと、タイトルとアイキャッチ画像の間にもSNSボタンが入ります。こんな感じ↓

⑤シェアボタンを設置したいSNSの種類を選ぶ。

　ここでは、”表示したくないSNS”にチェックを入れてください。

⑥最後にページ最下部にある「Save」をクリック。

　これで設定が完了です。

　簡単！

良くありそうな質問
Q：ツイッター、フェイスブック、Pinterest、はてなブログ、Pocket、LINE以外のSNSボタンは入れられないの？
A：2023年2月現在のAffinger6のテンプレでは上記のSNSしか設定がありません。※今後の更新で増える可能性はあります。
これ以外のSNSシェアボタンを設置したい場合には、コードを自分で書くか、プラグインを利用するか・・・。
Q：ボタンの色を「優しい色にする」にしたけど、あんまり優しくない…。もっと色を調整できませんか？
A：できますよ！この記事で紹介した「Affinger管理」の画面では色調整は“優しく”までが限界ですが、左メニューの「外観」→「カスタマイズ」で色の微調整が可能です。この「外観」→「カスタマイズ」の機能はまた別の記事で紹介していきたいと思います。

さいごに

いかがでしたか？

記事の執筆のための時間をしっかり確保するためにも、ブログの基本設定はAffingerの便利機能を有効に使いこなしていきましょう♪

人気記事一覧

-ブログ, 資産作り
-, ,