memocon

facebookのいいねの数やはてブ数、twitterのtweet数の取り方

2013年04月15日 19時45分

ソーシャルなカウントをWordpressの管理画面内、投稿一覧ページに表示したいなぁと思った時に調べたのでまとめます。

一番簡単なのがはてブ数の取得

以下のurlを取得すればOK。

1	http://api.b.st-hatena.com/entry.count?url={ここにurl}

数値だけがレスポンスで戻ってくるのでパースする必要なし。

続きをみる

PHP: バージョンアップできなくて使えない関数がある時の対応

2012年04月20日 16時03分

PHPがバージョンアップされて関数が増えたがサービスを停止するわけにもいかずPHPのバージョンアップができず使用できない。
こんな状況はないだろうか。
俺の場合は具体的にjson_decodeが使いたい。

でないとFacebookのSDKがFacebook needs the JSON PHP extensionってエラーが出て使用できない。

なんとかしたいなぁと思っていたらupgradephpというライブラリを発見した。

upgradephp
http://include-once.org/p/upgradephp/

バージョンアップされて追加された関数が定義されていない場合、追加されるという代物。

これインクルードしてからFacebookのSDKをインクルードしたらjson_decodeが定義されて問題なく処理できた。

こんなんあったんかぁ、素晴らしい。

ついでにFacebookが返すマルチバイト文字形式の\uxxxx形式が文字化けするので以下の関数をjson_decodeする前に通す。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

// UTF-8文字列をUnicodeエスケープする。ただし英数字と記号はエスケープしない。

function unicode_encode($str) {

return preg_replace_callback("/((?:[^\x09\x0A\x0D\x20-\x7E]{3})+)/", "encode_callback", $str);

}

function encode_callback($matches) {

$char = mb_convert_encoding($matches[1], "UTF-16", "UTF-8");

$escaped = "";

for ($i = 0, $l = strlen($char); $i < $l; $i += 2) {

$escaped .= "\u" . sprintf("%02x%02x", ord($char[$i]), ord($char[$i+1]));

}

return $escaped;

}

// Unicodeエスケープされた文字列をUTF-8文字列に戻す

function unicode_decode($str) {

return preg_replace_callback("/\\\\u([0-9a-zA-Z]{4})/", "decode_callback", $str);

}

function decode_callback($matches) {

$char = mb_convert_encoding(pack("H*", $matches[1]), "UTF-8", "UTF-16");

return $char;

}

facebook：fan pageのウォールに投稿された画像を一覧表示する

2012年04月16日 11時07分

facebook wall image list
ファンページのウォールに投稿した画像を自分のサイトに表示したいという要望があった。
上記ぐらいだったらSDK使わずに直にGraph APIのURL叩く方式で問題なく実装できたのでそのメモ。

アルバム一覧取得のAPI URL
http://graph.facebook.com/[ファンページID]/albums/

上記のURLを叩くとアルバム一覧がJSON形式で帰ってくるのでその一覧の中でtype属性がwallのデータのアルバムIDを取得する。

1

2

3

4

5

6

7

8

9

10

11

12

13

$album_list_cont = file_get_contents("http://graph.facebook.com/[ファンページID]/albums/");

$js = new Services_JSON(SERVICES_JSON_LOOSE_TYPE);

$albums_arr = $js->decode($album_list_cont);

if (!empty($albums_arr["data"])) {

foreach($albums_arr["data"] as $crt_album) {

if ($crt_album["type"] == "wall") {

// ウォールに投稿されたデータ

// $crt_album["id"]にアルバムIDが入っているので保持しておく

}

※PHPのバージョンが古いためjson_decodeが使えないのでPearのライブラリを使用している

次はalbumから画像を取得する手順。

アルバム一覧取得のAPI URL
http://graph.facebook.com/[アルバムID]/photos?limit=25&offset=0&fields=images

上のURLを叩くと画像一覧が取得できる。
offsetやfieldsパラメータは適せん変更するべし。

一回で取得できなかった場合は[paging][next]というパラメータに続きを取得するパラメータが入ってくるので拾うこと。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

$photos_cont = file_get_contents("http://graph.facebook.com/[アルバムID]/photos?limit=25&offset=0&fields=images");

$photos_arr = $js->decode($photos_res);

$next_page_url = "first url";

while ($next_page_url != "") {

$next_page_url = "";

foreach($photos_arr as $crt_photo_key => $crt_photo_val) {

switch ($crt_photo_key) {

case "paging":

$next_page_url = isset($crt_photo_val["next"]) ? $crt_photo_val["next"] : "";

break;

case "data":

$crt_image_arr = get_image_infos($crt_photo_val, $thumb_size_set);

$image_arr = array_merge($image_arr, $crt_image_arr);

break;

default:

break;

}

if ($next_page_url != "") {

$photos_res = file_get_contents($next_page_url);

$photos_arr = $js->decode($photos_res);

}

// とりあえずブラウザ表示

for ($img_idx = 0 ; $img_idx < count($image_arr) ; $img_idx ++) {

echo "<img src='{$image_arr[$img_idx]['source']}' />\n";

}

サンプルURL
http://www.crossl.net/blog/pg_sample/fb_album_image/wall_images.php
※うちの会社のブランドです。

別にアルバムを作ってしまうとtypeがwallではなくnormalになるのでこの方法では取得できない。
あくまでアルバムwallの画像一覧になる。

Webの資料を調べるけど結局は本家が一番わかりやすいという罠。（英語ですが…）

Graph API参考
http://developers.facebook.com/docs/reference/api/album/

facebookのShareボタンでog:descriptionが効かない

2012年02月28日 19時11分

会社のサイトでfacebookのShareボタンを設置してくれという依頼が来た。

そんなものfacebookサイトにあるタグをコピペして終了だろと思っていたらはまった。

コピペ元URL
http://developers.facebook.com/docs/share/

いや、実際にはコピペで済んだのだがShare時にタイトルやら画像やらを設定しようと
何をやってもさっぱり変更が反映されないのだ。

タイトルは<head></head>の間に下のmetaタグを埋め込んで設定するのだがどうやっても反映されない。

1

2

3

descriptionに至っては全くページに記載の無い文言が表示されている。

調べてみるとサムネイル画像がリンクされていてそのリンク先のdescriptionを拾ってきていた。

拾ってきた元は分かって気持ち悪さは半減したが相変わらず変更は反映されない。

タグの位置がおかしいのか、閉じ記号が有ってはいけないのか、何をどう変更しても変化が現れない。

表示されている画像をサーバ上から消しても表示され続ける、、、

ん？ということはキャッシュ？？
Shareボタンを押すとポップアップされるウィンドウのソースを見てみると画像がfacebookに喰われてキャッシュされていた。

ということでキャッシュが悪さをしていた訳だ。
続けて調べてみると下のデバッグツールにURLを入れるとキャッシュが消える。

http://developers.facebook.com/tools/debug

やってみるとすんなり変更が反映された。

ということで変更が反映されなくて困っている方はキャッシュを疑ってみるのも良いかと

facebookのsocial plugin LikeBoxで独自CSSを反映させる

2011年11月30日 16時26分

会社でfacebookのLikeBoxの幅を210pxに収めてくれという依頼が来た。

※こんな感じのやつ

facebookは知人が３人だけでアイコンもデフォルトのシルエット画像というほぼ素人の私に……
登録した時の「もしかしたら友達？」のあまりにも素晴らしい精度にビビッて放置したことを今更ながらに思い出した。

話が逸れたがLikeBoxは元々、属性設定だけでサイズ変更ができるのだが見た目がよろしくない。
それもそのはず元々対応最小サイズは292pxと記載されているので当たり前である。
それを仕様外のサイズにして見た目を整形しろというお達しが来たのだ……

まぁ、思うところはあるが愚痴になるだけなので調査開始。

プラグインで展開された後のソースを調べてみるとiFrameだからこちらから手を加えるのは難しいんじゃないかなぁっと思いつつ、
API調べて1から作る時間もないので元々あるLikeBoxにcssやjava scriptを埋め込む方法はないものかとググって調べてみると本当にあった。

期待半分だったので意外や意外。

[参考サイト]
http://line25.com/tutorials/how-to-add-a-custom-facebook-like-box-to-your-site

英語だけどソース部分が綺麗に分離されて書かれているのでなんとなーくわかる。
とぼちぼち考えていたら日本語の情報もあった。

http://www.lifeisg.com/blog/facebook/facebook-likebox/

上のサイト参考にタグを記述し、fb:fanに属性でstream=”true”を追加すればウォールも表示されるようになる。
後は表示されたタグを調べてcssを当てていけば好みの見た目に適応できた。

気を付ける点としては元々あるcssより先にタグが読み込まれるので優先順位が低くなってしまう。
!important辺りを駆使する必要がある。

2017年5月
日	月	火	水	木	金	土
« 3月
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31