即席で使えるバイラルメディアっぽい大きめのSNSボタン

おすすめ記事ピックアップ

Twitterでシェア FaceBookでシェア
↑
バイラルメディアっぽい大きめのSNSボタン（Twitter、Facebook）を探したのですが、見つからず自分で作ってみました。URLの指定と、つぶやきに載せたいテキストも即席で設定できます。div classをspamで指定しています。スマホでも回りこむように作ってあります。

結構使い勝手が良かったので共有します。ご自由にお使いください。使う時は、Twitter等で呟いてもらえると嬉しいですね。bloggerで使えますよ！

記事内に記述するHTML

<a href="http://twitter.com/intent/tweet?text=「つぶやき表示テキスト入力」;url=「ここにURLを入力」"><span class="twitterbutton">
Twitterでシェア </span></a>
<a href="「ここにURLを入力」"><span class="facebookbutton">FaceBookでシェア</span></a>

CSSに追加するCSSコード

/*TWITTERカスタマイズCSS*/
.twitterbutton {
color: #FFFFFF;
width: 100%;
padding: 10px 10px 10px 10px;
margin: 30px 10px 10px -10px;
float: none;
clear: both;
font-size: 20px;
height: auto;
text-transform: uppercase;
font-weight: normal;
background: #99AEFF;
cursor: pointer;
line-height: 3em;
}

.twitterbutton a{
color: #FFFFFF;
}

.twitterbutton:hover{
background: #566291;
}

/*FACEBBOKカスタマイズCSS*/
.facebookbutton {
color: #FFFFFF;
width: 100%;
padding: 10px 10px 10px 10px;
margin: 10px 10px 30px -10px;
float: none;
clear: both;
font-size: 20px;
height: auto;
text-transform: uppercase;
font-weight: normal;
background: #41E700;
cursor: pointer;
}

.facebookbutton a{
color: #FFFFFF;
}

.facebookbutton:hover{
background: #2C9C00;
}

CSSに無駄が多そうなので、誰かもっと正しくしてください。




Twitterでシェア FaceBookでシェア