友人から facebook の Like button(いいね! ボタン)についてメールでの問い合わせ…
コラコラ
…既に記事にしましたが…
Bloggerの共有ボタンを自作ソーシャルブックマークボタンと入れ替える方法と必要性
単独記事じゃないせいか…それとも…ブログ…読んでくれてないのか…
メールで説明は…少々面倒なので…少し手を加えて単独記事に…
facebook DEVELOPERS
細かくは上記リンクから過去記事を参照してください…
当サイトでは…記事フッターに…
右寄せで表示させています…
ハイ
綺麗に「0」が並んでいますね…(￣ー￣)邪笑
facebook の Like button(いいね! ボタン)を「Like」のまま表示するには…
「Box Count の場合」
/* 一般的なスタイル */
<iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=box_count&show_faces=false&width=48&action=like&font=arial&colorscheme=light&height=60&locale=en_US"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:48px; height:60px;'/>
/* 当サイトのスタイル */
<iframe allowtransparency='true' src='//www.facebook.com/plugins/like.php?expr:href=%3cdata%3apost.url%2f%3e&layout=box_count&show_faces=false&width=48&action=like&font=arial&colorscheme=light&height=60&locale=en_US' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:48px; height:60px;'/>
「Button Count の場合」
/* 一般的なスタイル */
<iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=20&locale=en_US"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px;'/>
/* 当サイトのスタイル */
<iframe allowtransparency='true' src='//www.facebook.com/plugins/like.php?expr:href=%3cdata%3apost.url%2f%3e&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=20&locale=en_US' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px;'/>
当サイトのスタイルは…
なにせ…「0」から動かないので…間違っているかも…です…(￣ー￣)邪笑
「Standard」は…他のボタンと並べる事を前提に書いていますので割愛します…
「いいね！」で表示したい方は…
「&locale=en_US」を削除してサイズ調整してください…
表示位置については…
「日付ヘッダー」「記事フッター」「記事ヘッダー」辺りが良いでしょう…
この内…「日付ヘッダー」「記事フッター」に関しては…
上記リンクから過去記事を参照してアレンジしてください…
ここでは…こんな感じで「記事ヘッダー」に…
右寄せでボタンを配置してみましょう…
はてなブックマーク
facebook
Twitter
Evernote
…の４種類です…
「デザイン」「HTMLの編集」「ウィジェットのテンプレートを展開」から…
「Ctrl + F」で
<div class='post-header'> を検索すると該当する箇所は…
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-header-line-1'/> の直後にボタンの記述を追加して…
「記事ヘッダー」の直後にボタンの記述
<div class='post-header'>
<div class='post-header-line-1'/>
<span style='float: right;'><a class='hatena-bookmark-button' data-hatena-bookmark-layout='vertical' href='//b.hatena.ne.jp/entry/'><img alt='hatena::bookmarks' height='20' src='//b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a> <iframe allowtransparency='true' src='//www.facebook.com/plugins/like.php?expr:href=%3cdata%3apost.url%2f%3e&layout=box_count&show_faces=false&width=48&action=like&font=arial&colorscheme=light&height=60&locale=en_US' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:48px; height:60px;'/> <a class='twitter-share-button' data-count='vertical' href='//twitter.com/share'>Tweet</a> <a href='#' onclick='Evernote.doClip({contentId:"Blog1",providerName:"Dégustation?: Sepia"}); return false;'><img alt='Clip to Evernote' src='//static.evernote.com/article-clipper-vert.png' style='margin-bottom:6px;' title='Clip to Evernote'/></a></span>
</div>
ってな感じに…(心配な方は一般的なスタイルで記述しましょう)
Evernote は…「ブログの投稿ガジェット」を切り出す設定にしてみましたが…
正しく切り出されるかは同様にアカウント持っていないので未検証です…
青文字の「Dégustation?: Sepia」部分はサイト名です…
スクリプトは…「</body>」直前にまとめて記述しています…
ボタンの「JavaScript」
<script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"/>
<script src='//platform.twitter.com/widgets.js' type='text/javascript'/>
<script src='//static.evernote.com/noteit.js' type='text/javascript'/>
現在は非同期読み込みです…
外部化した「JavaScript」を「非同期」読み込みしてページ表示を高速化
「テンプレートを保存」して完了です…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿