ソーシャルボタンを簡単にサイトやブログに設置する方法

WEBサイト制作やブログ制作に詳しい人なら既にご存じの方もいらっしゃると思いますが、「忍者ツール」さんが、自分のサイトやブログに簡単にいろんなソーシャルと連携したボタンを簡単に設置できるサービスページがありますので、今回はこちらをご紹介します。

最近、検索上位に引っかかるブログやサイトには必ずといっていいほど、ソーシャルサイト等のボタンがついていますね。
大手のブログサイトを利用している場合は、最初から付いている場合もあるので来にしていない人も多いかも知れません。
自分でWordPressを利用したり、このサイトのようにCMSをカスタマイズしている場合は、自分でプラグイン等で設置しなくてはなりません。

FacebookやTwitterなどそれぞれのソーシャルネットサイトが提供してくれるコードの書出を利用するのが普通なのですが、最近、簡単に複数のボタンを設置できるサービスがあったので紹介しておきます。

『忍者ツールズ』というサイトの「おまとめボタン」という機能

上記のサイトで簡単に複数のソーシャルボタンが設置できます。
「忍者ツールズ」にまだ登録したことがない人は無料で登録できるのでしておくとその他にもいろんな便利ツールがあるのでいろんな機能を使ってみましょう！

登録IDがあれば、上記のページ（「忍者ツールズ」のトップページからの場合は複数あるサービスの中から「おまとめボタン」を選ぶと移動します）で簡単に設置

3通りのボタンが並んだチェックボックスがありますが、自分で好きなソーシャルネットと画像の種類を選んで設置することができます。その場合は「設置ボタンを1つずつ選択して作成」のボタンを押します。

上記のような設置するブログ等を選択するページに移動しますので、ソーシャルサイトボタンを設置したいブログを選びます。
※私のこのブログの場合はここに記載されていないCMSなので「その他のホームページ」を選びました。

上記のようなボタンデザインを選べるページに移動します。
左にあるソーシャルサイトの種類別名称部分にマウスを乗せるとメニューが出てきますので、そこで挿入したいソーシャルサイトを絞り込めば、設置ボタンを探しやすくなります。

複数のソーシャルボタンを並べる場合は、サイズ、デザインを共通なものになるよう意識して選んでいく必要があります。

選んだ画像はページの下に追加され表示されていきます。

RSSリーダーのボタンでGoogleリーダーを選ぶと下記のようにRSSで読み込むURLの表示になりますので自分のブログページのRSSアドレスを入力します。

ソーシャルボタンを選んだら右下の「プレビュー＆コードを取得する」ボタンを押します。

コードが書き出されるので「コードをコピーする」をクリックしてコードをコピーし、ブログの設置したい箇所にこのコードを貼り付ければ完了です。
 

WordPressの場合はプラグインを使用する方法で設置することをおすすめします。

プラグインPostPostを使う

コピーしたコードをどこに入れるかですが、WordPressの場合プラグインである「PostPost」を使用します。

WordPress Plugin: PostPost | Marketing Technology Blog
PostPostというブラグインは定型文を入れたい場所に設置できるプラグインです。上記リンクからダウンロードしてWordPressにアップロードしてから「有効化」します。

WordPressのダッシュボードの設定からPostPostを選択します。

「おまとめボタン」を記事の前に置くか、後ろに置くかを選択します。
記事の後ろに置きたい場合は「After Every Post:」を選択します。

「Add」をクリックすると取得したコードを貼付けできる枠が表示されるので、そこにコードを貼り付けます。

設置後PostPostのコードを変更が必要な場合について

このままPostPostを使用し、ブログに「続きを読む」を使用しているとトップ画面でも、その下にも表示されるようになってしまいます。「続きを読む」を使用している人は以下の方法で回避しましょう。

修正コード

if(is_home()) {
return $content;}

上記コードを追記すればOK!

以上です。

 

「忍者ツールズ」の「おまとめボタン」でソーシャルボタンを設置した場合は下記のように表示されました。