2012/05/22

[blogger]慣れるとこっちのほうがいいかも?ソーシャルボタンを縦に並べて配置する!

follow us in feedly
follow us in RSS

こんにちは!
ちょっと図書館から借りている本の返却が迫っているので、読んでいこうと思ったら二日間くらい本だけ読んでたすなふです。でも、金環日食は見れました・w・


こんな感じにしよう!


ボタンレイアウトを見直しました | ソーシャルボタンを縦に並べて配置するときに大切なこと | けんけん.com

横幅、縦幅自由自在!オリジナルデザインのTwitterツイートボタンの作り方。 | 和洋風◎

こちらの2つのサイトを並びの参考にしつつ、ソーシャルボタンを個別記事のヘッダに縦並びに並べてみたいと思います。
ただ、2つのサイトに並べ方の解説があるわけではないですので、こんな感じで並べようという参考であって、並べ方については、私の方法です。
HTML規則的に、変な事になっていたら、ご教授頂けると嬉しく思います。


今の自分の設定

今回は、一番初めに、最終的に私はこんな追加をして並べたっていうコードを貼っておきます。・・注:blogger用ですよ。

毎回ですが、テンプレートHTMLのバックアップは忘れずに。


1.) 『<body>』直下に追加するコード
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

2.) 『<div class='post-header-line-1'/>』の下に追加するコード
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- header-ads -->
<div class='post-header-ads'>
<script type='text/javascript'>&lt;!--
google_ad_client = &quot;アドセンスID&quot;;
/* postheader */
google_ad_slot = &quot;広告ユニットによって変わります&quot;;
google_ad_width = 336;
google_ad_height = 280;
//--&gt;
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'/>
</div>

<div class='socialcount'>

<!-- tweet-header -->
<div class='tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='TwitterのID' data-via='TwitterのID' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script></div><div style='clear: both;'/>

<!-- like-header -->
<div class='like'><fb:like expr:href='data:post.url' layout='box_count' send='true' show_faces='false' width='50'/></div>

<!-- このタグを +1 ボタンを表示する場所に挿入してください -->
<div class='g-plusone' data-size='tall' expr:href='data:post.url'/>
<!-- この render 呼び出しを適切な位置に挿入してください -->
<script type='text/javascript'>
window.___gcfg = {lang: &#39;ja&#39;};
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

<!-- hatena-header -->
<div class='hatena'><a class='hatena-bookmark-button' data-hatena-bookmark-layout='vertical' expr:data-hatena-bookmark-title='data:post.title' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/></div></div>

<!-- like-sd-header -->
<div class='like-standard'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=サイトURL&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35' style='border:none; overflow:hidden; width:550px; height:35px;'/></div>
</b:if>

3.) 『カスタムCSSの追加』から
.post-header-ads{margin-top:15px;float:left;}
.socialcount{margin-top:15px;float:right;}
.like{margin-bottom:5px;}
iframe.twitter-share-button.twitter-count-vertical {height: 60px !important; width: 54px !important; margin-bottom:7px;}


こんな感じですが、コピペで動かない場合、恐らく・・・
  • 『&amp;』が『&』になってしまっているか、
  • 『&quot;』が『"』になっている。または、
  • 『&#39;』が『'』・・・
となっていることが原因と思われますので、『<script type='text/javascript'>』以後『</script>』の間で、そのようになってる部分がないか確認してみてください。なってたら、まぁ、私の表記ミスですので、ご連絡を(・・;

どうしても無理となったら、ひとつひとつのコードは、公式からもってくるなどで対応して下さい。
また、『div class』は、それぞれ私が自分で決めたものですので、不都合があれば変更して下さい。その場合は、CSSの指示クラスも変更になるかもしれません。

また、このコードでは、『<b:if cond』『</b:if>』で、個別記事のみに表示するようにしています。全てのページで表示するには、『<b:if cond』と『</b:if>』を消すなどの対応をして下さい。

では、順番に・・・
  • Googleアドセンス
  • Twitter「ツイート」ボタン
  • Facebook「いいね」ボタン
  • Google+1ボタン
  • はてなブックマークボタン
  • Facebook「いいね」横長ボタン
というように、説明を加えていこうと思います。


Googleアドセンスボタン


Googleアドセンスの登録をして、「コンテンツ向けAdsense」の「広告ユニット」の作成から、336×280のユニットを作ってコードをもらってきます。

●HTML部分
<!-- header-ads -->
<div class='post-header-ads'>
<script type='text/javascript'>&lt;!--
google_ad_client = &quot;アドセンスIDが入ります&quot;;
/* postheader */
google_ad_slot = &quot;広告ユニットIDが入ります&quot;;
google_ad_width = 336;
google_ad_height = 280;
//--&gt;
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'/>
</div>

●CSS部分
.post-header-ads{margin-top:15px;float:left;}

HTML部分では、
  • 『<!-- header-ads -->』で、自分で追加した部分が分かるように命名。
  • 『<div class』で、div要素にして、CSSでの調整をしやすく、また、divで区切る事で、縦並びに。
  • アドセンスIDと広告ユニットIDは、それぞれ異なりますので、ご使用のものを。
公式からもらってきたコードを基本的に貼るだけですが、コピーしてきたコード内で『<!--』『-->』とコメントアウトしてある部分は、『&lt;!--』『--&gt;』と変更が必要な事に注意して下さい。(bloggerの仕様)
このコードですと、3行目『<script type='text/javascript'>』の後ろと、9行目の部分です。

CSS部分は、
  • 『margin-top:15px;』で、記事タイトルからの余白を少し空けるように。
  • 『float:left;』で、左寄せで、右側に要素を回りこませるように設定しています。
ただ、CSSは、とりあえずHTML部分を全部のボタンが追加出来てから調整したほうがいいです。
ここでは、ボタンごとにコードを区切るために一緒に書いてますけど・w・


縦並びのソーシャルボタン部分

Twitter「ツイート」ボタン

参考サイト
44ATTACK|ツイートボタンを Blogger に導入する方法
twitter が公開している "ツイートボタン" を利用してあなたの記事が twitter で共有できるように設定してみましょう。 ...

新しいTweetボタンの余白をなくす方法 | ULTRA Pleasure

●HTML部分
<!-- tweet-header -->
<div class='tweet'>
<a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='TwitterのID' data-via='TwitterのID' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</div>
<div style='clear: both;'/>

●CSS部分
iframe.twitter-share-button.twitter-count-vertical {height: 60px !important; width: 54px !important; margin-bottom:7px;}


まずHTMLですが、これの行の前に『<div class='socialcount'>』を足して、縦並びにするボタン全体を「socialcount」という1つの箱にしています。縦並びの最後、今回では「はてなブックマーク」ボタンのHTMLのすぐ次の行に『</div>』を足すことで、一つのまとまりにします。

また、その他のHTML部分は、
  • 『<script>~~</script>』の間にあった、『"』は『&quot;』に変更になっています。
  • 「TwitterのID」の場所には、ご使用のツイッターアカウントIDを入れて下さい。2ヶ所あります。
  • 『data-lang='en'』の部分で、表記は英語に設定しました。
  • 最後の『<div style='clear: both;'/>』は、IEでの表示が崩れたので、なんとかしようと試したところ、これでうまくいったので。他に、いい設定法があるかもしれません。IEの表示を確認しながら、入れるかどうか決めて下さい。
追記
<div style="clear: both;"/>
の部分ですが、カスタムCSSから
.socialcount{width:65px;}
というように、縦並び部分の横幅を適正に指定してあげれば、なくても大丈夫と分かりました。
こんな感じです。

CSS部分では、
  • 『heightとwidth』で大きさ調整。「Tweet」の文字部分が切れてもいいなら、他のボタンの大きさと揃えるために『width:50px !important;』にしてもいいかもしれませんね。
  • 『margin-bottom』で、下にある「いいね」ボタンとの余白を調整しています。


Facebook「いいね」ボタン

公式
【Like Button - Facebook開発者】(Click New Tab)

●HTML部分
『<html b:version='2' class='v2' ~~~~~~~~>』の中に、
xmlns:fb="http://ogp.me/ns/fb#"
を追加。

『<body>直下に』
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

他は、Tweetボタンコードの下に続けて・・・
<!-- like-header -->
<div class='like'><fb:like expr:href='data:post.url' layout='box_count' send='true' show_faces='false' width='50'/></div>

●CSS部分
.like{margin-bottom:5px;}

HTML部分から、
  • 公式の「XFBML」を使用しています。iframeでもいいのですが、動作確認で、「いいね」を押した時のコメント追加機能が出ない感じだったので・・・。
  • 『script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/』の「en_US」で文字表記を「Like」にしています・・・横幅縮小の為。
  • 公式からのものでもちろん使えますが、公式のままだと、トップページの「いいね」しか拾わないので、記事毎の「いいね」表示に切り替えています。

記事毎の「いいね」表示については、
<fb:like href="http://www.sunabox.net" send="true" layout="box_count" width="50" show_faces="false" />
<fb:like expr:href='data:post.url' layout='box_count' send='true' show_faces='false' width='50'/>
このように、
『href="http://www.sunabox.net"』の部分を
『expr:href='data:post.url'』に変更していますよ。


Google+1ボタン

参考サイト
僕らはみんな歪ている: [Blogger]Google+1ボタンの設置手順

●HTML部分
<!-- このタグを +1 ボタンを表示する場所に挿入してください -->
  <div class='g-plusone' data-size='tall' expr:href='data:post.url'/>
  <!-- この render 呼び出しを適切な位置に挿入してください -->
  <script type='text/javascript'>
  window.___gcfg = {lang: &#39;ja&#39;};
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

●CSS部分
なし

HTML部分は、
  • こちらも、公式からのコードでは『href='入力URL'』になるところを、『expr:href='data:post.url'』にして、記事毎の+1を拾うように変更しています。
以上かもw


はてなブックマークボタン

参考サイト
44ATTACK|新・はてなブックマークボタンを Blogger に導入する方法
新・はてなブックマークボタンが新たに公開されていたので Blogger に導入してみようと思い、使いやすくなりました! はてなブックマークボタンで作成したコードを挿入してみたが思ったようには動作しなか ...

●HTML部分
<!-- hatena-header -->
<div class='hatena'>
  <a class='hatena-bookmark-button' data-hatena-bookmark-layout='vertical' expr:data-hatena-bookmark-title='data:post.title' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' title='このエントリーをはてなブックマークに追加'>
    <img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/>
  </a>
  <script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
</div>

●CSS部分
なし

HTMLから、
  • 記事毎のブックマーク数を取れるように変更。
『<img alt=』の部分のタグですが、もしかしたら「はてな」のJavaがうまく読めなかった時の代替画像なだけで、消してしまっても動作に影響はないかもしれません。今、自分のサイトで試して様子見中。

縦並び部分の全体として

★Twitte「ツイート」ボタンの、コード前に『<div class='socialcount'>』を挿入していますので、これをこの「はてなブックマーク」ボタンのコードのすぐ後に『</div>』タグを入れて閉じます。これは、左に配置する広告の右に縦並びにするための措置です。

★縦並びボタンとしてはここまでですので、関連するCSSとして、
.socialcount{margin-top:15px;float:right;}
これで、ひとまとめの箱にしている「socialcount」を、右寄せで配置という指定になります。


まとまりの下に「いいね」ボタンの追加

公式
Like Button - Facebook開発者

最後に、「広告」「縦並びボタン」の下に、常にトップページ・・・つまりブログ自体の「いいね」数を表示させておくボタンを追加します。

ここは、XFBML版を使うと、表記が英語のままになってしまいます(縦並びのほうの指定で使った『<body>』直下コードの指定を使いまわすため)ので、iframe版を使います。

●HTML部分
<!-- like-sd-header -->
<div class='like-standard'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=サイトURL&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35' style='border:none; overflow:hidden; width:550px; height:35px;'/></div>

少し見づらいですが、公式から設定仕切ってしまえるような内容ですので、そう困らないと思います。
コピペする場合は、「サイトURL」に自分のブログのURLを入れるようにして下さい。但し、bloggerHTML特有の書き換えが必要かもしれませんので、公式から持ってくるほうが楽だと思います。




以上!
とても長くなってしまいましたが、コピペでもいいし、ひとつひとつでもいいし、見ながらすれば、きっとこのブログの記事ヘッダ部分程度には並べられると思います。

広告ブロックを使うと、ちょっと縦並びの意味が分からない残念なことになりかねませんが、それを気にするときっとデザイン出来なくなるので、気にしない事として、ちょっと頑張った感もでるし、見た目も賑やかになるこの並び。
一度挑戦するのもいいかと思って、〆ます。


追記

[blogger]記事ヘッダーのソーシャルボタンの見直し - sunabox
縦並びの部分で、記事ヘッダにあるのに果たして送るボタンが必要か? その横には「忍者おまとめボタン」でシェアボタンがあるのに。 下にあるものは、プロフィール下に「Twitterフォロー」と「LikeB ...


後日、少し変更を加えています。興味があればご一緒に。

7 件のコメント:

  1. いつも参考させていただいています!
    上部にAdWordsとソーシャルボタンを設置したのですが、
    スマートフォンでも同様に表示されてしまい、非常にみずらい形になってしまいます。。。
    sunaboxさんのスマートフォンでは表示されていないのですが、どのようにすれば表示されないようにできるのでしょうか。
    コードに詳しくなく探り探りなんですが、もしご存知でしたらぜひご教示いただけないでしょうか?!

    返信削除
  2. ありがおうございます!試しにやってみました!

    2)とサイトURLはうまくいきました!
    しかし、知識が足りないのか1)

    返信削除
  3. テンプレートをリセットし、投稿は表示されるようになりました!

    しかし、知識が足りないのか1)を試したところ、
    AdWordsとソーシャルボタンが表示されません。。。

    返信削除
  4. ソースもっかい見てます。

    ・記事ヘッダの、広告とソーシャルボタンが
    <p><div id='fb-root'>
    から始まりますね。

    その一連の<div id-'root'>から<div class='like-standard'~~~>の「いいねstandard」で終わるコード群を添付の画像を参考に
    </span>
    </span>
    <ここにコード群。>
    </div>
    </div>
    記事ヘッダーのこの位置に移動させて下さい。

    というのも、</div></div>と続いている部分が記事ヘッダー部分である
    <div class='post-header'>
    <div class='post-header-line-1'>
    を閉じている部分だからです。

    つまり、今の場所は記事ヘッダーと本文の間に見えもしますが、もう一つ上の階層に書かれてしまっている状態になります。さっき書いたコメントへの返事がちょっと場所間違ってますね、すみません。


    あと、コード群の上下にある<p></p>は、記事本文であることを示すタグになるので、広告とソーシャルボタンのコードには必要ないので、消しちゃって下さい。

    これでどうだ!(・・*)。。

    返信削除
  5. どうしてもブラウザの画面になりますが、こういう感じで、伝われば・・・と思います。

    返信削除
  6. 丁寧ありがとうございます!
    画象もわかりやすく、とても参考になりました!
    テンプレートのカスタマイズでみるとコードと、ブラウザのソースコードで若干異なるようで戸惑いましたが、たぶんこれで大丈夫だと思っています!(自己判断ですが、、、)
    勉強になりました!

    次の目標は、投稿毎に、記事したにAdWordsを設定することです!また、ブログを参考し、設定してみます!

    返信削除
  7. コメントありがとうございます。
    うまくいかない時はしんどいですよね。
    早速、サイトのソースを確認させて頂きました。

    1)について。
    ソースを見ると、<div class='post-header-line-1>の下にラベルなどを並べられていますが、広告とソーシャルボタンのコードが<post-header-line>の後の、<div class='post-body entry-content' id='post-body-'『それぞれの記事コード』'>の下に書いてあります。
    「post-body entry-content」以後は、本文ということになりますので、モバイルでももちろん本文の表示をしないわけにいきませんから表示されたままになっていると思われます。

    ですので、広告から、横長の「いいね」ボタンまでのコードを『div class='post-body entry-content' id='post-body』のすぐ上あたりに移動させてあげて下さい。

    2)について。
    「いいね」ボタンの横幅はどうやら自動調整されるようになっていて、日本語表記だと、思うよりも横長くなってしまうようです。ここのブログでも、英語表記にしているのはそういう理由からですよ~。英語表記だと、だいぶ横狭くなります。いいねの横幅設定が、実際の表示に表れるのは「standard」を選んだ時か、すごく横長くしたときに表示が崩れて気付く程度ですw

    踏まえてソースコードを見ると、
    <div id='fb-root'></div>
    <script src='http://connect.facebook.net/ja_JP/all.js#appId=≪399559920070307≫&xfbml=1'>のコードが<div class='post-footer-line post-footer-line-3'>の下辺りにあります。

    実は「div class='post-body entry-content'」のすぐ下にも同じようなスクリプト呼び出しコードがあります。こちらは「en_US」と英語表記指定ですが、後ろにあるスクリプトの言語に上書きされているのではないのかな?と思います。

    ここのコードは、実際のボタン表示部分ではありませんので、
    <div id='fb-root'></div><script src='http://connect.facebook.net/ja_JP/all.js#appId=399559920070307&xfbml=1'>
    だけを(appIdの数字前後の『《』はいらないはずなので確認を)『/body』か『/head』の直前に書いてあげて下さい(「<>」は半角に直してください~)。
    スクリプトの呼び出しコードは1つで大丈夫です。


    最後に、ソースを見ていて、ヘッダ下の「いいね」の横長いボタン「standard」ですが、URLの指定箇所が「サイトURL」のままになっていますので、Facebookファンページか、ブログのトップページに変更してあげてくださいね。

    こんなところでどうでしょう?・w・

    返信削除

Related Posts Plugin for WordPress, Blogger...