Webデザイナーとして活動しているサブローのブログです。
  • HOME
  • WordPressでツイッターやフェイスブック等SNSのシェアボタンを設置する方法(プラグインなし)
2016 7 14

WordPressでツイッターやフェイスブック等SNSのシェアボタンを設置する方法(プラグインなし)

この記事をSNSでシェアする方はこちら

どうも、サブロー(@saburo_design)です。

ブログで書いた記事をツイッターやフェイスブック等のソーシャルメディアでシェアしてもらうためにシェアボタンを設置する人が増えています。パソコン慣れしている人はURLをコピペしてシェアしたりすることができますが、やはりボタン一個で簡単に記事をシェアできるようにしたほうが読者に親切です。

ワードプレスならWP Social Bookmarking Light等のプラグインで簡単にシェアボタンを記事の中に配置したりできますが、表示に一瞬のラグがあるのがどうしても気になってしまい、プラグインを使わず自分で作ることにしました。

コピペでできますので皆さんも使ってみてください。

設置するソーシャルメディアのシェアボタン

今回は以下ソーシャルメディアのシェアボタンを設置したいと思います。

  • Twitter
  • facebook
  • Google+
  • はてなブックマーク
  • pocket
  • LINE

『ツイッターカード』を設定しておくとツイッターでシェアされた時、見栄えが良くなります。今回の設定が終わった後にでも設定しておきましょう。

記事のテンプレートファイル内にコピペ

記事のテンプレートの中に以下のコードをコピペしてください。

<ul id="sns_btn">

<li class="sns_btnInner"><a class="twitter" href="http://twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&amp;<?php echo urlencode(get_permalink()); ?>&amp;url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterで共有">Twitter</a></li>

<li class="sns_btnInner"><a class="facebook" href="http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&amp;t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="facebookで共有">facebook</a></li>

<li class="sns_btnInner"><a class="google_plus" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Google+で共有">Google+</a></li>

<li class="sns_btnInner"><a class="hatena" href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php echo urlencode(get_permalink()); ?>&amp;title=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加">はてブ</a></li>

<li class="sns_btnInner"><a class="pocket" href="http://getpocket.com/edit?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="pocketで共有">pocket</a></li>

<li class="sns_btnInner"><a class="line" href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank" title="LINEで送る">LINE</a></li>

</ul>

※LINE(ライン)に関しては、モバイルからなら現在のページをシェアすることが出来ますが、パソコン上からだと公式サイトに飛ぶだけのようです。

スタイルシート内にコピペ

このままだとただのリスト表示になっているので、下記のCSSをコピペしてレイアウトを整えます。

/*記事SNSシェアボタン*/
ul#sns_btn {
    width:100%;
    float: left;
    clear: both;
    padding: 0px;
    margin: 0px 0px 10px 0px;
}

ul#sns_btn:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

ul#sns_btn li.sns_btnInner {
    width:15%;
    float: left;
    padding: 0px;
    margin: 0px 2% 0px 0px;
    list-style-type: none;
}

ul#sns_btn li.sns_btnInner:nth-child(6n) {
    width:15%;
    margin: 0px 0px 0px 0px;
}

@media (max-width: 659px) {
ul#sns_btn li.sns_btnInner {
    width:32%;
    margin: 0px 2% 5px 0px;
}
}

@media (max-width: 659px) {
ul#sns_btn li.sns_btnInner:nth-child(3n) {
    width:32%;
    margin: 0px 0px 5px 0px;
}
ul#sns_btn li.sns_btnInner:nth-child(6n) {
    width:32%;
    margin: 0px 0px 5px 0px;
}
}

ul#sns_btn li.sns_btnInner a {
    font-size: 12px;
    font-weight: bold;
    line-height: 100%;
    color:#ffffff;
    display: block;
    padding: 8px 0px;
    margin: 0px;
    background-color:#f5f5f5;
    text-align:center;
    text-decoration: none;
    border-radius:5px;
}

@media (max-width: 659px) {
ul#sns_btn li.sns_btnInner a {
    font-size: 14px;
    padding: 10px 0px;
}
}

ul#sns_btn li.sns_btnInner a.twitter {
    background-color: #00acee;
}

ul#sns_btn li.sns_btnInner a.facebook {
    background-color: #3b5998;
}

ul#sns_btn li.sns_btnInner a.google_plus {
    background-color: #dd4b39;
}

ul#sns_btn li.sns_btnInner a.hatena {
    background-color: #2D4C86;
}

ul#sns_btn li.sns_btnInner a.pocket {
    background-color: #EE4056;
}

ul#sns_btn li.sns_btnInner a.line {
    background-color: #5ae628;
}

以上です。

シェア数を表示したい方は

この方法だとシェア数をカウントして表示することが出来ませんが、そこはプラグインを使って対応することが出来ます。詳しくは下記の記事をご参照下さい。

まとめ

いかがでしたでしょうか?上記スタイルシートはパソコンだと1列で横並びですが、スマホなど小さな画面では2列になるようにしています。お好みでレイアウトを変えてみてください。

ツイッターのシェアボタンをさらに深くカスタマイズする方法はこちら↓

この記事をSNSでシェアする方はこちら

コメント

  1. Pingback: Facebookのシェアボタン表示 | 退職!転職!…起業!?~日々の業務ダイアリー~

  2. Pingback: 【随時更新】カスタマイズ履歴 – そるそる's note

  3. Pingback: WordPressにプラグイン無しの自作シェアボタンを追加しました。 – ライブドアブログに強いフリーランス「Mt.Nanami」

  4. Pingback: WP Social Bookmarking Lightで不具合が出て外したきりだったので、自分でシェアボタンを付けました。 - 五指の記録

  5. たこ

    初めまして。
    すごく参考になりました!
    コードもそのままコピペできて非常に簡単に導入できました。
    どうもありがとうございました。

  6. Pingback: WordPressテーマ「Folclore」で最初に行ったカスタマイズまとめ – ARISAWAFILM.COM

コメントを残す

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

プロフィール

Web・グラフィックデザイナー
美味しいものを食べに行ったり技術録を書いたり。最近ブログ用のデジカメを買って浮かれています。ツイッターとかインスタグラムもやってますのでフォローもお気軽にどうぞ。
PAGETOP
Copyright © SABURO DESIGN All Rights Reserved.