A-key function 大学生が始めるべきネットビジネス起業

大学生のうちに始めるべきネットビジネス・資格などを紹介してます。

wordpressでsharebarを設置する方法【記事の横に追尾のSNSボタンを設置しよう】

      2016/02/23

費用:0円 時間:20分

ネットビジネス化したいなら、SNSでバイラルに・・・って思いますよね。

ということで、

今回はwordpressで簡単に追尾型のSNSボタンウィジェットを追加する方法を紹介しようと思います。

結果としては以下のようになります。

結果

やり方は、sharebarというpluginを利用します!

わざわざ、コードを挿入する必要もないですし、簡単ですよ。

sponsored link

1.sharebarをインストール・有効化しよう

wordpress管理画面からプラグイン>>新規追加から以下のプラグインをインストールしましょう。

sharebar

プラグインの有効化をしましょう。

プラグイン

これで、もうサイドバーにSNSボタンが実装されます。

実際

でも、このままだと変だよね。大きさもおかしいし、マージン(隙間)もないし。ということで修正しましょう!

2.設定

wordpress管理画面>>設定>>sidebarを開きましょう。

設定

必要なSNSのボタンの種類や順番などを設定しましょう。

ボタンこれは要らないって場合は、deleteしましょう。

新しく増やしたい場合は、Add New Buttonをクリックしてコードを描きましょう。

google+のイイねボタンは +1botton から作れます。

シェアボタンは share からつくれます。

まあ、二つで迷ったら、イイねボタンにするのもイイね。

ちなみに、ボタンの上に数が表示される形式はバルーンといいます。既定ではインラインとなっているので変更してみましょう。

大事なのは、smallとbigの2パターン作っておく必要があるということです。

より細かくいうと、生成されたコードの専販部分の以下の段落は、head 内か、body 終了タグの直前に次のタグを貼り付けてくださいという指示に従いましょう。

<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 --> <script src="https://apis.google.com/js/platform.js" async defer> {lang: 'ja'} </script>

そして残った部分をボタンのコードとして書き入れましょう。こんな感じです。

google
次にウィジェット自体の設定をしましょう。

上にある、settingsをクリックしましょう。

setting

add sharebarの項目はそのままでもおkです。

Display Option

まあ、実際に見ながら調整しましょう。

位置

costomize

ウィジェットの大きさなどをせっていしましょう。

twitterのサイトアカウントなどがあれば、twitter User nameに登録しておきましょう。

カスタマイズ

これで完了です。update Settingsをクリックして設定を終わりにしましょう!

ということで、たぶん実装できたかな?

しかし、まだ問題があります!

facebookボタンのsmallバージョンなんですが、イイねボタンを押すとコメントボックスが綺麗に表示されません・・・それに確認って表示されます・・・

monndai

その場合は、wordpress管理画面>>外観>>テーマの編集のstyle.cssの部分に以下のコードをコピペしましょう。

.fb-like iframe {
    max-width: none;
}

俺が作っているmaturistというサイトで使っているので実際に見てみてくださいね(^◇^)

 - サイト作成 , ,

adsen

adsen

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事