【Cocoon】SNSボタンの設定方法について詳細解説

今回は『CocoonのSNSボタンの設定方法』について解説していきます。

CocoonのSNSボタンには『SNSシェアボタン』と『SNSフォローボタン』の２つがあり、どちらも簡単に設定することができます。

各設定項目を詳しく解説していきますので、ぜひ参考にしてみてください。

CocoonのSNSボタンの設定方法

動画でも解説しています。

SNSボタンのデザインはスキンで変わる

CocoonのSNSボタンのデザインは、選ぶスキンで変わります。

例えば、当ブログでも使っている『COLORS(グリーン)』のSNSボタンがこちらです。

『Fuwari -海老茶(えびちゃ)-』を選ぶと、このようなSNSボタンになります。

「なんで他のCocoonユーザーとSNSボタンのデザインが違うんだろう？」と思ったときは、このスキン設定をまず確認してみましょう。

SNSシェアボタン

SNSシェアボタンは、読者に記事をSNSで紹介してもらうために設置します。

Cocoonでは『Cocoon設定 ⇒ SNSシェア』で設定していきます。

なお、CocoonのSNSシェアボタンには『トップシェアボタン』と『ボトムシェアボタン』の２つがあり、それぞれ設定する必要があります。

【トップシェアボタンの設定】

【ボトムシェアボタンの設定】

『トップシェアボタン』と『ボトムシェアボタン』それぞれ設定する必要はありますが、設定する項目はほぼ一緒なので、まとめて解説していきます。

シェアボタンの表示

【トップシェアボタンの表示】

【ボトムシェアボタンの表示】

こちらにチェックを入れるとSNSシェアボタンが表示、チェックを外すと非表示なります。

別々で設定できるので、当ブログではトップを非表示、ボトムを表示にしています。

シェアメッセージ

『シェアメッセージ』はボトムシェアボタンの上に表示させるメッセージです（トップシェアボタンには設定できません）

不要な場合は、空欄にしてメッセージを削除することも可能です。

表示切替

『表示切替』では、表示させるボタンを以下の９つから選択できます。

なるべく自分のブログの読者が利用しそうなボタンを選びましょう。

表示ページ

『表示ページ』では、SNSシェアボタンを設置するページを以下の５つから選択できます。

通常ブログ記事は『投稿』で作成しますので、『投稿』にはチェックを入れておきましょう。

ボタンカラー

『ボタンカラー』では、以下の3種類からボタンのデザインを選択できます。

【モノクロ】

【ブランドカラー】

【ブランドカラー（白抜き）】

なお、当ブログではブランドカラー（白抜き）を使っています。

カラム数

『カラム数』では、SNSボタンを横並びで設置する数を設定します。

【3列にした場合】

【6列にした場合】

『表示切替』で選択したボタンの数も考慮しながら、バランスの良いカラム数を選択してください。

ただし、スマホでは画面サイズの影響で表示が変わることもありますので、スマホ表示も必ず確認しておきましょう。

ロゴ・キャプション配置

『ロゴ・キャプション配置』では、SNSのロゴと名称の配置を以下の３つから選択できます。

【ロゴ・キャプション 左右】

【ロゴ・キャプション 上下】

【キャプション・ロゴ 上下】

こちらはお好みで選択してください。

シェア数の表示

『シェア数の表示』にチェックを入れると、以下のようにシェアされた数が、ボタンの右下に表示されます。

ただし、シェアされていないと『0』と表示されてしまうため、人気がない記事と思われてしまう可能性もあります。

また、TwitterやLINEなど、SNS側の仕様でシェア数が表示されないものもありますので、その点は理解しておきましょう。

SNSフォローボタン

SNSフォローボタンは、読者に自分のSNSをフォローしてもらうために設置します。

Cocoonでは『Cocoon設定 ⇒ SNSフォロー』で設定していきます。

なお、SNSシェアボタンは本文の上下に設置可能でしたが、ここから解説するSNSフォローボタンは本文の下のみ設置可能となっています。

フォローボタンの表示

SNSフォローボタンを表示させるには、こちらにチェックを入れます。

なお、必須ではありませんので、不要な場合はチェックを外して非表示にしても構いません。

フォローメッセージ

『フォローメッセージ』には、SNSフォローボタンの上に表示させるメッセージを入力します。

『#{author}』と入れると、投稿者名が入力されますが、不要なら削除しても構いません。

また、フォローメッセージ自体が不要な場合は、削除して空欄にすることも可能です。

SNSサービスのURL

『SNSサービスのURL』は、WordPress管理画面の『ユーザー ⇒ プロフィール』で入力します。

こちらで入力したSNSサービスのフォローボタンは、このように表示されます。

SNSのフォロワー数を増やしたい方は、こちらの入力を忘れずに行いましょう。

表示ページ

『表示ページ』では、SNSフォローボタンを設置するページを以下の５つから選択できます。

SNSフォローボタンを設置する場合は、少なくともブログ記事を書く『投稿』にはチェックを入れておきましょう。

feedlyの表示

feedlyはRSSを利用してブログの更新通知を受け取るサービスで、RSSリーダーの中では最も人気です。

『feedlyの表示』にチェックを入れると、左側の緑色のボタンが表示されます。

RSSの表示

Cocoonでは、feedly以外のRSSサービス利用者のために、RSS取得用ボタンを表示させることもできます。

『RSSの表示』にチェックを入れると、右側のオレンジ色のボタンが表示されます。

ボタンカラー

『ボタンカラー』では、以下の3種類からSNSフォローボタンのデザインを選択できます。

【モノクロ】

【ブランドカラー】

【ブランドカラー（白抜き）】

デフォルトユーザー

複数人でブログを運営している場合、投稿・固定ページのSNSフォローボタンは、投稿者のSNSが設定されます。

こちらの『デフォルトユーザー』では、カテゴリーやタグページにSNSボタンを設置した場合、フォローボタンに誰のSNSを設定するかを選択します。

カテゴリー・タグページにSNSフォローボタンを設置しない場合や、一人でブログを運営している場合は、特に気にする必要はありません。

しかし、複数人で運営している場合は、メインとなる管理者を設定しておくと良いでしょう。

フォロー数の表示

『フォロー数の表示』にチェックを入れると、SNSフォローボタンにフォロー数が表示されます。

しかし、フォロワーがいない場合は『0』と表示されます。

また、TwitterやYoutubeのように、SNS側の仕組みでフォロー数が表示されない場合もあります。

feedlyの購読者数

先に解説した『フォロー数の表示』にチェックを入れても、feedlyの購読者数は正確に表示されない場合があります。

その際はこちらの『feedlyの購読者数』に数値を入れることで、フォロー数を表示させることができます。

【最後に】当ブログで行っている設定方法

今回は『CocoonのSNSボタンの設定方法』について解説してきました。

最後に当ブログで行っているSNSシェアボタンの設定をご紹介します。

この下に表示されているSNSシェアボタンと同じ設定にしたい方は、上記の設定を参考にしてみてください。

なお、このブログではSNSフォローボタンは非表示にしています。

SNSフォローボタンはプロフィールにも表示されるためですが、こちらも同じように設定したい方は、プロフィール設置の解説記事も合わせて参考にしてみてください。

Cocoonでプロフィールを設置する方法！画像が表示されない時の対処法も解説

「Cocoonでプロフィールを設置したい」と思っても、どこで設定したらいいのか分からないですよね？今回は『Cocoonでプロフィールを設置する方法』を分かりやすく解説していきます。設定方法は非常に簡単ですし、一度設定しておけばずっと表示されますので、ぜひ参考にしてみてください。

sattoga.com