【WP】Social Share Buttons by Supsysticの導入と使い方
何のひねりもないタイトルですが、ブログにソーシャルボタンを付けたいと思いまして、いろいろ探した結果、「Social Share Buttons by Supsystic」がすごく気に入って、導入してみました。私の探し方のせいかもしれないけど、このプラグインの評判とか全然検索でひっかからなかったので、私が導入した手順を書きますね。
■「Social Share Buttons by Supsystic」いいよ!
私のブログを見ていただければわかると思いますが、記事上は小さくて丸いアイコン、記事下は目立つように四角くて大きいアイコン。そして左にはスクロールしてもついてくる小さいアイコン。「どうかシェアしてください」と言わんばかりのソーシャルボタンのちりばめっぷりですが、アイコンがシンプルでかわいいのでそんなにうざくない(と思ってるんですけどどうなんですか? )。これが1つのプラグインでできちゃうんです。しかも初心者大歓迎な、分かりやすい方法で! あ、「はてブ(はてなブログ)」ボタンはありません。
【私が気に入ったところ】
・アイコンが可愛い
・今流行りの(?)スクロールしても付いてくるアイコンを設置できる
・ショートコードやPHPで好きなところに固定配置もできる
上にも書きましたが、自分が指定して作ったソーシャルアイコンのショートコードとPHPコードをはきだしてくれます。作ったアイコンは1パターンごとにIDが付与されて、複数作って保存しておくことができます。なので、記事上用、記事下用、スクロール用、とそれぞれアイコンを作って、使うことが可能なんですよ。とりあえず、私がWordPress初心者すぎて、説明もうまくできてない気がするので、以下、画像と共にご説明いたします。
■まずは、ダウンロードして有効化
ダッシュボードから「プラグイン」→「新規追加」で「Social Share Buttons by Supsystic」を検索してインストール。そして有効化してください。
■新規でボタンを作成する
ダッシュボートから「Social Share Buttons by Supsystic」→「add new」をクリック。
「Project Name」にお好きなタイトルを入れて「Create」をクリック。
ちなみに、PROバージョンにすると使用できるデザインが増えます。下の画像の「Available in PRO」って書いてあるやつですね。黒ベタのやつとかかっこいい。
でもこちらは“PRO”なだけに有料で、1つのサイトに使用で29ドルかかります。はい、無料でいいです。
■表示したいSNSを選ぶ
いろいろあって、ちょっと後半なんのことかよくわからないので、日本でユーザーが多いやつだけでいいかと。Facebook、twitter、Google+、あと必要な人はPinterestとか。ブックマークに追加とかメール添付とかEvernoteとかもあるので表示したい人はぜひ。
■メインの設定をする
ここから設定に入ります。ちゃんと調べながら解説するのですが、もし間違っていたらすみません。
上図を参考に入力してみてください。私がいじったところは、分かる範囲で書きました。分からないところは触れてません。とりあえず、画面左に出す設定でやってみます。ここまで入力したら、画面右上の「Save」をクリック。
■デザインを選ぶ
設定を保存したら、画面上部の「Design」をクリックします。すると、デザインを設定するページが出ます。
無料でもこれだけ選べるので、満足です。好きなタイプにチェックして、画面右下でデザインの設定をします。
上記の内容を、お好みで設定してください。そして再び、右上の「Save」をクリック。そうすると、ブログにかわいいアイコンが表示されていると思います。
私は、ボタンのアニメーションの中のマークのみがぴょこぴょこって動くやつがかわいくて導入しています。あと、今までに記事をシェアされたことがほとんどないので(かわいそう)、シェア回数は表示していません。いつの日か、たくさんシェアされるようになったら、表示したいと思います。
スクロールについてくるソーシャルアイコンを入れたかっただけの方は、ここまででOKだと思うのですが、アイコンを、記事の上や記事の下に入れたい方はこのあと説明する方法でやってみてください。
■ショートコードとPHPを出す
先ほどの手順でお好みのアイコンのデザインを決めて「Save」したら、「Main」画面に移ります。画面上部にクリックするところがあります。そこで、「
■PHPショートコードをテーマのシートに貼り付ける
今出てきたコードの「PHPコード」のほうを、ご自身のデザインのテーマに貼り付けるのですが、間違えたりするとテーマごとおかしくなっちゃたりするので必ずバックアップをとってから行ってください。
ダッシュボードから「外観」→「テーマの編集」をクリックします。
画面右の「テンプレート」のどこかに「single.php」とか「単一記事の投稿」とか書いてある項目があるので、それをクリック。その中に、先ほど出したPHPコードを貼り付けます。貼り付ける場所ですが、まずは、下記のコードを見つけて下さい。これは書き足すんじゃなくて、もともと書いてあると思います。
1 |
<?php the_content(); ?> |
これが、「投稿記事の内容」を表していますので、記事の上に入れたければ、アイコンのPHPを上記コードの真上に入れてください。生地の下はその逆で、真下に入れます。ちなみに、今の私のブログのように出す場合は、このようになります。
1 2 3 4 5 6 |
<?php echo do_shortcode('[supsystic-social-sharing id="3"]') ?> <?php the_content(); ?> <h4>いいね! と思ったらぜひシェアを。</h4> <?php echo do_shortcode('[supsystic-social-sharing id="1"]') ?> |
ハイライトした3行目を挟んで、記事上に丸いアイコンのコード、記事下に四角いアイコンのコードを入れました。
この応用で、サイドバーやフッターにコードを書き込んで表示することもできますし、どんなときやるか分からないですけど、記事の真ん中にアイコン入れることもできます。
最期に、まだ使ってないのでよくわかってないのですが、このプラグインで、どの記事がどれだけシェアされたかっているデータも見ることが可能です。
画面上部の「Statistic」をクリックするとこんな画面が出ます。もっといっぱいサイトを見ていただけて、シェア数が増えれば活用できてくるかもですが、今のところあまり有効に使える自信がありません。
こういった説明が不慣れなもので、分かりずらいところがあるかもしれませんが、ここに書いた以上の情報や知識を持ち合わせておらずすみません! でも便利だと思ったので、ぜひご活用いただきたく。もしよければ使ってみてください。そして、もしよければ、あ、こんなところにシェアボタンが。
コメントを残す