WordPressのオリジナルシェアボタン簡単作成。ソースコード有り

こんにちは、太郎です。

先日、オリジナルのシェアボタンを導入したらアクセスが2倍に増えた
という記事をエントリーしたのですが、予想外にシェアをしていただきました。

シェアボタンを導入の記事

はてブに関しては過去最高のシェア数でした。

なんでこんなにシェアされたのかなと思い、シェアしていただいた方に直接伺ってみると、

もっとシェアされるためのアドバイスを伺ったので、今回はソースコードを公開しようと思います。

※初めはシェアしていただいた方だけへの特典だったのですが、その方に関しては細かい質問にも対応しますのでご了承いただけると幸いです。

ソースコード

html

htmlのコードです。
htmlファイルの表示したい場所に追加してください。

投稿の下に差し込む場合は

記事直下に挿入

左サイドバーの
【外観】⇒【テーマ編集】をクリック

その後、右側の青丸のほうから
【single.php】をクリックします。

その後はテキスト内の<?php the_content(); ?>
を探しその下に以下のソースコードを貼り付けます。

ブラウザによっては改行がおかしいですが、全部コピーしてもらえればと思います。

<ul class="share_btn">
<li><a class="facebook_btn" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&amp;t=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span class="fontawesome-facebook social_icon"></span>いいね</a></li>
<li><a class="twitter_btn" href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span class="fontawesome-twitter social_icon"></span>ツイート</a></li>
<li><a class="hatebu_btn" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span class="hatebu_icon">B!</span><span class="hatebu_chara">はてブ<span></a></li>
</ul>

場所がよくわからない方はこちらに動画の説明があります。
ワードプレスで本文の前後に何かを挿入する方法

CSS

次はCSSです。
右側の青丸の中から【style.css】を開いて

CSSを編集

 

デザインに崩れが見られるようでしたら大部分はスタイルシートの一番下に挿入すると解決すると思います。

ul.share_btn {
margin: 36px 0 25px 0;
padding: 0;
}

.share_btn li {
float: left;
width: 32%;
margin: 0 4px 0 0;
list-style: none !important;
}

.share_btn a {
display: block;
color: #fff;
text-decoration: none;
font-weight: bold;
text-align: center;
height: 45px;
line-height: 45px;
padding: 0;
font-size: 13px;
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-o-transition-duration: 500ms;
transition-duration: 500ms;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
}

.share_btn a:hover {
color: #fff;
position: relative;
top: -3px;
}

span.social_icon {
margin-right: 3px;
font-size: 16px;
}

.share_btn li:last-child {
margin-right: 0;
}

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

a.facebook_btn {
background: #3B5998;
}

.facebook_btn:hover {
background: #5979be;
}

a.twitter_btn {
background: #33CCFF;
}

.twitter_btn:hover {
background: #88e1ff;
}

a.hatebu_btn {
background: #aaa;
}

.hatebu_btn:hover {
background: #d4d4d4;
}

span.hatebu_icon {
font-family: Verdana;
margin-right: 3px;
font-size: 16px;
}

a.hatebu_btn span {
position: relative;
top: -1px;
}

ul.share_btn_bottom {
margin: 20px 0 30px 0;
}

以上で当サイトと同じシェアボタンを実装できます。
スマホにも対応しております。

関連記事
オリジナルのシェアボタンを導入したらアクセスが2倍に増えた

無料でウェブマーケティングを勉強しませんか?

8 件のコメント

  • 大変参考になります記事ありがとうございます。弊社のサイトに利用させて頂きました。ちなみにでございますうが、はてぶのボタンをLINEに変更したコードなどはございますでしょうか?

  • 太郎さんはじめまして。最近ブログを始める際に検索し辿りつきました。大変勉強になり有難うございます。これからも色々学ばせて頂きたいと思いますのでよろしくお願いします。ダイエットの記事もあるんですね!お互い頑張りましょう!

  • コメントを残す

    メールアドレスが公開されることはありません。

    ABOUTこの記事をかいた人

    タロウ

    1990年3月9日神戸生まれ。 webが好きです、でもラーメンはもっと好きです。SEOには自信があります。最近太ってきたせいで着る服がありませんが、太ってきたのであったかいです。 Twitter・Facebookから友達申請よろ!