超シンプルなシェアボタンの作り方【Bootstrap】

またまた備忘録です〜

シェアボタンを作ってみました。
Bootstrapを使っていますのでその辺はご了承くださいませ〜
では参ります

超シンプルなシェアボタンの作り方

Bootstrapが準備されていることが前提です。

まずhtmlをささーっと準備

<div class="share container">
		<div class="row">
			<div class="sharebtns col-xs-6 col-sm-4">
				<div class="twitterbtn">
					<a href="http://twitter.com/share?url=サイトのurl&text=ツイートに表示する文章&via=ツイッターのアカウント名" target="_blank">Twitter</a>
				</div>
			</div>

			<div class="sharebtns col-xs-6 col-sm-4">
				<div class="facebookbtn">
					<a href="http://www.facebook.com/sharer.php?u=サイトのurl" target="_blank">Facebook</a>
				</div>
			</div>

			<div class="sharebtns col-xs-6 col-sm-4">
				<div class="googlebtn">
					<a href="https://plusone.google.com/_/+1/confirm?hl=ja&url=サイトのurl" target="_blank">Google+</a>
				</div>
			</div>

			<div class="sharebtns col-xs-6 col-sm-4">
				<div class="pocketbtn">
					<a href="http://getpocket.com/edit?url=サイトのurl" target="_blank">Pocket</a>
				</div>
			</div>

			<div class="sharebtns col-xs-6 col-sm-4">
				<div class="linebtn">
					<a href="http://line.me/R/msg/text/?投稿する文章とサイトのurl" target="_new">LINE</a>
				</div>
			</div>

			<div class="sharebtns col-xs-6 col-sm-4">
				<div class="hatebubtn">
					<a href="http://b.hatena.ne.jp/entry/サイトのurl" target="_blank">hatebu</a>
				</div>
			</div>

		</div>
	</div>

リンクもつけてあるのでサイトのurlや投稿する文章などを変えるだけでオッケーです。

cssはこんな感じにしました。

.share .row div {
	text-align: center;
	padding: 10px;
}

.share .row {
	padding: 5px;
}

.sharebtns div {
	border-radius: 5px;
}

.sharebtns a {
	display: block;
    color: #fff;
    padding: 5px;
}

.twitterbtn {
	background-color: #009EF5;
}

.facebookbtn {
	background-color: #3B539A;
}

.hatebubtn {
	background-color: #00A4E1;
}

.googlebtn {
	background-color: #DD4B39;
}

.pocketbtn {
	background-color: #EE4056;
}

.linebtn {
	background-color: #00C300;
}

以上で大体以下のような感じになるかと思います。(h2でテキストをつけました)

スマホなどの小さい幅

PCなどの大きい幅

これだとシェアされにくくなりそうですがww

以上です〜