【SNSで拡散】『AddToAny Share Buttons』の導入・基本設定

【SNSで拡散】『AddToAny Share Buttons』の導入・基本設定

2018年10月12日 4:00 AM
シェアしてくれたら嬉しいです!!!

SNSの拡散を狙うプラグインとして

『Shareaholic | share buttons, analytics, related posts』

というプラグインを紹介しました。

参考: 【SNSで拡散を狙え】Shareaholic | share buttons, analytics, related posts【簡単導入】

設定も簡単ですし、
簡単に関連記事も作成してくれる高機能なプラグインです。

ただ、

機能が豊富すぎて使いづらい

というデメリットを感じ、

あたらしいプラグインに切り替えることにしました。

『AddToAny Share Buttons』

というプラグインに切り替えたので、
その導入方法と基本設定をご紹介します。

『AddToAny Share Buttons』のインストール

「プラグイン」 > 「新規追加」

プラグインの新規追加

「AddToAny Share Buttons」で検索 > インストール

プラグインのインストール

有効化

プラグインの有効化

設定方法

有効化をすると

「設定」 > 「AddToAny」

という項目が出現します。

設定AddToAny

こちらをクリックして設定を始めましょう。

Standard

Icon Style

icon style

ここでは、
アイコンの大きさやスタイルを決定でます。

私はボタンを目立たせたいので、

60pixels

に変更しました。

Share Buttons

Share Buttons

「サービスの追加 / 削除 »」

をクリックすると、
あなたの使用したいさまざまなソーシャルボタンが出現します。

ソーシャルリンク一覧

あなたが使用したいSNSをクリックして追加しましょう。

私は

・Twitter
・Line
・Facebook

の3つだけを選択しています。

ユニバーサルボタン

ユニバーサルボタン設定

自分が設定したSNSアイコンの右側に表示するものを選択できます。

私はシェアされた数を表示したいので、

「Show count」

にチェックを入れました。

テキストをSNSアイコンの右側に表示したい場合、

「Text Only」

を選択し、
挿入したい文言をいれましょう。

シェア・ヘッダー

シェアヘッダー

ここでは、

SNSアイコンの上に表示する文言を設定できます。

わたしは、

「シェアしてくれたら嬉しいです!!!」

という文言を設定したので、
このように反映されます。

シェアヘッダーのサンプル

ブックマークボタンの場所

ブックマークの場所

SNSアイコンを設置する場所を選択できます。

基本的には投稿ページのみに表示をしたいので、

「投稿の「上部&下部」にボタンを表示」

を選択しました。

上部と下部に表示

その他

メニューのオプション/追加 JavaScript/追加 CSS/追加オプション

などは、
特殊な設定が必要でないかぎり、
なにもいじらなくて結構です。

最後に

「変更を保存」

をクリックすることを忘れないでください。

変更を保存

Floating

ブログのサイドにもSNSボタンを設置したいので、
「Floating」タブの設定も行います。

フローティングSNS

縦ボタン

縦ボタンは、

画面の横幅が981px以上の時

に表示されるSNSアイコンについて設定をする項目です。

ブックマークボタンの場所

縦- ブックマークボタンの場所

ここでは、
縦ボタンをどこに設置するかを決定できます。

私は画面左側に設置したかったので、

「左にドッキング」

を選択しました。

レスポンシブ化

縦ボタンレスポンシブ化

・Hide until page is scrolled 100 pixels or more from the top
・Hide when page is scrolled 100 pixels or less from the bottom

に関しては、
特定の位置までスクロールした場合に、
SNSボタンを見えなくするための設定です。

常時表示したい場合は、
チェックを外していれば結構です。

位置/オフセット/アイコンサイズ/Background

位置

SNSアイコンを、
画面の上部から~~px下の場所に設置するための項目です。

オフセット

「左にドッキング」や「右にドッキング」

を選択した際に、
両端から~~px離れた場所に設置するため項目です。

アイコンサイズ

アイコンのサイズを変更するための項目です。

Background

「Custome」を選択すると、

背景色を選択することができます。

横ボタン

横ボタンは、

画面の横幅が980px以下の時

に表示されるSNSアイコンについて設定をする項目です。

ブックマークボタンの場所

横ブックマークボタンの場所

画面が小さい場合は、
画面中央に表示がしたいので、

「Center docked」

を選択しました。

その他の項目

その他の項目は、
縦ボタンと同様に設定を続けてください。

さいごに

今回は

『AddToAny Share Buttons』

の導入と基本設定について紹介しました。

『Shareaholic | share buttons, analytics, related posts』

がすこし面倒に感じる人は、
ぜひとも今回紹介したプラグインもお試しください。

シェアしてくれたら嬉しいです!!!
公開日:2018/10/12 最終更新日:2018/10/13 タグ:

カテゴリー:

執筆者: みーぷー

コメントを残す

メールアドレスが公開されることはありません。