DoboWiki
Top
> ShareButton をテンプレートにして作成
ShareButton をテンプレートにして作成
開始行:
#title(様々なシェア、ブックマークボタン(Google+1、twitte...
#contents
*様々なシェア、ブックマークボタン(Google+1、twitter、fac...
ここでは、自分のブログやサイトに設置できる様々なブックマ...
**Google +1 ボタン [#za99c703]
#ref(google_plusone3.png)
Google+1ボタン(プラスワンボタン)については、「[[Google ...
**twitter ツイートボタン [#r4b46017]
#ref(twitter2.png)
twitterのツイートボタンについては、「[[twitter ツイートボ...
**facebookのいいねボタン [#ze07e9a7]
#ref(facebook7.png)
facebookのいいねボタンについては、「[[facebook いいねボタ...
**はてなブックマークボタン [#l60a58de]
#ref(hatena4.png)
はてなブックマークボタンについては、「[[はてなブックマー...
**Tumblrボタン [#oede49a0]
#ref(tumblr1.png)
Tumblrボタン(及び、投稿ボタン、フォローボタン)は、「[[B...
共有ボタンの基本的なコード(JavaScript)は、以下のように...
#prescroll(wrap=true,}}=}}){{
<a class="tumblr-share-button" data-color="blue" data-not...
<script>!function(d,s,id){var js,ajs=d.getElementsByTagNa...
}}
上のように「data-notes」が「right」の時は、カウンターがボ...
**LinkedIn Share Button [#cd89224d]
#ref(linkedin1.png)
LinkedInは、海外で有名なSNSサイトです。LinkedInのShare Bu...
基本的なコード(言語が日本語で、カウンターを上に表示)は...
#prescroll(wrap=true){{
<script src="//platform.linkedin.com/in.js" type="text/ja...
<script type="IN/Share" data-counter="top"></script>
}}
「data-counter」を「right」にするとカウンターが右に表示さ...
**Pocketボタン [#y780ad9c]
#ref(pocket1.png)
Pocketボタンのコードは、「[[Pocket for Publishers: Pocket...
#prescroll(wrap=true,}}=}}){{
<a data-pocket-label="pocket" data-pocket-count="vertical...
<script type="text/javascript">!function(d,i){if(!d.getEl...
}}
「data-pocket-count」が「vertical」の時は、カウンターがボ...
保存するURLを指定する場合は、「data-save-url」属性を使用...
**LINEで送るボタン [#uc532744]
#ref(line1.png)
LINEで送るボタンのコードは、「[[設置方法|LINEで送るボタ...
#prescroll(wrap=true){{
<div class="line-it-button" style="display: none;" data-t...
<script src="//scdn.line-apps.com/n/line_it/thirdparty/lo...
}}
LINEで送る機能を、単純なリンクのみで作成することもできま...
#prescroll(wrap=true){{
<a href="http://line.me/R/msg/text/?http%3A%2F%2Fdobon.ne...
}}
**Pinterestの保存ボタン [#o8b7e9be]
#ref(pinterest1.png)
Pinterestの保存ボタン(及びフォローボタン)のコードは、「...
まず、ボタンを表示されたいところに、以下のコードを記述し...
#prescroll(wrap=true){{
<a data-pin-do="buttonBookmark" data-pin-save="true" href...
}}
そして、</body>タグの直前に、以下のコードを記述します。
#prescroll(wrap=true){{
<script async defer src="//assets.pinterest.com/js/pinit....
}}
ページのURLを「http://dobon.net/」、イメージのURLを「http...
#prescroll(wrap=true){{
<a data-pin-do="buttonPin" data-pin-count="above" data-pi...
}}
**reddit.comボタン [#abdabb32]
#ref(reddit1.png)
[[reddit.com>http://www.reddit.com]]というソーシャルニュ...
ボタンは何種類かありますが、そのうち、評価数の表示と、評...
#prescroll(wrap=true){{
<script type="text/javascript" src="//www.redditstatic.co...
}}
**mixiチェックボタンとイイネ!ボタン [#nd78a154]
これらのボタンを作成するには、登録が必要です。設置方法は...
**GREE いいね!ボタン [#s909ac83]
「[[Social Feedback - GREE Developer Center(グリー デベ...
**Delicious Save Buttons [#a25bc185]
Deliciousの「Save this on Delicious」ボタンの設置方法は、...
''以下の機能は、廃止されたようです。''
さらに登録者数やその日にちの推移のグラフも表示できます。...
#prescroll(wrap=true){{
<script type="text/javascript">
if (typeof window.Delicious == "undefined") window.De...
</script>
<script src="http://static.delicious.com/js/d2-blogbadge....
}}
#ref(delicious1.png)
**Messenger Connect Sharing badge [#g92b386d]
Windows Live Messenger Connect badgeを表示させる方法は、...
例えば「http://dobon.net/」のMessenger Connect Sharing ba...
#prescroll(wrap=true){{
<a href="http://profile.live.com/badge?url=http%3A%2F%2Fd...
}}
アイコンの色は、白以外にオレンジも用意されており、オレン...
#ref(live1.png)
**複数ブックマークに対応したサービス [#abe04c6a]
上記で紹介した以外にも世界中にはブックマークサービスが山...
***AddThis [#w283ca45]
#ref(addthis7.png)
一番有名で、機能も豊富なのは、AddThisです。AddThisについ...
***AddToAny [#m1d3b526]
#ref(addtoany1.png)
AddToAnyもAddThisと同様のサービスを提供しています。AddToA...
***ShareThis [#oc95e3ef]
ShareThisも海外のサービスです。「[[Sharing Widget, Sharin...
**終了したサービス [#ue5080d9]
終了したサービスは、「[[廃止されたシェア、ブックマークボ...
**コメント [#bc085a91]
#comment
//これより下は編集しないでください
#pageinfo([[:Category/インターネット]],2011-09-03 (土) 18...
終了行:
#title(様々なシェア、ブックマークボタン(Google+1、twitte...
#contents
*様々なシェア、ブックマークボタン(Google+1、twitter、fac...
ここでは、自分のブログやサイトに設置できる様々なブックマ...
**Google +1 ボタン [#za99c703]
#ref(google_plusone3.png)
Google+1ボタン(プラスワンボタン)については、「[[Google ...
**twitter ツイートボタン [#r4b46017]
#ref(twitter2.png)
twitterのツイートボタンについては、「[[twitter ツイートボ...
**facebookのいいねボタン [#ze07e9a7]
#ref(facebook7.png)
facebookのいいねボタンについては、「[[facebook いいねボタ...
**はてなブックマークボタン [#l60a58de]
#ref(hatena4.png)
はてなブックマークボタンについては、「[[はてなブックマー...
**Tumblrボタン [#oede49a0]
#ref(tumblr1.png)
Tumblrボタン(及び、投稿ボタン、フォローボタン)は、「[[B...
共有ボタンの基本的なコード(JavaScript)は、以下のように...
#prescroll(wrap=true,}}=}}){{
<a class="tumblr-share-button" data-color="blue" data-not...
<script>!function(d,s,id){var js,ajs=d.getElementsByTagNa...
}}
上のように「data-notes」が「right」の時は、カウンターがボ...
**LinkedIn Share Button [#cd89224d]
#ref(linkedin1.png)
LinkedInは、海外で有名なSNSサイトです。LinkedInのShare Bu...
基本的なコード(言語が日本語で、カウンターを上に表示)は...
#prescroll(wrap=true){{
<script src="//platform.linkedin.com/in.js" type="text/ja...
<script type="IN/Share" data-counter="top"></script>
}}
「data-counter」を「right」にするとカウンターが右に表示さ...
**Pocketボタン [#y780ad9c]
#ref(pocket1.png)
Pocketボタンのコードは、「[[Pocket for Publishers: Pocket...
#prescroll(wrap=true,}}=}}){{
<a data-pocket-label="pocket" data-pocket-count="vertical...
<script type="text/javascript">!function(d,i){if(!d.getEl...
}}
「data-pocket-count」が「vertical」の時は、カウンターがボ...
保存するURLを指定する場合は、「data-save-url」属性を使用...
**LINEで送るボタン [#uc532744]
#ref(line1.png)
LINEで送るボタンのコードは、「[[設置方法|LINEで送るボタ...
#prescroll(wrap=true){{
<div class="line-it-button" style="display: none;" data-t...
<script src="//scdn.line-apps.com/n/line_it/thirdparty/lo...
}}
LINEで送る機能を、単純なリンクのみで作成することもできま...
#prescroll(wrap=true){{
<a href="http://line.me/R/msg/text/?http%3A%2F%2Fdobon.ne...
}}
**Pinterestの保存ボタン [#o8b7e9be]
#ref(pinterest1.png)
Pinterestの保存ボタン(及びフォローボタン)のコードは、「...
まず、ボタンを表示されたいところに、以下のコードを記述し...
#prescroll(wrap=true){{
<a data-pin-do="buttonBookmark" data-pin-save="true" href...
}}
そして、</body>タグの直前に、以下のコードを記述します。
#prescroll(wrap=true){{
<script async defer src="//assets.pinterest.com/js/pinit....
}}
ページのURLを「http://dobon.net/」、イメージのURLを「http...
#prescroll(wrap=true){{
<a data-pin-do="buttonPin" data-pin-count="above" data-pi...
}}
**reddit.comボタン [#abdabb32]
#ref(reddit1.png)
[[reddit.com>http://www.reddit.com]]というソーシャルニュ...
ボタンは何種類かありますが、そのうち、評価数の表示と、評...
#prescroll(wrap=true){{
<script type="text/javascript" src="//www.redditstatic.co...
}}
**mixiチェックボタンとイイネ!ボタン [#nd78a154]
これらのボタンを作成するには、登録が必要です。設置方法は...
**GREE いいね!ボタン [#s909ac83]
「[[Social Feedback - GREE Developer Center(グリー デベ...
**Delicious Save Buttons [#a25bc185]
Deliciousの「Save this on Delicious」ボタンの設置方法は、...
''以下の機能は、廃止されたようです。''
さらに登録者数やその日にちの推移のグラフも表示できます。...
#prescroll(wrap=true){{
<script type="text/javascript">
if (typeof window.Delicious == "undefined") window.De...
</script>
<script src="http://static.delicious.com/js/d2-blogbadge....
}}
#ref(delicious1.png)
**Messenger Connect Sharing badge [#g92b386d]
Windows Live Messenger Connect badgeを表示させる方法は、...
例えば「http://dobon.net/」のMessenger Connect Sharing ba...
#prescroll(wrap=true){{
<a href="http://profile.live.com/badge?url=http%3A%2F%2Fd...
}}
アイコンの色は、白以外にオレンジも用意されており、オレン...
#ref(live1.png)
**複数ブックマークに対応したサービス [#abe04c6a]
上記で紹介した以外にも世界中にはブックマークサービスが山...
***AddThis [#w283ca45]
#ref(addthis7.png)
一番有名で、機能も豊富なのは、AddThisです。AddThisについ...
***AddToAny [#m1d3b526]
#ref(addtoany1.png)
AddToAnyもAddThisと同様のサービスを提供しています。AddToA...
***ShareThis [#oc95e3ef]
ShareThisも海外のサービスです。「[[Sharing Widget, Sharin...
**終了したサービス [#ue5080d9]
終了したサービスは、「[[廃止されたシェア、ブックマークボ...
**コメント [#bc085a91]
#comment
//これより下は編集しないでください
#pageinfo([[:Category/インターネット]],2011-09-03 (土) 18...
ページ名:
▲
▼
[
トップ
] [
新規
|
子ページ作成
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]