ダリの雑記：WEBプログラム版

メモ。

「いいね！」ボタンが押された瞬間、こちらが用意しているスクリプト（javascript）を実行させたい！

という案件があったため、ググっていると下記のサイトを見つけました。

Facebookのいいねボタンを押した時に自分で用意したjsのメソッドを呼び出す - jsdo.it - Share JavaScript, HTML5 and CSS

注意点として、「いいね！」ボタンのコードは「XFBML」で記述する必要があります。（iframeじゃ多分ダメ。）「いいね！」ボタンのコード取得はこちら

また、jQueryも読み込んでおく必要が有ります。jQueryのダウンロードはこちら

「いいね！」ボタンを設置したページに以下のようなスクリプトを埋め込みます。

■スクリプト（javascript）の例

if (window.attachEvent) {
	window.attachEvent("onload", initFunc);
}else{
	window.addEventListener("load", initFunc, false);
}

function initFunc(){
	timerID = setInterval(function () {
		if ($('.fb_edge_comment_widget.fb_iframe_widget:visible').length) {
			～実行させたいプログラムをここに記述～
			clearInterval(timerID);
		};
	}, 200);
}

01～04行：ページが読み込まれたら「initFunc()」関数を実行します。

07～14行：setIntervalでインターバルタイマーを設定し、　$('.fb_edge_comment_widget.fb_iframe_widget')に変化がないか見張ります。
（いいね！ボタンの状態が変化すると、$('.fb_edge_comment_widget.fb_iframe_widget')の状態も変化するみたいです。）
変化があったら「～実行させたいプログラムをここに記述～」部分に記述されているスクリプトが実行されます。
最後に、clearIntervalでインターバルタイマーをクリアします。

■注意点

参考にさせていただいたサイトにも書いてありますが、上記の方法では押した瞬間にスクリプトを実行させることは可能ですが、再度ユーザが訪れたとき、そのユーザがすでに「いいね！」ボタンを押しているかどうかは、判断できません。

これを判断するにはFQLを使うか（動作未確認）、「いいね！」ボタンを押してくれたユーザのFacebookIDを取得し、データベースや外部ファイルに蓄積しておく、という方法が考えられます。

ユーザのFacebookIDを取得する方法はこちらのページをご参照ください。

※ここで言うFacebookIDというのはログイン時に使用するIDではなく、登録時に連番で割り当てられる番号のことを指します。

マップ表示用スクリプト（GoogleマップAPI v3で地図とマーカー・バルーンを表示するスクリプト）を少しバージョンアップ（version1.4b2）しました。（ダウンロードはこちら）

version1.4bからの変更点は内部処理のみなので、差し替えるだけで動作します。

■使い方はこちら：マーカー個別版・マーカー複数板

■主な変更箇所

• マーカー複数版で使用する際、住所１件ごとに「get_coord.php」にアクセスすると効率悪そうなので、まとめてアクセスする仕様に変更しました。
  これにより表示速度が速くなりました。
  比較：v1.4b (旧)・v1.4b2 (新) ※ただしすでにキャッシュがとられている場合の比較です。
• Firefoxでは「nth-child」が意図通りの挙動にならないため、ブラウザごとに動作を分けました。（「アドレス」と「座標」をミックスしている時にFirefoxで不具合が起きていたため）
• 住所や座標の記述に半角スペースや改行コード、HTMLタグが入っていると不具合起きそうなので、座標取得時は取り除くようにしました。

半角スペースを取り除くための関数はこちらのサイトのプログラムを使わせていただきました。

浮浪プログラマの始末書さんのサイト

【2013/06/18修正】 結構仕様が変わっているので一部修正しました。

メモ

Facebookページ（旧ファンページ）を作成すると、Like Box（いいねボックス）なるウィジェットを自分（自社）のブログやサイトに設置できるようになります。

こんなの↓

１．まず、下記のURLにアクセスします。

http://developers.facebook.com/docs/reference/plugins/like-box/

２．Boxを調整し、コードを取得します。

• Facebook Page URL：FacebookページのURL
• Width：Boxの幅
• Height：Boxの高さ
• Show Faces：いいねを押してくれているユーザの写真を下のブロックに表示するかどうか（なぜかShow Facesを外すと、Streamまで表示されなくなるので注意）
• Color Scheme：色（明るいor暗い）
• Stream：ウォールを表示するかどうか
• Border Color：外枠の色（例：#FF0000）無くなりました
• Show Border：外枠を表示するかどうか
• Header：ヘッド部分の「Find us on Facebook」というブロックを表示するかどうか

上記を調整後、「Get Code」ボタンを押してください。

「Like Boxのプラグインコード:」ウィンドウが開きます。

コードは「HTML5」「XFBML」「IFRAME」「URL」の４パターンありますので、お好きなパターンのコードをサイトに張り付けてください。

なおBOXの最小幅は292pxとなっているので注意してください。くわしくはこちらの記事

2012.06.30　バージョンアップしました。（version1.4b4）

2011.11.11　バージョンアップしました。（version1.4b3）

2011.08.13　バージョンアップしました。（version1.4b2）

複数版同様、個別版でも、住所から取得した座標はサーバーにキャッシュ（CSV形式）として残す仕様となりました。

スクリプトをダウンロードする

サンプルを見る

注意点

今回のバージョンではPHPも使用しております。もしPHP5.2以上が利用できないサーバをご利用の場合は、申し訳ございませんが、このバージョンは使用しないでください。

またサーバのPHPの設定（php.ini）で「allow_url_fopen」が有効になっていないと利用できませんので、こちらもご注意ください。

なお、PHPを使用するといっても、AJAXリクエストで実行させているだけなので、実際にマップを表示するページをPHP化させる必要はありません。

※作った直後でまだ十分な実験を行えていないので、このバージョンを使用する際は、よく動作をご確認の上、ご利用ください。

※現在ではv3でもAPIキーが必要となっています。
https://developers.google.com/maps?hl=ja

(さらに…)

mixiチェックの設置方法の７．まではやり方が同じです。

１．イイネ！ボタンを発行する

「登録サービス詳細」になると、新規に追加された「イイネ！ボタンHTMLタグ発行」というフォームが表示されます。

「タグを取得」ボタンを押すと、すぐ下の「タグ」と書かれたテキストフィールドにiframeタグが表示されます。「プロフィール画像表示」にチェックを入れたままだと、かなりボタン領域が大きくなってしまいますので、不要ならばチェックを外しておいてください。

２．タグを改良する

出力されるタグは以下のようになります。

<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fwww.nandani.sakura.ne.jp%2F&service_key=識別キー&show_faces=false&width=140"></iframe>

上記のオレンジで記述された部分は、ページのURLが入るようにしなくてはなりません。

※ただし、URLはURLエンコードする必要があります。

wordpressだと以下のようになります。

<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=<?php echo urlencode(get_permalink()); ?>&service_key=識別キー&show_faces=false&width=140"></iframe>

 さらに赤で記述されている「識別キー」の部分には、１．の「登録サービス詳細」画面に載っている「識別キー」を入れてください。

結果はこのページの下の方（mixiチェックボタンの左横）にボタンがあるので確かめてみてください。

いやー、なんというか、・・・挙動がまんまですねｗ
ここまで似てていいんでしょうか^^;

メモ

いいね！ボタンを設置する方法も簡単だと思いましたが、ツイートボタンはそれをはるかに超える簡単さです！

１．まず、下記のURLにアクセスします。

http://twitter.com/about/resources/tweetbutton　（twitterサイト　リソース＞ツイートボタンページ）

２．コードを取得する

ページの下の方にある「このコードをコピーし、あなたのWEBサイトのHTMLの好きな場所に張り付けてください。」という所にコードが表示されているので、それをコピーし、自分のサイトのボタンを設置したい場所に張り付ける。

これだけ！

URLやサイトのタイトル、記事のタイトルは自動で取得してくれるみたいです。

すばらしい！

mixiチェックは見習うべき！

メモ。

mixiチェックの設置方法と違い、こちらは超簡単！

１．まずこちらへアクセスします。

http://developers.facebook.com/docs/reference/plugins/like　
（facebook DEVELOPERSサイトの Social plugins ＞ Like Buttonページ）

２．設定を行います。

• URL to Like：静的なHTMLなら各ページのURLをひとつひとつ「URL to Like」へ入力する必要がありますがCMSを使用している場合は、とりあえず未入力。
• Layout Style：ボタンのレイアウトを選択します。（３パターン）
• Show Faces：チェックを入れておくと、ユーザがボタンを押したときに、そのユーザがfacebookに登録しているプロフィール画像が表示されます。
• width：幅
• verb to display：like（いいね）かrecommend（おすすめ）を選択します。
• Font：フォントのタイプ
• Color Scheme：色のタイプ

３．コードを出力

以上の設定を行ったのち、「Get Code」ボタンを押してください。以下のようなコードが出力されます。

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

これを張り付けるわけですが、CMSの場合は各ページごとにそのページのURLを設定する必要があります。

４．記事ページごとにURLを設定する。

３．で記述したコードの赤文字の部分に該当ページのURLが入るように設定してください。
※ただし、URLはurlencodeする必要があります。

例）wordpressの場合は「get_permalink();」を利用します。

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink()); ?>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

※追記：echo を付け忘れていました。申し訳ございません；（2010/12/15）

このコードをボタンを設置する部分に張り付けてください。

以上です。

自分のサイトにGoogleサイト内検索フォームを設置できる「Googleカスタム検索」
この検索フォームの仕様が変わったようです。

Googleカスタム検索はこちらから設定を行えます。↓

http://www.google.co.jp/cse/

設定を行うと、以下のようなコードが出力されます。（以下のコードはこのサイト用に設定したコードなので転用しても意味がありません。あしからず。）

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
   google.load('search', '1', {language : 'ja'});
   google.setOnLoadCallback(function() {
      var customSearchControl = new google.search.CustomSearchControl('006668502882474005811:hojvzo2b0qm');
      customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
      customSearchControl.draw('cse');
   }, true);
</script>

で、張り付けた結果がコレ↓
     

検索するとフォームのすぐ下に結果がリストされるようになりました。

う～ん・・・正直今まで通りで十分なんだけどなぁ。

という人は、「検索エンジンID」だけ拝借して今までどおりのコードに適応。
「検索エンジンID」というのは上のコードの赤文字で記述されている部分です（設定ごとにこのIDは変わります。）。このＩＤを以下のコードの赤文字の部分に記述してください。

<form action="http://www.google.com/cse" id="cse-search-box" name="cse-search-box">
   <input type="hidden" name="cx" value="検索エンジンID" />
   <input type="hidden" name="ie" value="UTF-8" />
   <input type="text" name="q" size="21" value="" />
   <input type="submit" name="sa" value="検索" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=ja"></script>

結果↓

設置方法が結構面倒なのでメモ。

mixiチェックキーを取得する

１．まずはチェックキーを取得するために、「デベロッパー登録（法人の場合はパートナー登録）」を行います。

下記の「mixi Developer Center」から登録を行ってください。

• デベロッパー登録（個人の方）
• パートナー登録（法人の方）

※個人で行うデベロッパー登録の注意点
上記のサイトから登録を行うと携帯電話にメールが送信されてきます。（メールアドレス登録は携帯しか受け付けていないため）
そのメールに記述されているアドレスへ30分以内にアクセスし、ログインを行うと登録完了です。
PCからのメールを拒否する設定にしている場合は一時的に解除してください。

※法人で行うパートナー登録の注意点
申込用紙を郵送で送る必要があるため、時間に余裕をもって登録しましょう。

(さらに…)

トラックバックを下さった方のページで、超簡単に地図を表示する方法が書いてあったので、じゃあ今度はマップへのリンクを簡単に取得する方法はないかな～と思い、少し調べてみました。

特定の住所を示したGoogle Mapへのリンクは本来なら、Google Mapページで「地図を検索」し、その結果の「リンク」を取得してaタグで張り付ける、という手順になります。

が、そんなことをわざわざしなくても、PHPでものすごく簡単にリンクURLを取得することができました。

サンプル[新しいウィンドウで開く]

ソース

<?php
    $address = "和歌山県和歌山市一番丁３"; //住所
   $address_encode = urlencode($address);
   $zoom = 15;  //ズームレベル
 
   $gmap_url = "http://maps.google.co.jp/maps?q=".$address_encode."&z=".$zoom;
?>

<p><a href="<?=$gmap_url;?>">和歌山城の地図</a></p>

• $address：住所
• $zoom：地図のズーム値

URLエンコーディングさえできればいいので、perlでもjavascriptでも可能なんですけどね。

GoogleMapのページからリンクURLを取得すると

http://maps.google.co.jp/maps?q=%E5%92%8C%E6%AD%8C%E5%B1%B1%E7%9C%8C%E5%92%8C%E6%AD%8C%E5%B1%B1%E5%B8%82%E4%B8%80%E7%95%AA%E4%B8%81%EF%BC%93&ie=UTF8&hq=&hnear=%E5%92%8C%E6%AD%8C%E5%B1%B1%E7%9C%8C%E5%92%8C%E6%AD%8C%E5%B1%B1%E5%B8%82%E4%B8%80%E7%95%AA%E4%B8%81%EF%BC%93&ll=34.226529,135.174966&spn=0.025583,0.046821&z=15&brcurrent=3,0x6000b2c10241e76d:0x7f27c18451970b13,0

というものすごく長いURLになりますが、実際は「q=」（住所）と「z=」（ズーム値）の値を渡すだけでもちゃんと表示するようです。（もっと言えば「z=」すらいらないんですけどね。）

各パラメータについてはこちらのサイトにまとめられてます。

Google Maps のパラメータ