WordPressのカスタマイズやテーマファイル、プラグインの作り方などデータベース構造から詳しく解説します。

[WordPress]簡単!!SNSボタンを追加する方法(Twitter、Facebook、Google+、はてぶ)

今回はブログサイト運営にはかかせないSNSボタンの追加方法についてまとめてみます。

Twitter

こちらの公式サイトにアクセスし、入力欄をうめます!

twitter

あとはコードを取得してheader.phpやfooter.php、single.phpの配置したいとこに貼付けるだけです!!
(例)こんな感じです。

<a href="https://twitter.com/share" class="twitter-share-button" text_date="<?php the_title(); ?>" data-url="<?php the_permalink(); ?>">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

タイトルとURLは現在の投稿記事を指定してあげましょう!!

Facebook

Twitterと同じようにこちらの公式サイトから取得するのが楽です。
facebook

こちらの欄を埋めて「Get Code」をクリックしてコードを取得します。
あとはTwitter同様、貼付けるだけです!!
(例)

<div id="fb-root"></div>
2
<script src="http://connect.facebook.net/en_US/all.js#appId=245281502167818&amp;xfbml=1"></script>
3
<fb:like href="<?php the_permalink();?>" send="true" layout="box_count" width="450" show_faces="true" font=""></fb:like>

URLは現在の投稿記事を指定してあげましょう!!

Google+

タグ内でタグの直前にJavaScriptのコードを置きます!

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

そして配置したい位置に以下のコードを書きます!

<div class="g-plusone" data-size="standard" data-count="true"></div>

はてなブックマーク

はてなブックマークの公式サイトにアクセスします!!
あとは選択項目を埋めて、コードを生成し、貼付けるだけです!!

はてブ
(例)

<a href=”http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>” class=”hatena-bookmark-button” data-hatena-bookmark-title=”<?php the_title(); ?>” data-hatena-bookmark-layout=”standard-balloon” data-hatena-bookmark-lang=”ja” title=”このエントリーをはてなブックマークに追加”><img src=”http://b.st-hatena.com/images/entry-button/button-only@2x.png” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”http://b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>

タイトルとURLは現在の投稿記事を指定します!

いかがでしたでしょうか??すごい簡単にSNSボタンをつけることができますよね!!!SNSボタンをつけてPVをアップさせていきましょう!!

関連記事

ページ上部へ戻る