Cocoonカスタマイズ_SNSボタンについて

たとえば、Cocoonで普通に記事を投稿したら、次のように、
記事の上と下にSNSシェアボタン
記事の下にフォローボタンが表示されます。

たぶん、ほとんどの方が
「そんなもんなんだろうな～」
とあまり深く考えずにそのままにしていたか、
あるいは、SNSボタンの表示を消す方法を見つけて消していたかどちらかではないかと思います。

ここでは、
それぞれのSNSボタンの働き
SNSボタンを消す方法
表示させたまま、あるいは消した方が良いのか
などについても書いていきたいと思います。

SNSシェアボタンについて

Cocoonの場合、デフォルトだとSNSシェアボタンが上下に表示されます。

これは、両方とも非表示にしたり
あるいは下だけ表示させるなどが簡単に出来ます。

SNSシェアボタンの働き

たとえば、SNSシェアボタンのTwitterのボタンをクリックしたら

次のような画面になって、そのままツイート出来る形です。

たとえば、LINEのボタンをクリックしたら

次のような画面になりました。
（私の個人LINEなのでさすがにモザイクをかけていますが）

SNSシェアボタンは必要か？

ここまで見てきたように、
SNSシェアボタンを設置しておくと、訪問者が自分のSNSでシェアしやすくなります。

Twitterのボタンをクリックするだけで

このように、いきなりツイート出来る画面になるというのはいいですね。
あとで説明しますが、ここで自分のTwitterアカウントと関連を持たせて、自分のアカウントのフォロワーを増やすことも出来ます。

このように、シェアボタンクリックでいきなりツイートの画面になりましたが、当たり前ですがTwitterにログインしていない状態ではこうはなりません。

でも、それは大きな問題ではありません。
ほとんどがスマホからのアクセスだと思いますし、そしてスマホだったら皆さんもそうだと思いますが
Twitter、Facebook、インスタなどはアプリで常にログインした状態になってますよね。

ここからは、あくまで私の考えですが・・・
シェアしてくれたらありがたいですし、邪魔にならなければ残しておいてもいいと思います。
ただ、Cocoonでは記事上と下にシェアボタンが表示されますが
記事上のシェアボタンは取ってよいと思います。

記事下であれば、全く邪魔にならないし残しておいても良いと思います。
それにシェアするかどうか決めるのは普通、記事を読んだ後ですからね。

SNSシェアボタンの設定

WordPressのメニューで
Cocoon設定→Cocoon設定
と進んで、SNSシェアをクリック。

開いた画面をよく見て頂くと分かるのですが
トップシェアボタン（記事上に表示されるシェアボタン）
ボトムシェアボタン（記事下に表示されるシェアボタン）
ともに、
表示するかしないか
表示する場合のSNSの種類
表示する場合のボタンのデザイン
など別々に設定することが出来るようになっています。

上から順番に見ていくと

シェアボタンの表示・非表示

記事上のシェアボタンを非表示にする場合は、
メインカラムトップシェアボタンを表示のチェックを外します。

シェアボタンの表示切替

、
つまりどのシェアボタンを表示させるかなんですが、これは何でもいいです。
デフォルトのままでいいと思います。

シェアボタンの表示ページ

次は、シェアボタンをどのページに表示させるかの設定です。

デフォルトでは上のようになっていると思います。
最低限、投稿にチェックが入っていればいいです。

シェアボタンカラー

次は、シェアボタンの色に関する設定です。

モノクロ、ブランドカラー、ブランドカラー（白抜き）から選びますが、それぞれ次のようになります。

カラム数

たとえば次のような感じになりますが

ただ、これはスマホで表示させた場合、表示幅の関係で必ずしもここで設定したようにはなりませんので、適当に設定して下さい。

ロゴ・キャプション配置

ロゴ・キャプション左右、ロゴ・キャプション上下（デフォルト）、キャプション・ロゴ上下から選べますが、それぞれ次のようになります。

シェア数の表示

下は、シェア数表示にチェックを入れた、私のブログからのキャプチャーですが

シェアされていない場合に0と表示されるだけで、かといってシェアされた場合にその件数が表示されるわけでもないので意味がないと思います。

ここは、チェックを外したままにしましょう。

以上の設定を
トップシェアボタン
ボトムシェアボタン
それぞれ別々に行うことができます。

前に書いたように、私は
トップシェアボタンは非表示
ボトムシェアボタンは表示
ということで良いと思います。

シェアボタンと自分のTwitterアカウントとの連携

前に紹介した、Twitterのシェアボタンをクリックするだけで

このようになるのは、ブログに訪問してくれた人がシェアボタンをクリックしたら
訪問者のTwitterアカウントでツイート出来るようになるということで、ここまでだとあなたのTwitterアカウントは関係ありません。

ここに、あなたのTwitterアカウントと関連を持たせる方法です。
これを使うには
WordPressのメニューから
ユーザー→プロフィール
と進んで

この画面で、あなたのTwitterアカウントを指定します。
https://twitter.com/（あなたのTwitterユーザー名）

これで準備は完了です。

それでは、先ほどのSNSシェアの設定画面に戻って、ツイート設定という項目があります。

ここで、ツイートにメンションを含めるにチェックを入れます。
もう一つ、ハッシュタグのところに #エろ動画と入れてみました。

これでシェアしてみると

このようにハッシュタグも入って、さらに自分のTwitterアカウントへのリンク（メンション）がされます。

@(Twitterユーザー名) とツイートすると、そのアカウントにリンクされ、またリンクされた方にも通知が行きます。
それをメンションといいます。

また、#エろ動画と平仮名・カタカナ混ぜるのは、Twitterの凍結対策でよく使われる方法です。

SNSフォローボタンについて

SNSシェアボタンが記事の上下に表示させることが出来たのに対し、SNSフォローボタンは記事の下部だけになります。

もちろん非表示にすることも可能です。

SNSフォローボタンの働き

SNSフォローボタンというのは、自分のSNSをフォローしてもらうためのボタンなので、
WordPressのメニューから
ユーザー→プロフィール
と進んで次の画面でSNSのアカウント情報を入れておかないと意味がありません。

たとえば何も入っていない状態だと

Twitter、インスタグラム、LINE@を入れてあげると

このように表示されます。

Twitterの場合

https://twitter.com/（あなたのユーザー名）

インスタグラムの場合

https://www.instagram.com/（あなたのユーザー名）

LINEの場合

LINE公式アカウントになります。公式アカウントにログインして取得した、友達追加URLを貼り付けます。

SNSフォローボタンは必要か？

SNSフォローボタンをクリックしても、いきなりフォローされるなんてことはなくて
要するに自分のアカウントにリンクが貼られるだけです。

それだけだったら、他でも代用出来ますし、
またスマホで見たときに画面下に表示されるメニュー（フッターモバイルボタン）に入れるという方法もあります。

フッターモバイルボタンの作り方は別項目で解説しています。
また、フッターモバイルボタンであれば、記事内のフォローボタンと違って常に訪問者の目に入るので、その方がいいかもしれません。