軽いSNSボタン表示で高速化を図る~WordPress

snsbutton


 ソーシャルボタン(SNSボタン)をサイトに掲載するのであれば、皆様も見慣れている公式の物が一番良いとは思うのですが、どうしても各個の読み込みが遅くて、ページ全体の表示時間に影響を及ぼします。
 特に「いいね」が何人だとかの数字を表示するにも、いちいち読込しなくてはならいなので、快適なページ表示に影響します。
 もちろん「広告画像」も読込しますので、表示が遅くなる原因の1つなのですが、広告を外すわけにはいかないので、今回、思い切って、SNS表示を全面変更してみました。

 先駆者の方がいろいろとチャレンジなさっておられましたので、その中から、自分でもできそうな方法の物で、尚且つレスポンシブ(スマホ/PC)対応になるものとして導入したのが、下記の方法です。
 古いSNSが表示されている部分のphpと、cssの2ファイルの書き換えだけで可能な方法でした。
 また、プラグインやimgファイルは使いませんので、負荷も最低限と言うか、まさに「エコ」です。

phpのコード

 phpのコードは下記です。
 下記のソースを、通常のWordPressテーマでしたら、single.phpのSNSボタン表示部分を、下記のソースに変更します。
 私が使用しているこのテーマでは、SNS用のphpがありまして、そのphpファイルの中身を変更する方法となりました。
 WordPressの「管理画面」から「外観」→「テーマの編集」から、SNSが記述されているファイルを変更します。
 慣れていない方は、失敗した時に備えて、バックアップなど、元にファイルに戻せる準備をしてから、書き換えて下さい。

<!新SNS、CSSカスタムと共に設置!>
<a class=”facebook-iine” href=”http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&amp;t=<?php the_title(); ?>”
onClick=”window.open(encodeURI(decodeURI(this.href)),
‘sharewindow’,
‘width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!’
); return false;”>
Facebook<br>シェア</a>

<a class=”twitter-tweet” href=”http://twitter.com/intent/tweet?text=<?php the_title(); ?> <?php the_permalink(); ?> &via=houjyoutan
onClick=”window.open(encodeURI(decodeURI(this.href)),
‘tweetwindow’,
‘width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!’
); return false;”>
twitter<br>ツイート</a>
<a class=”pocketbtn” href=”http://getpocket.com/edit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>” onclick=”window.open(this.href, ‘PCwindow’, ‘width=550, height=350, menubar=no, toolbar=no, scrollbars=yes’); return false;”>Pocket<br>保存</a>

<a class=”hatenabtn2″ href=”http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>”>はてな<br>ブックマーク</a>

<a class=”gplusbtn” href=”https://plus.google.com/share?url=<?php the_permalink(); ?>” onclick=”window.open(this.href, ‘Gwindow’, ‘width=650, height=450, menubar=no, toolbar=no, scrollbars=yes’); return false;”>Google+<br>シェア</a>

<a class=”feedlybtn” href=’http://cloud.feedly.com/#subscription%2Ffeed%2Fhttps://wpxaf.com/feed/‘ target=’blank’>Follow on Feedly</a>

 

赤色の部分は、あなたのTwitterアカウントに変更して下さい。
@マークは不要で、アカウント名だけで大丈夫です。
青色部分は、あなたのサイトのRSSのURLに変更してください。

CSSファイルに追加

 下記がSNSボタンを表示する為のCSSです。
 フォントサイズやpx数など、細かな点は微調整してみると良いでしょう。
 なお、既存のCSSファイルに下記のソースを追加すると干渉して、サイトの表示そのものが破壊されてしまう恐れもありますので、既存のCSSファイルをいじるのはキケンです。
 そのため、Jerpackのプラグイン「Jetpack by WordPress.com」を使用している方は、先に、Jetpcak→「設定」→「カスタムCSS」の欄を「有効化」にすると良いです。
 有効化できると、ワードプレスの管理画面の「外観」の中に「CSS編集」と言う項目が追加されます。
 その「CSS スタイルシートエディター」の中に、下記のソースをコピペして「保存」を押せば、このカスタムCSSを優先して読込、既存のCSSを変更することなく、対応できます。

/* 新型SNS表示用CSS */
a.facebook-iine {
width: 33%;
padding: 20px 0;
color: #fff;
text-align: center;
background-color: #3b5998;
height: 25px;
display: block;
text-decoration: none;
font-size: 15px;
float: left;
margin-bottom: 5px;
}

a.facebook-iine:hover {
background-color: #6277a1;
}

a.twitter-tweet {
width: 33%;
padding: 20px 0;
color: #fff;
text-align: center;
background-color: #00acee;
height: 25px;
display: block;
text-decoration: none;
font-size: 15px;
float: left;
margin-bottom: 5px;
}

a.twitter-tweet:hover {
background-color: #6aafca;
}

a.pocketbtn {
width: 34%;
padding: 20px 0;
color: #fff;
text-align: center;
background-color: #EF3E56;
height: 25px;
display: block;
text-decoration: none;
font-size: 15px;
float: left;
margin-bottom: 5px;
}

a.pocketbtn:hover {
background-color: #f79eaa;
}

a.hatenabtn2 {
width: 33%;
padding: 20px 0;
color: #fff;
text-align: center;
background-color: #568BCA;
height: 25px;
display: block;
text-decoration: none;
font-size: 15px;
float: left;
margin-bottom: 5px;
}

a.hatenabtn2:hover {
background-color: #6277a1;
}

a.gplusbtn {
width: 33%;
padding: 20px 0;
color: #fff;
text-align: center;
background-color: #DD4B39;
height: 25px;
display: block;
text-decoration: none;
font-size: 15px;
float: left;
margin-bottom: 5px;
}

a.gplusbtn:hover {
background-color: #E05D4C;
}

a.feedlybtn {
width: 34%;
padding: 20px 0;
color: #fff;
text-align: center;
background-color: #70CA3B;
height: 25px;
display: block;
text-decoration: none;
font-size: 15px;
float: left;
margin-bottom: 5px;
}

a.feedlybtn:hover {
background-color: #9ad975;
}

 動作確認は必ず行ってくださいね。
 失敗しているときは、元のファイルをアップすれば、復元できるはずです。

 なお、当方ではこのサイトに明記しているカスタマイズ方法の有償サポートも行っております。

 上記でご紹介したSNSボタンは、実際にこのページでも使用していますので、ページの下の方をご覧願います。

 今回は、今どきのフラットなソーシャルボタンをWordPressに実装したのでソースコードを公開!さんの情報を参考にさせて頂きました。ありがとうございました。



閲覧ありがとうございます。ご参考になりましたでしょうか?
  • 普通だった 
  • 参考になった 
  • すごく良かった 




5万文字以上のブログ収入を得る為の「実践バイブル」を創刊致しました。
読切タイプの参考本的な内容です。詳しくは下記をご参照願います。
takada式「ブログで収入を得る実践テクニック」(適時追加あり)

無料でブログ・サイトの「アクセス向上」を狙うノウハウマガジンです。
無料購読可能→いつでも購読中止できるnoteにて無料配信中。
takadaのブログで収入講座(無料版)

takada素浪人

投稿者プロフィール

お忙しい中「脱藩起業」をご覧頂きまして深く御礼申し上げます。
現在、サイト運営の広告収入のみで生活している個人事業主で、2015年はお陰様で、運営サイト全体数値ですが2500万PVを達成致しました。
このサイトにてアドセンス広告は掲載しておりませんが、WordPressを使用したアフィリエイトや広告展開、そして愚痴などを中心に言いたいことも掲載させて頂いております。
もしよろしければ、Facebook・Twitterなどでご感想やご質問など賜りますと嬉しいです。(^-^)
あと「ブログで稼ぐオンライン講座」も始めました。

この著者の最新の記事

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

コメントするためには、 ログイン してください。

Twitter でフォロー


2016年8月、最新刊を電子書籍にて格安配信開始致しました。
ページ上部へ戻る