2013年6月4日火曜日

ブログにソーシャルボタンを設置する

今更ながら、TwitterとFacebookデビューをしました。
そこで、本ブログにこれらのソーシャルアイコン（SNSボタン）を設置したく奔走していたところ、カッコイイSNSボタンに出会えました。

ここでは、テンプレートを編集せず、ガジェットの追加だけで、タイトル脇にSNSボタンを表示させる方法を紹介します。



【ソーシャルボタンには２種類ある】

ソーシャルボタンには、その用途が異なるものが２種類あります。
  1. ブログ記事等を共有するためのもの
  2. 自分が公開しているソーシャルページにアクセスするもの
１番目は、読んだ記事を更に複数の人に拡散させるものです。
これは、（ブログ投稿者ではなく読者が）その記事を「良かった」と感じ、記事を自分（読者）の推薦として他の人に伝える手助けをするボタンになります。

具体的には、Twitterであれば「その読者が該当記事へのリンク付きでツイートする」と言う形になります。

この「ボタン」は、大抵のブログサービスで最初から用意されているかと思います。
当ブログで言うと、記事下の小さい灰色のアイコンです。マウスを乗せると色がつきます。

２番目は、実はただのリンクです。わざわざボタンにする必要もないぐらいです。
しかし、SNSがこれだけ普及している現在においては、視覚的に瞬時に理解できる「アイコン型のボタン」は非常に有用です。
（参考：本ブログのタイトル横のボタン）

この「ソーシャルページへのアクセスボタン」を設置します。



【ソーシャルページへのアクセスボタン】

ソーシャルページへアクセスするボタンは“Blogger”で用意されていないので、自分で設置します。
「クリボウの Blogger Tips」さんで格好良いボタンが紹介されていましたので、そのSNSボタンを使わせてもらうことにします。

紹介されていたSNSボタンは、ブログの右側に表示されるもので、スクロールしてもずっと固定位置で表示され続けます。
このような感じです。（クリボウ氏のデモページ）

これはこれで非常に格好良くていいのですが、SNSボタンはここまで自己主張しなくて良いと思います。
そこで色々と考えた結果、ブログタイトル右側のぽっかり空いた空間に、このボタンを設置したくなりました。

しかし、タイトル部分を編集するにはテンプレートの変更を伴います。
私のように知識のないものは、あまりテンプレートをいじりたくありません。

そこで元々設置してあるガジェット（右側メニュー）の編集だけで何とかすることにします。



【設置方法】

ここで紹介するコードを「HTML/JavaScript」ガジェットに記述し、レイアウト右側の一番上に配置します。

クリボウ氏のサンプルを基に次のように書き換えます。
まず、スタイルシート部分の固定表示を取り除き、元々あったガジェットの一部とつなぎます。
元々あったガジェットとは私の場合「当ブログについて」の部分です。

更に、「SNSボタン」は上に浮かせ、「当ブログについて」部分は元の場所に沈ませます。
なお、メールアイコンは削除しました。

実際、当ブログで使っているガジェットを紹介します。


<style>
.btsnts-flt-wdt{
margin-top:-170px;
}
.btsnts-flt-wdt img{
float:right;
margin:5px;
-webkit-transition: all .0s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.btsnts-flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg);
transform: scale(1.2) rotate(6deg);
}
.intro1{
position: relative;
margin-top:170px;
}
</style>

<!-- btsnts.blogspot.com -->
<div class="btsnts-flt-wdt">
<!-- Facebook -->
<a href="https://www.facebook.com/Wert.SNS" title="Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXxVpmNQ6_dUp4f0az3g8WVxv4kIGr206IubtmzFMMCWNerYd6GKp4J8RtrVcLPKf3mKSdT_hb8YxN5ysQZJ6xlG0i0B9tdG962u4_dKS7pM6W3kYRRUpnoFhSA7kxTlDhR98BHHOrZ-c/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="https://twitter.com/Wert_SNS" title="Twitter" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggKsJZuJmyJcIPxG6vBx2mKPlvuDcUaAUcX_FdKr5qkjhO2np-hloTtqoOxMLA9NR7bqNS8bagK9KAqor48fwcwIUVCfZy4fLvTD5Ikwd93eFFAiBsuPnZR_jc7Ea7At9CwP9Gzw-Yl0c/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/blogspot/dOIyW" title="RSSリーダーで購読する" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2PQ5RPt07jDKNMMdmuaVQqbik1TpZjV1O8cCReD3yBCihdE3dUMSChmxE0rQ7lRRR8xZrR2Gmz_9TFBNxDljhwinhdG1d-eH8TzMv6lxiUW57Kves332uKNoBOVpBOcoY7QT21f9gkOU/s1600/Rss.png" /></a>
</div>
<!-- End -->

<div class="intro1">
<p>使い勝手を犠牲にしない、スマートフォンの節約術を追求します。ありきたりな情報は割愛しています。</p><p>DIY等の趣味も載せています。</p>
</div>
※　marginの値は適宜書き換えてください。

実際の設置状況は当ブログのタイトル右横になります。
元々が非常に格好良いボタンなので、この方がさりげなくてカッコイイです。



［6/9追記］

ソーシャルボタンがタブレット内に表示されているように見せたく、ドコモのdtab画像を追加しました。


<style>
.dtab {
 position: absolute;
 top: -170px;
 left:50px;
}

.btsnts-flt-wdt{
 position: relative;
float:right;
top:-140px;
right:20px;
margin-bottom:30px;
}
.btsnts-flt-wdt img{
-webkit-transition: all .0s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.btsnts-flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg);
transform: scale(1.2) rotate(6deg);
}

.intro1{
 position: absolute;
}
</style>

<img border="0" class="dtab" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoK8UnV-KBzqKueU90-3zR_W3-G3lRlwxo6ltIVDh3z0g_T8W-EBSS56N6Z7nHYWNjf9cCAlh13_OF4CI7L6KK9JC5GcstU9ckCIy3IIO4bWVtPPYQIGccfJy9ovL4ExxQfRqZyqXN-rFf/s250/dtab3.png" />
<!-- btsnts.blogspot.com -->
<div class="btsnts-flt-wdt">
<!-- RSS -->
<a href="http://feeds.feedburner.com/blogspot/dOIyW" title="RSSリーダーで購読する" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2PQ5RPt07jDKNMMdmuaVQqbik1TpZjV1O8cCReD3yBCihdE3dUMSChmxE0rQ7lRRR8xZrR2Gmz_9TFBNxDljhwinhdG1d-eH8TzMv6lxiUW57Kves332uKNoBOVpBOcoY7QT21f9gkOU/s1600/Rss.png" /></a>
<!-- Twitter -->
<a href="https://twitter.com/Wert_SNS" title="Twitter" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggKsJZuJmyJcIPxG6vBx2mKPlvuDcUaAUcX_FdKr5qkjhO2np-hloTtqoOxMLA9NR7bqNS8bagK9KAqor48fwcwIUVCfZy4fLvTD5Ikwd93eFFAiBsuPnZR_jc7Ea7At9CwP9Gzw-Yl0c/s1600/twitter2.png" /></a>
<!-- Facebook -->
<a href="https://www.facebook.com/Wert.SNS" title="Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXxVpmNQ6_dUp4f0az3g8WVxv4kIGr206IubtmzFMMCWNerYd6GKp4J8RtrVcLPKf3mKSdT_hb8YxN5ysQZJ6xlG0i0B9tdG962u4_dKS7pM6W3kYRRUpnoFhSA7kxTlDhR98BHHOrZ-c/s1600/facebook.png" /></a>
</div>
<!-- End -->

<div class="intro1">
<p>使い勝手を犠牲にしない、スマートフォンの節約術を追求します。ありきたりな情報は割愛しています。</p><p>DIY等の趣味も載せています。</p>
</div>

なんかしつこくなったような気もしますが・・・、結構頑張って作ったのでこのまま使いたいと思います。
ブログ自体の見た目がほぼデフォルトなので、これを機にもう少し弄りたくなって来ました。
    
loading..
投稿者 時刻:
このエントリーをはてなブックマークに追加
ラベル:

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )