ホームページにtwitter・はてブのオリジナルボタンを設置する方法
前回、wordpressにオリジナルのtwitter、はてなブックマークのボタンを設置する方法を書きましたが、今回はホームページに設置する方法について書きたいと思います。
基本的に設置方法は同じですが、wordpressだと自動的にページのタイトル・URLを取得するタグがありましたが、ホームページの場合、それがありません。
1ページずつタイトルとURLを変えたボタンを設置するのは面倒ですよね。
そこで、いちいちタイトルとURLを変えなくてもいい方法を考えました。
ページタイトルを定義する
ページタイトルは、はじめからPHPの関数にしておけば、それをそのまま使うことができますので、PHPで書きます。
<?php $tittle="ページのタイトル" ?>
これをheadのタイトルにも使えば、一度の記述で済みます。
<tittle><?php echo $tittle ?></tittle>
ページ毎のURLを取得する
次にページのURLですが、まずページ毎のファイル名を取得します。
<?php $page_url=getenv('REQUEST_URI'); ?>
これだと、トップページなら「/」、sample.htmlなら「/sample.html」しか取得できませんので、「/」の前の部分を別に定義します。
ドメインがsample.comなら、「http://sample.com」の部分を別の関数にします。
※最後の「/」は必ず抜いてください。
<?php $url=http://sample.com ?>
これで、$urlと$page_urlを合わせると、そのページのURLが出来上がりました。
タイトルとURLをエンコードする
これで、ページのタイトル・URLが揃いましたが、これをこのまま使ってしまうと、前回の記事で書いたように、「????」と文字が化けてしまうので、エンコードします。
<?php
$page_url=getenv('REQUEST_URI');
$URL="$url$page_url";
$encodeURL=urlencode(mb_convert_encoding($URL,"UTF-8"));
$encodeTITLE=urlencode(mb_convert_encoding($tittle,"UTF-8"));
?>
これでエンコードが完了しました。あとはこれをオリジナルボタンのソースに挿入するだけです。
twitterのオリジナルボタンを設置するソース
<a href="http://twitter.com/share?count=horizontal&original_referer=<?php echo $encodeURL ?>&text=<?php echo $encodeTITLE ?>&url=<?php echo $encodeURL ?>" onclick="window.open(encodeURI(decodeURI(this.href))
, ‘tweetwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1′); return false;" target="_blank"><img src="画像のURL・パス" alt="つぶやく" width="幅" height="高さ" /></a>
これに画像の情報を入力すれば、twitterのオリジナルボタンを設置できます。
ちなみに前回にも書きましたが、 小窓で開くことができないので、新しいウィンドウでつぶやくようになってます。
小窓を開いて、つぶやくようにできる方法をご存知の方はぜひ情報をコメント欄よりお寄せください。
はてなブックマークのオリジナルボタンを設置するソース
同様に、はてなブックマークのオリジナルボタンを設置するソースは以下のようになります。
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $encodeURL ?>&title=<?php echo $encodeTITLE ?>" target="_blank"><img src="画像のURL・パス" alt="このエントリーをはてなブックマークに追加" width="幅" height="高さ" /></a>
はてなブックマークのソースも画像の情報を書き換えるだけです。
参考になれば幸いです。
せっかく設置できたので、ホームページ作成のハルリでオプションで出そうかどうしようか検討中です。
ご希望の方がいらっしゃったら当サービスまでお問い合わせください。
[…] 詳しくはこちらをご覧ください→ホームページにtwitter・はてブのオリジナルボタンを設置する方法 […]
ブログトップページのデザインを変更 | ホームページ作成のハルリのブログ
2012.1.12 2:02 PM