DoboWiki
Top
> ShareButton/FacebookLike をテンプレートにして作成
ShareButton/FacebookLike をテンプレートにして作成
開始行:
#title(facebook いいねボタンを表示する)
#contents
-[[「様々なシェア、ブックマークボタン(Google+1、twitter...
*facebook いいねボタンを表示する [#rc542230]
#ref(../facebook7.png)
**基本的なコード [#i22579ce]
facebookのいいねボタンは「[[いいね!ボタン - ソーシャルプ...
取得できるコードはJavaScript SDK(XFBML)とiframeがありま...
「いいね!」するURLを「http://dobon.net/」、Widthを「400...
#prescroll(wrap=true){{
<iframe src="https://www.facebook.com/plugins/like.php?hr...
}}
同じ条件で、JavaScript SDKのコードは次のようになります。...
#prescroll(wrap=true){{
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&v...
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
}}
もう一つのコードは、ボタンを表示する箇所に記述します。
#prescroll(wrap=true){{
<div class="fb-like" data-href="http://dobon.net/" data-w...
}}
**色々なオプション [#x7c52fa0]
***レイアウト [#o09e118a]
レイアウトを「button_count」にすると、いいねボタン内の右...
レイアウトを「standard」にすると、いいねボタン(あるいは...
レイアウトを「box_count」にすると、いいねボタンの上にカウ...
レイアウトを「button」にすると、カウント数が表示されなく...
***アクションタイプ [#w6a67958]
アクションタイプを「like」にすると、日本語では、ボタンに...
***ボタンサイズ [#ocf21b48]
ボタンサイズを「small」にすると小さなボタン、「large」に...
***シェアボタンを追加 [#c75f198a]
「シェアボタンを追加」にチェックを入れると、いいねボタン...
***Width [#r7cb85ba]
レイアウトがstandardの時、幅をpx単位で指定します。最小値...
***友達の顔を表示する [#w75e2851]
「友達の顔を表示する」にチェックを入れると、レイアウトがs...
**他の言語で表示する [#x99aba7f]
JavaScript SDKのコードで、「connect.facebook.net/ja_JP/sd...
iframeのコードを使った時に言語を英語に固定するには、"loca...
#prescroll(wrap=true){{
<iframe src="https://www.facebook.com/plugins/like.php?lo...
}}
**フォロー、保存、送信、シェアボタンなど [#n83fe026]
フォローボタン、保存ボタン、送信ボタン、シェアボタンなど...
**(X)HTML validにする [#d9d43047]
ここで紹介しているコードは、古いコードです。
facebookのいいねボタンのコードをvalidにする方法は、「[[Fa...
XFBMLのコードの場合は、JavaScriptでタグを追加します。
#prescroll(wrap=true){{
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfb...
<div id="facebook_like_button">
<script type="text/javascript">
(function(){
var fb = document.createElement("fb:like");
fb.setAttribute("href","");
fb.setAttribute("layout","button_count");
fb.setAttribute("send","false");
fb.setAttribute("width","120");
fb.setAttribute("show_faces","false");
fb.setAttribute("action","like");
fb.setAttribute("font","");
document.getElementById("facebook_like_button").appendChi...
})();
</script>
</div>
}}
iframeのコードの場合は、iframeの代わりにobjectを使用しま...
#prescroll(wrap=true){{
<object data="http://www.facebook.com/plugins/like.php?hr...
}}
ただしIEでは正しく表示されませんので、IEではiframeを使う...
#prescroll(wrap=true){{
<!--[if IE]>
<iframe src="http://www.facebook.com/plugins/like.php?hre...
<![endif]-->
<!--[if !IE]><-->
<object data="http://www.facebook.com/plugins/like.php?hr...
<!--><![endif]-->
}}
**コメント [#cbe95f9f]
#comment
//これより下は編集しないでください
#pageinfo([[:Category/インターネット]],2011-08-31 (水) 03...
終了行:
#title(facebook いいねボタンを表示する)
#contents
-[[「様々なシェア、ブックマークボタン(Google+1、twitter...
*facebook いいねボタンを表示する [#rc542230]
#ref(../facebook7.png)
**基本的なコード [#i22579ce]
facebookのいいねボタンは「[[いいね!ボタン - ソーシャルプ...
取得できるコードはJavaScript SDK(XFBML)とiframeがありま...
「いいね!」するURLを「http://dobon.net/」、Widthを「400...
#prescroll(wrap=true){{
<iframe src="https://www.facebook.com/plugins/like.php?hr...
}}
同じ条件で、JavaScript SDKのコードは次のようになります。...
#prescroll(wrap=true){{
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&v...
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
}}
もう一つのコードは、ボタンを表示する箇所に記述します。
#prescroll(wrap=true){{
<div class="fb-like" data-href="http://dobon.net/" data-w...
}}
**色々なオプション [#x7c52fa0]
***レイアウト [#o09e118a]
レイアウトを「button_count」にすると、いいねボタン内の右...
レイアウトを「standard」にすると、いいねボタン(あるいは...
レイアウトを「box_count」にすると、いいねボタンの上にカウ...
レイアウトを「button」にすると、カウント数が表示されなく...
***アクションタイプ [#w6a67958]
アクションタイプを「like」にすると、日本語では、ボタンに...
***ボタンサイズ [#ocf21b48]
ボタンサイズを「small」にすると小さなボタン、「large」に...
***シェアボタンを追加 [#c75f198a]
「シェアボタンを追加」にチェックを入れると、いいねボタン...
***Width [#r7cb85ba]
レイアウトがstandardの時、幅をpx単位で指定します。最小値...
***友達の顔を表示する [#w75e2851]
「友達の顔を表示する」にチェックを入れると、レイアウトがs...
**他の言語で表示する [#x99aba7f]
JavaScript SDKのコードで、「connect.facebook.net/ja_JP/sd...
iframeのコードを使った時に言語を英語に固定するには、"loca...
#prescroll(wrap=true){{
<iframe src="https://www.facebook.com/plugins/like.php?lo...
}}
**フォロー、保存、送信、シェアボタンなど [#n83fe026]
フォローボタン、保存ボタン、送信ボタン、シェアボタンなど...
**(X)HTML validにする [#d9d43047]
ここで紹介しているコードは、古いコードです。
facebookのいいねボタンのコードをvalidにする方法は、「[[Fa...
XFBMLのコードの場合は、JavaScriptでタグを追加します。
#prescroll(wrap=true){{
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfb...
<div id="facebook_like_button">
<script type="text/javascript">
(function(){
var fb = document.createElement("fb:like");
fb.setAttribute("href","");
fb.setAttribute("layout","button_count");
fb.setAttribute("send","false");
fb.setAttribute("width","120");
fb.setAttribute("show_faces","false");
fb.setAttribute("action","like");
fb.setAttribute("font","");
document.getElementById("facebook_like_button").appendChi...
})();
</script>
</div>
}}
iframeのコードの場合は、iframeの代わりにobjectを使用しま...
#prescroll(wrap=true){{
<object data="http://www.facebook.com/plugins/like.php?hr...
}}
ただしIEでは正しく表示されませんので、IEではiframeを使う...
#prescroll(wrap=true){{
<!--[if IE]>
<iframe src="http://www.facebook.com/plugins/like.php?hre...
<![endif]-->
<!--[if !IE]><-->
<object data="http://www.facebook.com/plugins/like.php?hr...
<!--><![endif]-->
}}
**コメント [#cbe95f9f]
#comment
//これより下は編集しないでください
#pageinfo([[:Category/インターネット]],2011-08-31 (水) 03...
ページ名:
▲
▼
[
トップ
] [
新規
|
子ページ作成
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]