ウェブ関連/ブックマーク用ボタン
をテンプレートにして作成
開始行:
ブログなどに貼り付けるブックマーク用ボタンのリスト
#contents
*Google +1 [#g0796178]
以下のページでコードを取得してブログ等に貼り付ける
[[+1 をウェブサイトに表示:http://www.google.com/intl/ja/w...
上記のページでサイズやタイプを選ぶとコードが生成される。
生成例.
次のコードをコピーして、サイトに貼り付けてください。
<!-- このタグを +1 ボタンを表示する場所に挿入してくださ...
<g:plusone size="medium"></g:plusone>
<!-- この render 呼び出しを適切な位置に挿入してください ...
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type =...
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; ...
})();
</script>
タグの部分をページのボタンを表示したい部分にコピペ。
Javascriptは、<head>タグの中に追記する。
*はてなブックマーク [#xd5ef94a]
下記のページで、ページ情報を入力し、タイプを選ぶとコード...
[[はてなブックマークボタンの作成・設置について:http://b.h...
生成例.
<a href="http://b.hatena.ne.jp/entry/http://wiki.t-y4.co...
a タグは、ページのボタンを表示したい部分にコピペ。
Javascriptは、<head>タグの中に追記する。
**pukiwikiのページに貼る場合は [#l0e04ae0]
URLとページタイトルが自動的に変わるようにPHPのスクリプト...
例.
<a href="http://b.hatena.ne.jp/entry/http://wiki.t-y4.co...
a タグの href と data-hatena-bookmark-title に PHPのスク...
*livedoorクリップ [#p1c462cb]
下記のページから画像を選んでコードをコピペ。
[[ブログに「clip!」ボタンを設定しよう!:http://clip.lived...
**pukiwikiのページに貼る場合は [#mfb26e8b]
URLとページタイトルが自動的に変わるようにPHPのスクリプト...
例.文字コードがUTF-8の場合
<a href="http://clip.livedoor.com/redirect?link=http://w...
*Yahoo!ブックマーク [#rf8500e1]
下記のページからタイプを選んでコードをコピペ。
[[「Yahoo!ブックマークに登録」ボタン・アイコン:http://boo...
ボタンを表示したいところにコピペするだけ
*Buzzurl [#y1f269d3]
下記のページからアイコンとブログを選んでコードを生成。
[[ブックマークアイコン:http://buzzurl.jp/icongenerator/]]
このコードをボタンを表示したい部分にコピペ。
**pukiwikiのページに貼る場合は [#x55bae18]
URLとが自動的に変わるようにPHPのスクリプトを挿入
例.
<a href="http://buzzurl.jp/entry/http://wiki.t-y4.com/in...
*tumblr [#qf7f4e55]
以下のページでコードを取得してブログ等に貼り付ける
[[Tumblr共有ボタン:http://www.tumblr.com/docs/ja/share_bu...
上記のページでタイプを選ぶとコードが生成される。
生成例.
ステップ1
<script type="text/javascript" src="http://platform.tumb...
ステップ2
<a href="http://www.tumblr.com/share" title="Share on Tu...
Javascriptは、<head>タグの中に追記する。
aタグの部分をページのボタンを表示したい部分にコピペ。
*twitter [#e84babaa]
以下のページでコードを取得してブログ等に貼り付ける
[[Twitterボタン:https://twitter.com/about/resources/butto...
上記のページでタイプを選ぶとコードが生成される。
そのコードをページのボタンを表示したい部分にコピペ。
**pukiwikiのページに貼る場合は [#c918dc1f]
pukiwikの場合、初期値のままではURLがうまく変換されない。
[[Twitterボタン:https://twitter.com/about/resources/butto...
以下のソースのように data-url の部分にURLが自動的に変わる...
<a href="https://twitter.com/share" class="twitter-share...
*facebook [#r9e23a9d]
以下のプラグインのページでコードを取得する
http://developers.facebook.com/docs/plugins/
**Like Button [#y8472480]
タイプを選らんでコードを生成する。
IFRAMEが簡単ですがこれからはHTML5かと
1)
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
2)
<div class="fb-like" data-send="true" data-layout="butto...
1)をbodyタグの直後にコピペ、2)をページのボタンを表示した...
*del.icio.us [#n994bbeb]
以下のページでコードを取得する
http://delicious.com/tools
ページのボタンを表示したい部分にコピペ。
**pukiwikiのページに貼る場合は [#la62acda]
URLとページタイトルが自動的に変わるようにPHPのスクリプト...
例.
<a href="http://www.delicious.com/save" onclick="window....
url= のあとの encodeURIComponent と title= のあとの encod...
*ボタンの設置方法 [#af478b1f]
tableタグで設置するのは、おしゃれじゃないので、ググって以...
divタグでfloat: left;
**html [#z9b49f5a]
<div id="bookmark">
<div class="google">
<div class="g-plusone" data-size="medium"></div>
</div><!-- div.google END -->
<div class="twitter">
・・・・・
</div><!-- div.twitter END -->
<div class="facebook">
・・・・・
</div><!-- div.facebook END -->
<div class="clear"></div>
</div><!-- div#bookmark END -->
**CSS [#f2194550]
#bookmark {
margin: 10px 0px 10px 40px;
}
#bookmark .google {
float: left;
margin: 0px 5px 0px 0px;
padding: 0px;
display: inline;
width: 80px;!important;
}
#bookmark .twitter {
float: left;
margin: 0px 5px 0px 0px;
padding: 0px;
display: inline;
width: 105px;!important;
}
#bookmark .facebook {
float: left;
margin: 0px 5px 0px 0px;
padding: 0px;
display: inline;
width: 120px;!important;
}
.clear {
clear: both;
}
参考サイト:http://www.netpico.jp/blog/cat57/post_694.html
[[ウェブ関連]]
終了行:
ブログなどに貼り付けるブックマーク用ボタンのリスト
#contents
*Google +1 [#g0796178]
以下のページでコードを取得してブログ等に貼り付ける
[[+1 をウェブサイトに表示:http://www.google.com/intl/ja/w...
上記のページでサイズやタイプを選ぶとコードが生成される。
生成例.
次のコードをコピーして、サイトに貼り付けてください。
<!-- このタグを +1 ボタンを表示する場所に挿入してくださ...
<g:plusone size="medium"></g:plusone>
<!-- この render 呼び出しを適切な位置に挿入してください ...
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type =...
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; ...
})();
</script>
タグの部分をページのボタンを表示したい部分にコピペ。
Javascriptは、<head>タグの中に追記する。
*はてなブックマーク [#xd5ef94a]
下記のページで、ページ情報を入力し、タイプを選ぶとコード...
[[はてなブックマークボタンの作成・設置について:http://b.h...
生成例.
<a href="http://b.hatena.ne.jp/entry/http://wiki.t-y4.co...
a タグは、ページのボタンを表示したい部分にコピペ。
Javascriptは、<head>タグの中に追記する。
**pukiwikiのページに貼る場合は [#l0e04ae0]
URLとページタイトルが自動的に変わるようにPHPのスクリプト...
例.
<a href="http://b.hatena.ne.jp/entry/http://wiki.t-y4.co...
a タグの href と data-hatena-bookmark-title に PHPのスク...
*livedoorクリップ [#p1c462cb]
下記のページから画像を選んでコードをコピペ。
[[ブログに「clip!」ボタンを設定しよう!:http://clip.lived...
**pukiwikiのページに貼る場合は [#mfb26e8b]
URLとページタイトルが自動的に変わるようにPHPのスクリプト...
例.文字コードがUTF-8の場合
<a href="http://clip.livedoor.com/redirect?link=http://w...
*Yahoo!ブックマーク [#rf8500e1]
下記のページからタイプを選んでコードをコピペ。
[[「Yahoo!ブックマークに登録」ボタン・アイコン:http://boo...
ボタンを表示したいところにコピペするだけ
*Buzzurl [#y1f269d3]
下記のページからアイコンとブログを選んでコードを生成。
[[ブックマークアイコン:http://buzzurl.jp/icongenerator/]]
このコードをボタンを表示したい部分にコピペ。
**pukiwikiのページに貼る場合は [#x55bae18]
URLとが自動的に変わるようにPHPのスクリプトを挿入
例.
<a href="http://buzzurl.jp/entry/http://wiki.t-y4.com/in...
*tumblr [#qf7f4e55]
以下のページでコードを取得してブログ等に貼り付ける
[[Tumblr共有ボタン:http://www.tumblr.com/docs/ja/share_bu...
上記のページでタイプを選ぶとコードが生成される。
生成例.
ステップ1
<script type="text/javascript" src="http://platform.tumb...
ステップ2
<a href="http://www.tumblr.com/share" title="Share on Tu...
Javascriptは、<head>タグの中に追記する。
aタグの部分をページのボタンを表示したい部分にコピペ。
*twitter [#e84babaa]
以下のページでコードを取得してブログ等に貼り付ける
[[Twitterボタン:https://twitter.com/about/resources/butto...
上記のページでタイプを選ぶとコードが生成される。
そのコードをページのボタンを表示したい部分にコピペ。
**pukiwikiのページに貼る場合は [#c918dc1f]
pukiwikの場合、初期値のままではURLがうまく変換されない。
[[Twitterボタン:https://twitter.com/about/resources/butto...
以下のソースのように data-url の部分にURLが自動的に変わる...
<a href="https://twitter.com/share" class="twitter-share...
*facebook [#r9e23a9d]
以下のプラグインのページでコードを取得する
http://developers.facebook.com/docs/plugins/
**Like Button [#y8472480]
タイプを選らんでコードを生成する。
IFRAMEが簡単ですがこれからはHTML5かと
1)
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
2)
<div class="fb-like" data-send="true" data-layout="butto...
1)をbodyタグの直後にコピペ、2)をページのボタンを表示した...
*del.icio.us [#n994bbeb]
以下のページでコードを取得する
http://delicious.com/tools
ページのボタンを表示したい部分にコピペ。
**pukiwikiのページに貼る場合は [#la62acda]
URLとページタイトルが自動的に変わるようにPHPのスクリプト...
例.
<a href="http://www.delicious.com/save" onclick="window....
url= のあとの encodeURIComponent と title= のあとの encod...
*ボタンの設置方法 [#af478b1f]
tableタグで設置するのは、おしゃれじゃないので、ググって以...
divタグでfloat: left;
**html [#z9b49f5a]
<div id="bookmark">
<div class="google">
<div class="g-plusone" data-size="medium"></div>
</div><!-- div.google END -->
<div class="twitter">
・・・・・
</div><!-- div.twitter END -->
<div class="facebook">
・・・・・
</div><!-- div.facebook END -->
<div class="clear"></div>
</div><!-- div#bookmark END -->
**CSS [#f2194550]
#bookmark {
margin: 10px 0px 10px 40px;
}
#bookmark .google {
float: left;
margin: 0px 5px 0px 0px;
padding: 0px;
display: inline;
width: 80px;!important;
}
#bookmark .twitter {
float: left;
margin: 0px 5px 0px 0px;
padding: 0px;
display: inline;
width: 105px;!important;
}
#bookmark .facebook {
float: left;
margin: 0px 5px 0px 0px;
padding: 0px;
display: inline;
width: 120px;!important;
}
.clear {
clear: both;
}
参考サイト:http://www.netpico.jp/blog/cat57/post_694.html
[[ウェブ関連]]
ページ名: