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

【Webサイト高速化】SNSソーシャルボタンをあと読み設定する方法とコードを紹介

速度アップ!ダージリン鉄道

ソーシャルボタンの読込みには時間も負荷もかかるため表示をあと読みにしました。すると体感速度がアップ。今回は表示速度の高速化第2弾としてソーシャルボタンの後読みの設定方法について共有したいと思います。

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

ブログやサイトにソーシャルボタンを設置するとシェアしてもらえる場合もあるので最近は必須です。普通の設置方法は下の記事を見てください。しかし毎回の読込みに時間がかかり、ページ表示速度も遅くなりがちなのが悩みでした。

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

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

WordPressで作成したブログにプラグインで設置する方法
WP Social Bookmarking Lightは複数ソーシャルボタン設置のWordPressプラグインWP Social Bookmarking Lightは複数ソーシャルボタン設置のWordPressプラグイン

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

WordPressサイト高速化でSEO対策!17の表示速度アップ術WordPressサイト高速化でSEO対策!17の表示速度アップ術17 shares

ブログ表示速度の高速化についてはいろいろ書いてきました。今後は表示速度が遅いとG…

Pocketボタンは後読みできないので通常どおり設置

いろいろ試してみましたが「Pocket」ボタンについては後読みがうまく機能しませんでした。ググってみたけど他のブログでも「Pocket」ボタンだけは成功してなかったり。もし何か方法を知ってる人はぜひ教えてください。

ソーシャルボタンを設置する場所に書くタグ

設置場所には次のように記述してください。重要なのは1行目の「class=”social_btn”」です。classをidに変えたり、値の変更は可能ですが後ほど。「Pocket」ボタンが必要ない場合は2行目は削除してください。

ソーシャルボタンあと読みのソースコード

下のソースコードをフッターや</body>タグの直前などに記述してください。ただし1〜2行めの「Jquery」については他の箇所で読み込んでいるなら削除可能です。重複のないように注意してください。

はてなブックマーク、Google+、ツイッター、Facebookのソーシャルボタンを分けて記述してるので、不要なものは削除可能だし、好きなように並べ替えても大丈夫です。削除やソートは23行目を書き換えれることも忘れずに!

次の点にも注意して設置してください。

  • 10行目「only@2x.png」の「@」(アットマーク)を必ず半角に書換え
  • scriptの終了タグはエスケープする(「\」をつける)
  • ボタン設置コード内には「’」でなく「”」(ダブル)を使う
  • 23行目の$(‘div.social_btn’)を変更すれば、上のclass値も変更可能
  • 24行目の「,3000」は3秒を表す。5秒後にあと読みするなら5000
  • Twitter、Facebookボタンには自分で書き換える場所が1箇所づつある
  • 今回はボックス型のソーシャルボタン。変更は可能

普通のブログやサイトにソーシャルボタン後読みを設置する方法

WordPressでブログを作成してる人は、ここは飛ばして次の項目を読んでください。WordPressを利用せず普通のブログやサイトを作成してる人はこちらのコードを設置してください。

WordPress作成のブログにソーシャルボタン後読みを設置する方法

以下のコートはテーマファイルに書く必要があります。テーマファイルがわからない人は、まずWordPress管理画面から「外観」→「テーマ編集」を選択。右のファイルメニューから「footer.php」を選び、</body>タグの直前に下のコードをコピペして保存すればOKです。

テーマファイルはWordPressで最も重要なファイルの1つなので、修正を加える前には必ずバックアップをとってくださいね。そして問題が起こったらすぐに元に戻してください。修正は自己責任でお願いします。

全てのページでソーシャルボタンを表示するなら、フッター「footer.php」の</body>タグの直前に下のコードをコピペ。

ソーシャルボタン設置が記事ページのみの場合は「single.php」や「content.php」の最終行にでもコピペしてください。またわかる人なら条件分岐で設置してもいいと思います。

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

以上でソーシャルボタンの後読み設定が完了しました。今回のソースコードは次のブログを参考にしました。ありがとうございます。

Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め!

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

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

«前記事:【Webサイト高速化】無料CDNのCloudFlare設定方法と登録結果を共有DB Cache ReloadedとHyper ResponseプラグインでWordPressブログ高速化:次記事»
ページ
↑先頭
ホーム