自分のブログファンを増やすためにプロフィールシェアボタンを記事の下へ置こう。

profprof.jpg

□サイト内検索


スポンサードリンク

Prof

プロフィールシェアボタンを記事の下へ追加しました。
当サイトはWordPressで構築してあります。
JetPackやら他のプラグインやらを使えば、ささっと追加できますが、
一塊にしておきたかったのでhtmlを追加しました。

比較的読んでもらいやすい記事の下にソーシャルメディアへのシェアボタンを置く事は
ブログを作る上での必須項目になっています。
自分のブログファンを増やすきっかけにもなるはずですので、プロフィールシェアボタンを記事の下へ置きましょう!

今回設置にあたり使用したHtml,CSSはご自由にコピペしてもらってかまいません。
プロフィールURLやサイトのURLは必ず変更してください。

■シェアボタンの作り方

ほとんどのサイトでシェアボタンが作れるページが用意されています。

内容を入力してソースコードをコピペしたら終わりです。
はてなブックマークボタンの作成・設置について
Facebook Like Buttonページ
Twitter Buttonsページ
Google+ バッジ 作成ページ
feedlyボタンツール.

■関連
[W]Feedlyボタンをブログに設置する方法 | WEB HORIC.

Html

<div class="share-box">
	<h5>適当なメッセージ </h5>
	<div class="clearfix pad-15">
		<!--FB like box		 -->
		<div class="fb-like" style="float:left;margin:0 15px;" data-href="http://webhoric.com" data-width="300" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true">
		</div>
	
		<div class="fl margin-lr10">	
		<!-- hatena -->
		<a href="http://b.hatena.ne.jp/entry/http://webhoric.com" class="hatena-bookmark-button" data-hatena-bookmark-title="WEB HORIC." data-hatena-bookmark-layout="vertical-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>
		</div>

		<div class="fl margin-lr10">
			<!-- Feedly -->
			<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwebhoric.com%2Ffeed%2F'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-big_2x.png' alt='follow us in feedly' width='131' height='56'></a>
		</div>
		
		<div class="fl">
			<!-- Twitter -->
			<a href="https://twitter.com/webhoric" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-size="large" data-dnt="true">@webhoricさんをフォロー</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>
		</div>
		
				
	</div><!--pad-15-->
		
	<div class="pad-15">
		<!-- Google+ -->
		<div class="g-person" data-width="273" data-href="//plus.google.com/u/0/114697103077622764638" data-layout="landscape" data-rel="author"></div>
		<div class="g-page" data-width="273" data-href="//plus.google.com/u/0/111075362616984196222" data-layout="landscape" data-rel="publisher"></div>
		
		<!-- 最後の ウィジェット タグの後に次のタグを貼り付けてください。 -->
		<script type="text/javascript">
		  window.___gcfg = {lang: 'ja'};
		
		  (function() {
		    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
		    po.src = 'https://apis.google.com/js/platform.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
		  })();
		</script>
		
	</div><!--pad-15-->
</div><!--clearfix-->

CSS


/*--------------------------------
share button
--------------------------------*/
.share-box{
	border: 1px dotted #e1dbdb;
	margin-bottom: 5px;
	padding: 10px;
}
.fl{
	float: left;
}
.pad-15{
	padding:15px;
}
.margin-lr10{
	margin: 0 10px;
}
/* clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: &quot; &quot;;
	clear: both;
	height: 0;
}
/* IE6 */
* html .clearfix {
	zoom: 1;
}
/* IE7 */
*:first-child + html .clearfix {
	zoom: 1;
}
/* DW */
.clearfix + * {
	clear: both;
}

私の場合は後々、変更しやすいようにシェアボタンのhtmlをshare.phpとして1ファイルにし、
single.phpから下の一行を読み込むように処理しています。

<?php require_once('share.php'); ?>

Webhoric


スポンサードリンク

このサイトが役に立ったらシェアにご協力ください

  • このエントリーをはてなブックマークに追加

コメントを残す

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