WordPressで作ったWEBサイトにテキストのソーシャルボタンを設置する方法

・FaceBookでシェア

<a class="○○○" 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;">
<i class="fa fa-facebook"></i>&nbsp;Facebook</a>

○○○にはCSS用のクラス名を入れて下さい。

・Twitterでシェア

<a class="twitter-tweet" href="http://twitter.com/intent/tweet?text=【<?php the_title(); ?> | <?php the_permalink(); ?>】"
      onClick="window.open(encodeURI(decodeURI(this.href)),
      'tweetwindow',
      'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!'
      ); return false;"><i class="fa fa-twitter"></i>&nbsp;
    twitter</a>

○○○にはCSS用のクラス名を入れて下さい。

・google+でシェア

<a class="○○○" 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;"><i class="fa fa-google-plus"></i>&nbsp;Google＋</a>

○○○にはCSS用のクラス名を入れて下さい。

・Lineで送る

<a class="○○○" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>">B<i class="fa fa-exclamation"></i>&nbsp;はてブ</a>
<a class="○○○" href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><i class="fa fa-comment-o">&nbsp;</i>LINE</a>

○○○にはCSS用のクラス名を入れて下さい。

・Pocketに保存

<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;"><i class="fa fa-chevron-down"></i>&nbsp;Pocket</a>

○○○にはCSS用のクラス名を入れて下さい。

・Feedlyに登録

<a class="○○○" href='http://cloud.feedly.com/#subscription%2Ffeed%2F△△△' target='blank'><i class="fa fa-rss"></i>&nbsp;Feedly</a>

○○○にはCSS用のクラス名を入れて下さい。
△△△には自分のサイトのfeedURLを入れて下さい。

設置するボタンの分それぞれ作成してください。

a.○○○{
width:50%; /*ボタンの幅（ここでは記事の幅の半分と言う意味で50％を指定しています。変更は自由です。）*/
padding:20px 0 20px 0; /*文字の上下の余白（ここでは上下に20pxを指定しています。変更は自由です。）*/
color:#fff; /*文字の色（ここでは白を指定しています。変更は自由です。）*/
text-align:center; /*文字の中央寄せ（変更は自由です。）*/
background-color:#3b5998; /*背景の色（ここではFeceBookの青を指定しています。変更は自由です。）*/
display:block; /*リンクをボックスタイプに指定*/
text-decoration:none; /*リンクの文字の下に線が出ないように指定*/
font-size:15px; /*文字の大きさを指定*/
float:left; /*ボタンを左にフロートさせる*/
}
 
a.○○○:hover{
background-color:#6277a1; /*マウスオーバー時の背景の色（ここではFeceBookの青を指定しています。変更は自由です。）*/
}

○○○は1.で決めたCSS用のクラス名です。

background-color:#00acee;

マウスオーバー時の背景の色

background-color:#6aafca;

background-color:#EF3E56;

マウスオーバー時の背景の色

background-color:#f79eaa;

background-color:#568BCA;

マウスオーバー時の背景の色

background-color:#6277a1;

background-color:#DD4B39;

マウスオーバー時の背景の色

background-color:#E05D4C;

background-color:#70CA3B;

マウスオーバー時の背景の色

background-color:#9ad975;

background-color:#00C300;

マウスオーバー時の背景の色

background-color:#98D382;