ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

コピペでOK!ソーシャルボタン設置と追尾方法。プラグイン不要

ソーシャルボタンを指す女性

ブログ・サイトにソーシャルボタンを自力で設置する方法です。いま流行りのスクロールを固定(追尾)する設定方法も紹介します。WordPressの場合はプラグインが不要になりますよ。

ゆめぴょん(@yume_pyon)です。こんちはっ!

ブログやホームページにソーシャルボタンを設置するのは、もはや常識です。そうすることにより、まだ知名度のないブログでもアクセスを増やすことが可能になります。

横型、縦型、カウント数ありなど、いろいろなソーシャルボタンを設置したい場合は、下の記事を参考にしてみてください。7つのSNSのボタンについて書いています。

保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK68 shares

記事にソーシャルボタンを設置することは、もはや必須になりつつあります。良い記事は…

今回の記事はWordPressだけでなく、ブログや一般サイトの全てで利用することが可能です。WordPress以外の方は、次の章だけは飛ばしても問題ありません。

(WordPressの場合)今回、不要になるプラグイン

WordPressの方にとっては「WordPressプラグインはずし特集」の第9弾です。今までの特集記事は全て下のリンクにまとめています。

WordPressで13プラグインを減らして高速化する方法まとめWordPressで13プラグインを減らして高速化する方法まとめ105 shares

WordPressプラグインは便利ですが、多用しすぎると高速化を阻害する要因にも…

今回の記事により、次のようなWordPressプラグインが不要になります。類似のも多いですが、私が使ったものだけ紹介します。

  1. WP Social Bookmarking Light
  2. Sharebar

2つのプラグインや、類似プラグインについては、下の記事を参考にしてください。

WP Social Bookmarking Lightは複数ソーシャルボタン設置のWordPressプラグインWP Social Bookmarking Lightは複数ソーシャルボタン設置のWordPressプラグイン

あなたは新しいブログ記事の更新をどうやって知らせますか。今回は「WP Socia…

Sharebar – WordPressプラグイン – 追尾型ソーシャルボタンを設置 – WordPressの使い方と設定 – Webkaru
ソーシャルボタンを設置するwordpressプラグイン比較 | セブンシックス

主要ソーシャルボタンの設置方法

今回紹介するのは、カウント数付きの縦型(ボックス型)ソーシャルボタンを縦に並べる方法です。横に並べたり、小さなボタンを使ったりしたい場合は、下記事を参考にしてください。

保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK68 shares

記事にソーシャルボタンを設置することは、もはや必須になりつつあります。良い記事は…

今回設置するソーシャルボタンは次のとおりです。あなた好みで追加・削除してみてください。

  1. Twitter
  2. はてなブックマーク(はてブ)
  3. Google+
  4. Facebookページ

スクロール固定(追尾)型ソーシャルボタンの設置コード

下コードをブログ・サイトのソースの好きな場所にコピペするだけです。記事本文の表示を優先するなら、フッター部分などページの下の方に設置した方がいいです。</body>タグの直前でも問題ありません。

WordPressの場合も、テーマファイル「footer.php」の下の方にコピペすればいいと思います。

設置コードの注意点

上コードでは、2ヶ所だけ各自で入力が必要です。

「●●●●」には、自分のツイッターアカウントを入力してください。私の場合は「yume_pyon」です。

「■■■■」には、そのページのurlを入力してください。「http://wispyon.com/test/」のような。WordPressの場合は「<?php echo get_permalink(); ?>」です。

Facebookページの「いいねボタン」は上手く表示されない場合があったため、iframeにしましたが、HTML5版の方が速いので気になる人は変更してください。

また「いいねボタン」だけ枠内のセンタリングも出来なかったので、classを設定して少しだけ右にずらしました。

スクロール固定(追尾)を設定しているのは「position: fixed;」です。これをはずすだけで解除できますが、その場合はheightなどで高さを設定してください。

ブログの記事内に同じソーシャルボタンを2回以上設置する場合は、スクリプトコードを1つにまとめると高速化が期待できます。下記事も参考にしてみてください。

【Webサイト高速化】ソーシャルボタンを1つにまとめるコードを共有するよ【Webサイト高速化】ソーシャルボタンを1つにまとめるコードを共有するよ

記事の中に複数の同じソーシャルボタンを設置している場合、スクリプトをまとめること…

まとめ:今日のゆめぴょんの知恵

今回の記事内容をざっくり言うと。

  • ソーシャルボタンはブログ運営には欠かせない
  • ソーシャルボタンは自力で設置できる
  • WordPressプラグインも不要
  • スクロール固定(追尾)も簡単に設定できる

関連ある記事も参考にしてください。

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【WordPress】新テーマデザインで96点達成!SEO対策・軽量化など7つの特徴をさらします【WordPress】OGPとTwitterCardsの設置方法!プラグイン不要でコピペでOK:次記事»
ページ
↑先頭
ホーム