WordPress(ワードプレス)にSNSシェアボタンを設定する設置方法

15.08.17 19:49 | コメント(0)

SNSシェアボタンを設定する設置方法

以前ブログで「WordPress(ワードプレス)に記事ページ毎にFacebookのいいねボタンを設定する設置方法」をご説明しましたが、いいねの数やシェアの数が表示されるボタンを設置するとSNS共有ボタンの読込時間に少し時間が掛かりWebサイトのパフォーマンスが落ちてしまいます。
SNSシェアボタンを設置する方法は何種類もあります。色々な記事でも紹介されているように色々な設置方法や色々な表示方法があります。
SNSシェアボタンを設定する事によって、ブログやホームページの記事にいいねボタンやシェアボタンで共有が出来ます。
SNSシェアボタンで各記事を共有させるには、Movable Type(ムーバブルタイプ)、WordPress(ワードプレス)とそれぞれ設定方法が違います。

今回は WordPress(ワードプレス)SNSシェアボタン を設定する設置方法をご紹介いたします。

WordPress(ワードプレス)にSNSシェアボタン

WordPress(ワードプレス)にSNSシェアボタン
 1. SNSシェアボタン一覧のhtmlコード
 2. SNSシェアボタン一覧のcssコード

SNSシェアボタン一覧のhtmlコード

いいねボタンやシェアボタンの数を表示させたり、画像などを利用する事も可能ですが、よりパフォーマンスを軽くするにはcssのみでボタンを作成いたします。まずは、htmlコードを表示させたい箇所に設置いたします。
WordPress(ワードプレス)の場合は、テンプレート内の「content.php」や「single.php」のテンプレートファイルなどに記載いたします。
WordPress(ワードプレス)でタイトルを表示させる箇所には「?php the_title();?」を記載し、記事毎のURLを表示させる箇所には「?php the_permalink(); ?」を記載します。
designer_king」と記載されている箇所にはそれぞれ共有させたいTwitter(ツイッター)IDを記載してください。
※Twitter・Facebook・Google+・はてなブックマーク・Pocket・LINEボタンを設置出来ます。

【htmlコード】
<!-- いいね -->
<div id="share">
<ul>
<!-- Twitter -->
<li class="share-twitter">
<a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title();?>&via=designer_king&tw_p=tweetbutton&related=designer_king" target="_blank">Twitter</a>
</li>
<!-- Facebook -->	
<li class="share-facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank">Facebook</a>
</li>
<!-- Google+ -->
<li class="share-google">
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">Google+</a>
</li>
<!-- はてなブックマーク -->
<li class="share-hatena">
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title();?>" target="_blank">はてブ</a>
</li>
<!-- Pocket -->
<li class="share-pocket">
<a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" target="_blank">Pocket</a>
</li>
<!-- LINE -->
<li class="share-line">
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>">LINE</a>
</li>
</ul>
</div>
<!-- いいね -->
これでhtml側の設定は完了です。

SNSシェアボタン一覧のcssコード

次に先ほど設置いたしましたhtmlにcssを設定していきます。
cssでボタンを作成しますので、cssを設定していないと文字だけが表示されます。

【cssコード】
#share{
	width:100%;
	margin:auto;
	text-align:center;
	padding:10px 0 10px 0;
	clear:both;
}
#share ul{
	height:auto;
}
#share li{
	font-size:14px;
	display:inline-block;
	text-align:center;
	width:84px;
	margin-right:1%;
	margin-bottom:8px;
	border-radius:3px;
	list-style:none;
}
#share li.share-twitter{
	background:#55acee;
	box-shadow:0 2px #2795e9;
}
#share li.share-twitter:hover{
	background:#83c3f3;
}
#share li.share-facebook{
	background:#3b5998;
	box-shadow:0 2px #2d4373;
}
#share li.share-facebook:hover{
	background:#4c70ba;
}
#share li.share-google{
	background:#dd4b39;
	box-shadow:0 2px #c23321;
}
#share li.share-google:hover{
	background:#e47365;
}
#share li.share-hatena{
	background:#2c6ebd;
	box-shadow:0 2px #225694;
}
#share li.share-hatena:hover{
	background:#4888d4;
}
#share li.share-pocket{
	background:#f13d53;
	box-shadow:0 2px #e6152f;
}
#share li.share-pocket:hover{
	background:#f26f7f;
}
#share li.share-line{
	background:#00C300;
	box-shadow:0 2px #009d00;
}
#share li.share-line:hover{
	background:#2bd92b;
}
#share a{
	display:block;
	height:27px;
	padding-top:6px;
	color:#ffffff;
	text-decoration:none;
}
#share a:hover{
	text-decoration:none;
	color:#ffffff;
}

以上で WordPress(ワードプレス) に SNSシェアボタン を設定する設置方法になります。
カテゴリ:SNS活用術, WordPress(ワードプレス)構築と技術, はてなブックマーク, カスタマイズ方法(WordPress), グーグル+(Google+), ソーシャルネットサービス【SNS】情報・活用方法, ツイッター(Twitter), フェイスブック(Facebook), ブログツール【CMS】情報と技術, ライン(LINE)

Facebookでコメントする

コメントする

おすすめの記事

Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

PAGE TOP