ブログなどに貼り付けるブックマーク用ボタンのリスト

Google +1

以下のページでコードを取得してブログ等に貼り付ける

+1 をウェブサイトに表示

上記のページでサイズやタイプを選ぶとコードが生成される。

生成例.

次のコードをコピーして、サイトに貼り付けてください。

<!-- このタグを +1 ボタンを表示する場所に挿入してください -->
<g:plusone size="medium"></g:plusone>

<!-- この 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>

タグの部分をページのボタンを表示したい部分にコピペ。

Javascriptは、<head>タグの中に追記する。

はてなブックマーク

下記のページで、ページ情報を入力し、タイプを選ぶとコードが生成される。

はてなブックマークボタンの作成・設置について

生成例.

<a href="http://b.hatena.ne.jp/entry/http://wiki.t-y4.com/" class="hatena-bookmark-button" data-hatena-bookmark-title="hogehoge" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

a タグは、ページのボタンを表示したい部分にコピペ。

Javascriptは、<head>タグの中に追記する。

pukiwikiのページに貼る場合は

URLとページタイトルが自動的に変わるようにPHPのスクリプトを挿入

例.

<a href="http://b.hatena.ne.jp/entry/http://wiki.t-y4.com/index.php?<?php echo rawurlencode($title);?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php echo $title ?> - <?php echo $page_title ?>" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>

a タグの href と data-hatena-bookmark-title に PHPのスクリプトを挿入

livedoorクリップ

下記のページから画像を選んでコードをコピペ。

ブログに「clip!」ボタンを設定しよう!

pukiwikiのページに貼る場合は

URLとページタイトルが自動的に変わるようにPHPのスクリプトを挿入

例.文字コードがUTF-8の場合

<a href="http://clip.livedoor.com/redirect?link=http://wiki.t-y4.com/index.php?<?php echo rawurlencode($title);?>&title=<?php echo $title ?>%20-%20<?php echo $page_title ?>&ie=UTF-8" class="ldclip-redirect" title="この記事をクリップ!"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_12_w.gif" width="16" height="12" alt="この記事をクリップ!" style="border: none;vertical-align: middle;" /></a>

Yahoo!ブックマーク

下記のページからタイプを選んでコードをコピペ。

「Yahoo!ブックマークに登録」ボタン・アイコン

ボタンを表示したいところにコピペするだけ

Buzzurl

下記のページからアイコンとブログを選んでコードを生成。

ブックマークアイコン

このコードをボタンを表示したい部分にコピペ。

pukiwikiのページに貼る場合は

URLとが自動的に変わるようにPHPのスクリプトを挿入

例.

<a href="http://buzzurl.jp/entry/http://wiki.t-y4.com/index.php?<?php echo rawurlencode($title);?>" title="Buzzurlにブックマーク" target="_blank"><img src="http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_05.gif" alt="Buzzurlにブックマーク" style="border:0"></a><a href="http://buzzurl.jp/entry/http://wiki.t-y4.com/index.php?<?php echo rawurlencode($title);?>" title="Buzzurlにブックマーク" target="_blank"><img src="http://api.buzzurl.jp/api/counter/http://wiki.t-y4.com/index.php?<?php echo rawurlencode($title);?>" alt="Buzzurlにブックマーク" style="border:0"></a>

tumblr

以下のページでコードを取得してブログ等に貼り付ける

Tumblr共有ボタン

上記のページでタイプを選ぶとコードが生成される。

生成例.

ステップ1

<script type="text/javascript" src="http://platform.tumblr.com/v1/share.js"></script>

ステップ2

<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:20px; height:20px; background:url('http://platform.tumblr.com/v1/share_4.png') top left no-repeat transparent;">Share on Tumblr</a>

Javascriptは、<head>タグの中に追記する。

aタグの部分をページのボタンを表示したい部分にコピペ。

twitter

以下のページでコードを取得してブログ等に貼り付ける

Twitterボタン

上記のページでタイプを選ぶとコードが生成される。 そのコードをページのボタンを表示したい部分にコピペ。

pukiwikiのページに貼る場合は

pukiwikの場合、初期値のままではURLがうまく変換されない。

Twitterボタンの画面で「URLを共有」の項目にダミーの文字を入れてコードを生成。

以下のソースのように data-url の部分にURLが自動的に変わるようにPHPのスクリプトを挿入

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://wiki.t-y4.com/index.php?<?php echo rawurlencode($title);?>" data-via="ty4_yoshi" data-lang="ja">ツイート</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>

facebook

以下のプラグインのページでコードを取得する

http://developers.facebook.com/docs/plugins/

Like Button

タイプを選らんでコードを生成する。 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="button_count" data-width="200" data-show-faces="false"></div>

1)をbodyタグの直後にコピペ、2)をページのボタンを表示したい部分にコピペ。

del.icio.us

以下のページでコードを取得する

http://delicious.com/tools

ページのボタンを表示したい部分にコピペ。

pukiwikiのページに貼る場合は

URLとページタイトルが自動的に変わるようにPHPのスクリプトを挿入

例.

<a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('http://wiki.t-y4.com/index.php?<?php echo rawurlencode($title);?>')+'&title='+encodeURIComponent('<?php echo $title ?> - <?php echo $page_title ?>'),'delicious', 'toolbar=no,width=550,height=550'); return false;"><img src="http://www.delicious.com/static/img/delicious.small.gif" height="10" width="10" alt="Delicious" /> Save this on Delicious</a>

url= のあとの encodeURIComponent と title= のあとの encodeURIComponent にPHPスクリプトを挿入

ボタンの設置方法

tableタグで設置するのは、おしゃれじゃないので、ググって以下の方法で設置

divタグでfloat: left;

html

<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

#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

ウェブ関連

Last-modified: 2012-05-08 (火) 18:24:57 (2407d)
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS