こんにちは！
ちょっと図書館から借りている本の返却が迫っているので、読んでいこうと思ったら二日間くらい本だけ読んでたすなふです。でも、金環日食は見れました・ｗ・
こんな感じにしよう！
ボタンレイアウトを見直しました | ソーシャルボタンを縦に並べて配置するときに大切なこと | けんけん.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 == "item"'>
<!-- header-ads -->
<div class='post-header-ads'>
<script type='text/javascript'><!--
google_ad_client = "アドセンスID";
/* postheader */
google_ad_slot = "広告ユニットによって変わります";
google_ad_width = 336;
google_ad_height = 280;
//-->
</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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</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: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[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='"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></div>
<!-- like-sd-header -->
<div class='like-standard'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=サイトURL&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font&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;}
では、順番に・・・
- Googleアドセンス
- Twitter「ツイート」ボタン
- Facebook「いいね」ボタン
- Google+１ボタン
- はてなブックマークボタン
- Facebook「いいね」横長ボタン
Googleアドセンスボタン
■Googleアドセンスの登録をして、「コンテンツ向けAdsense」の「広告ユニット」の作成から、336×280のユニットを作ってコードをもらってきます。
●HTML部分
<!-- header-ads --> <div class='post-header-ads'> <script type='text/javascript'><!-- google_ad_client = "アドセンスIDが入ります"; /* postheader */ google_ad_slot = "広告ユニットIDが入ります"; google_ad_width = 336; google_ad_height = 280; //--> </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は、それぞれ異なりますので、ご使用のものを。
このコードですと、3行目『<script type='text/javascript'>』の後ろと、9行目の部分です。
CSS部分は、
- 『margin-top:15px;』で、記事タイトルからの余白を少し空けるように。
- 『float:left;』で、左寄せで、右側に要素を回りこませるように設定しています。
ここでは、ボタンごとにコードを区切るために一緒に書いてますけど・ｗ・
縦並びのソーシャルボタン部分
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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div style='clear: both;'/>
●CSS部分
iframe.twitter-share-button.twitter-count-vertical {height: 60px !important; width: 54px !important; margin-bottom:7px;}
また、その他のHTML部分は、
- 『<script>~~</script>』の間にあった、『"』は『"』に変更になっています。
- 「TwitterのID」の場所には、ご使用のツイッターアカウントIDを入れて下さい。2ヶ所あります。
- 『data-lang='en'』の部分で、表記は英語に設定しました。
最後の『<div style='clear: both;'/>』は、IEでの表示が崩れたので、なんとかしようと試したところ、これでうまくいったので。他に、いい設定法があるかもしれません。IEの表示を確認しながら、入れるかどうか決めて下さい。
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+１ボタン
参考サイト
僕らはみんな歪ている: [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: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
●CSS部分
なし
HTML部分は、
- こちらも、公式からのコードでは『href='入力URL'』になるところを、『expr:href='data:post.url'』にして、記事毎の+１を拾うように変更しています。
はてなブックマークボタン
参考サイト
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から、
- 記事毎のブックマーク数を取れるように変更。
縦並び部分の全体として
まとまりの下に「いいね」ボタンの追加
公式
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&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font&height=35' style='border:none; overflow:hidden; width:550px; height:35px;'/></div>
少し見づらいですが、公式から設定仕切ってしまえるような内容ですので、そう困らないと思います。
コピペする場合は、「サイトURL」に自分のブログのURLを入れるようにして下さい。但し、bloggerHTML特有の書き換えが必要かもしれませんので、公式から持ってくるほうが楽だと思います。
以上！
とても長くなってしまいましたが、コピペでもいいし、ひとつひとつでもいいし、見ながらすれば、きっとこのブログの記事ヘッダ部分程度には並べられると思います。
広告ブロックを使うと、ちょっと縦並びの意味が分からない残念なことになりかねませんが、それを気にするときっとデザイン出来なくなるので、気にしない事として、ちょっと頑張った感もでるし、見た目も賑やかになるこの並び。
一度挑戦するのもいいかと思って、〆ます。
追記
[blogger]記事ヘッダーのソーシャルボタンの見直し - sunabox
縦並びの部分で、記事ヘッダにあるのに果たして送るボタンが必要か？ その横には「忍者おまとめボタン」でシェアボタンがあるのに。 下にあるものは、プロフィール下に「Twitterフォロー」と「LikeB ...
後日、少し変更を加えています。興味があればご一緒に。
いつも参考させていただいています！
返信削除上部にAdWordsとソーシャルボタンを設置したのですが、
スマートフォンでも同様に表示されてしまい、非常にみずらい形になってしまいます。。。
sunaboxさんのスマートフォンでは表示されていないのですが、どのようにすれば表示されないようにできるのでしょうか。
コードに詳しくなく探り探りなんですが、もしご存知でしたらぜひご教示いただけないでしょうか？！
ありがおうございます！試しにやってみました！
返信削除2）とサイトURLはうまくいきました！
しかし、知識が足りないのか1）
テンプレートをリセットし、投稿は表示されるようになりました！
返信削除しかし、知識が足りないのか1）を試したところ、
AdWordsとソーシャルボタンが表示されません。。。
ソースもっかい見てます。
返信削除・記事ヘッダの、広告とソーシャルボタンが
＜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＞は、記事本文であることを示すタグになるので、広告とソーシャルボタンのコードには必要ないので、消しちゃって下さい。
これでどうだ！(・・*)。。
どうしてもブラウザの画面になりますが、こういう感じで、伝われば・・・と思います。
返信削除丁寧ありがとうございます！
返信削除画象もわかりやすく、とても参考になりました！
テンプレートのカスタマイズでみるとコードと、ブラウザのソースコードで若干異なるようで戸惑いましたが、たぶんこれで大丈夫だと思っています！（自己判断ですが、、、）
勉強になりました！
次の目標は、投稿毎に、記事したにAdWordsを設定することです！また、ブログを参考し、設定してみます！
コメントありがとうございます。
返信削除うまくいかない時はしんどいですよね。
早速、サイトのソースを確認させて頂きました。
１）について。
ソースを見ると、＜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」を選んだ時か、すごく横長くしたときに表示が崩れて気付く程度ですｗ
踏まえてソースコードを見ると、
＜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』の直前に書いてあげて下さい（「＜＞」は半角に直してください～）。
スクリプトの呼び出しコードは１つで大丈夫です。
最後に、ソースを見ていて、ヘッダ下の「いいね」の横長いボタン「standard」ですが、URLの指定箇所が「サイトURL」のままになっていますので、Facebookファンページか、ブログのトップページに変更してあげてくださいね。
こんなところでどうでしょう？・ｗ・