Shi-Mi

Mar 16, 2012

Tự Tạo Ứng Dụng Facebook Đơn Giản trong 30'

Việc tạo và chạy 1 ứng dụng facebook trước kia lằng nhằng và có 2 cách là Dùng FBML (ngôn ngữ do facebook sáng chế ) và iframe.
Bây h facebook đã không hỗ trợ cho FBML, nghe nói cũ rồi ,1 vài ứng dụng facebook viết bằng FBML vì thế cũng chết theo ,1 vài ebook hướng dẫn làm ứng dụng cho facebook cũng không thể làm theo .

Để tạo 1 ứng dụng vui trên facebook chia sẻ cùng bạn bè ,bây h  không mất quá nhiều thời gian và dễ dàng hơn bao h hết .
1-host free heroku - cái này quá tuyệt luôn ( trước kia thì mệt lắm dùng localhost chạy qua chạy lại up lên tải xuống )
2-heroku giúp ta phần kết nối - tạo sẵn luôn cho bạn 1 class kết nối với facebook (ngon rồi)
3-đỡ phải config lằng nhằng nào là canvas,iframe, hay fbml ,php sdk hay javascript sdk.....
4- test cái cho vui với thỉnh thầy trên facebook  https://apps.facebook.com/thinh-thay/ 
bắt tay vào làm 1 app facebook nào :


B1:
Vô đây để đăng ký tên cho 1 app đã Facebook Developers sau đó click  Create New App :

-Nếu ai đã từng tạo facebook sẽ có hình


 sau khi click ta thấy hộp thoại sẽ hiện ra
chọn tên app ở đây , shi chọn Qrcode ,hay gì đó tùy bạn chọn cho hợp tên ứng dụng của bạn  .
** chú ý tick vào web hosting : nhà nghèo nên dùng host heroku (biết dùng thì cực thích luôn) tiện mà free -ở đây ta đang làm trên heroku mà .
 ok xong chọn continue
gõ mã xác nhận tránh spam của facebook nhảy qua bước kế nào
chọn ngôn ngữ ở đây là PHP và email đăng ký ở heroku (đăng ký tài khỏan mới trên web heroku) là như trên :)
khi nhận được thông báo như trên là xong - chúc mừng bạn đã xong bước 1
B2: vô ứng dụng vừa tạo để kiểm tra khi các thông số :
ở website -> site URL , canvas URL , secure Canvas URL, Canvas Page ... tự heroku sẽ tạo và kết nối đến facebook . khi thấy các thông số trên là đã thành công 1/2 Bước 2
kiểm tra host heroku đã config chưa bằng cách
 gõ địa chỉ http://blooming-meadow-5451-herokuapp.com
 ra được hình trên là ổn
 B3: down soft heroku tool hỗ trợ cho việc up hay thay đổi file trên server (host) heroku
http://devcenter.heroku.com/articles/quickstart - vô đây để download  Heroku Toolbelt
sau khi tải và chạy màn hình dos heroku- đăng nhập bằng email + pass đã tạo
** khi nhập pass nó sẽ không hiện gì kể cả ký tự *** thường thấy , vì vậy cứ nhập cho đúng là ok
$ heroku login
Enter your Heroku credentials.
Email: shimi@ymail.com
Password: 
Could not find an existing public key.
Would you like to generate one? [Yn] 
Generating new SSH public key.
Uploading ssh public key /Users/adam/.ssh/id_rsa.pub


.B4 : chỉnh sửa tạo ứng dụng trên máy tính của mình
mở màn hình dos của heroku gõ
$ cd  trở về mục chính
 rồi gõ tiếp
$ git clone git@heroku.com:blooming-meadow-5451.git -o heroku

trong đó
blooming-meadow-5451 là url https://blooming-meadow-5451.herokuapp.com
mà ta heroku đã tạo ra
$ git clone git@heroku.com:blooming-meadow-5451.git -o heroku
Initialized empty Git repository in /Users/adam/facebook-template-php/.git/
remote: Counting objects: 273, done.
remote: Compressing objects: 100% (183/183), done.
remote: Total 273 (delta 2), reused 261 (delta 0)
Receiving objects: 100% (273/273), 25.55 KiB, done.
Resolving deltas: 100% (2/2), done.
 
 nếu hiện ra tình trạng xử lý như trên là đã thành công  không thì vào đây xem thêm 
mở  file trong máy tính tại C:\Documents and Settings\Tên user máy tính của bạn
 nếu thấy xuất hiện  folder "blooming-meadow-5451" là thành công

 B5 : chỉnh sửa code : thử tý xem sao
dùng notepad , DW hay notepad++ để sửa file index.php
tìm dòng chữ
<p>Welcome to your Facebook app, running on <span>heroku</span>!</p>
 thay thế thử bằng
<p>This is my app, I can edit it all I want.</p>
 save file lại
B6: upload để thay đổi trên server
 Có 2 cách : 
A -1 trên màn hình dos  heroku bằng  2  lệnh 
            $ git commit -am "ghi chú"
 
A-2 gửi 1 commit đến server để ghi chú  ( mỗi lần gửi 1 commit là 1 ghi chú khác nhau - lần sau khác lần trước )
    $git push heroku master
lệnh để đẩy code  lên server 
B cách 2 dễ hơn nhiều vì dùng chuột click click thôi - cá nhân mình thích cách này trực quan hơn .
chuột phải vào file index.php trong thư mục "blooming-meadow-5451"
 sẽ ra giao diện quản lý
làm lần lượt
1- click recan : quét thay đổi
2- click stage changed : thay đổi
3- gõ vào  commit message  từ  gì đó ví dụ  " 1" (lần thay đổi sau thì gõ từ khác)
4 click commit
5 click push ra giao diện push gui
6- click tiếp push - đợi push xong
ra được hình tương tự như trên là bạn đã thành công rồi .
1 vài ứng dụng facebook dùng heroku đã làm
https://apps.facebook.com/ten-tieng-han/
https://apps.facebook.com/thinh-thay/
https://apps.facebook.com/bach-tuoc/
https://apps.facebook.com/maqrcode/ 
và đây là link download app mẫu  facebook thỉnh thầy  - Tải file  morning-rain-1242
** down về giải nén ,nhưng đừng copy nguyên tất cả file trong thư mục morning-rain-1242 vào thư mục heroku đã tạo ra trên máy bạn  , nó sẽ lỗi đó , chỉ copy file những file
1- index.php
2-,java.js.php 
3-và thư mục ảnh img 
vào thư mục mà host heroku đã tạo ra trên máy bạn nhé
tha hồ mà test nhé
chúc bạn thành công

Bloger Comments
G+ Comments
Comments FaceBook

79 comments:

  1. Bạn ơi cho mình hỏi sao khi mình truy cập ứng dụng của minhg nó báo nhập mã bảo vệ rồi cập nhật URL dạng https:// trong khi mình đã cập nhật rồi, vẫn không vào đc.
    Với lại cho hỏi lám sao nó ra cái app cuối khi mình chưa đưa ra ý tưởng nào?

    ReplyDelete
  2. 1-https ở bước nào vậy bạn nếu dùng heroku thì không cần nhập https hay gì cả heroku tự tạo cho mình
    2-app cuối là cái có trong code
    đọc kỹ hướng dẫn sử dụng trước khi dùng

    ReplyDelete
  3. Anh ơi sao đến mục upload em ấn chuột phải vào index.php lại k có như trong hình :|

    ReplyDelete
  4. do bạn chưa cài Heroku Toolbelt rồi ở đây nè bạn
    https://devcenter.heroku.com/articles/quickstart

    ReplyDelete
  5. Em có cài r mà em làm được hết các bước ở trên r chỉ đến chỗ upload đấy là k đc thôi anh ạ :| e có cài lại r mà vẫn k đc :|

    ReplyDelete
  6. Em down ở đây anh này =.=
    https://toolbelt.heroku.com/

    ReplyDelete
  7. vào thư mục mà host heroku đã tạo ra trên máy bạn nhé , thư mục ngoài không hiện git gui đâu

    ReplyDelete
  8. Anh ơi em vào thư mục đấy mà :(

    ReplyDelete
  9. bạn có git bash trên desktop không
    thử dùng lệnh đẩy nó lên xem được không

    ReplyDelete
  10. Có trên destop anh ạ nhưng em dùng lệnh em k hiểu cái
    $ git commit -am "ghi chú"
    cái ghi chú thì em viết gì vào em thay đổi file index.php e ghi là
    $ git commit -am "index.php"
    thì nó toàn báo lỗi cái gì .git ý :|

    ReplyDelete
  11. Anh có yahoo k ạ? anh có thể dùng teamview chỉnh giùm em đc k? chắc cũng nhanh thôi mong đc anh giúp đỡ :(

    ReplyDelete
  12. Em tạo git cho hết lỗi bằng lệnh:
    $ git init
    Xong nó vẫn k commit đc nó báo cú pháp sai anh ạ :|

    ReplyDelete
  13. $ cd đến thư mục chứa file index.php
    $ git commit -am "ghi chú"
    $ git push heroku master
    vậy là ok

    ReplyDelete
  14. bạn ơi.cái ứng dụng của bạn khi vào xem thì rất khó chịu vì nó toàn mở thêm cửa sổ.liệu bạn có thể chỉnh thành nó hiển thị trong một trang duy nhất không?kể cả kết quả luôn?

    ReplyDelete
  15. mình test vẫn bt mà , khi click mới show ra 1 cửa sổ , click nhiều sẽ ra nhiều cửa sổ , để hiện kết quả

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. a ơi.cho e hỏi tí.theo cái clip bên sinhvienit bảo phải up file src lên.nhưng mà e vào trong folder mà hẻoku tạo ko có file đó?thế có fai up lên ko?

    ReplyDelete
  18. ak.anh vào kiểm tra cái app của e cái http://sharp-planet-6531.herokuapp.com/ https://apps.facebook.com/hurrrra/ sao e làm theo app thỉnh thầy rồi mà màn hình vẫn trắng thế nhỉ?còn vào bằng link http://sharp-planet-6531.herokuapp.com/ thì nó bảo là ko vào dc lỗi 500.hay là heroku quá tải rồi nhỉ???

    ReplyDelete
  19. heroku làm từ a-y cho bạn , chỉ cần push 1 vài file lên thôi chủ yếu là index.php, không cần copy src hay gì cả đâu vì heroku dùng nền tảng 2.0 mà h facebook đã lên 3.0 , khi copy src bạn sẽ gặp lỗi hay không chạy được .

    ReplyDelete
  20. Hello,
    Bạn cho mình hỏi tý nhé:
    Sau khi mình thực hiện lệnh clone trong Git nó cứ báo như thế này hoài mình ko biết nguyên nhân ra làm sao. Thks for your answer

    "permission denied (publickey)
    Fatal : the remote end hung up unexpectedly"

    ReplyDelete
  21. hy vọng 1 vài link sau giúp bạn giải quyết vấn đề
    có lẽ là dup ssh key
    http://www.udacity-forums.com/cs101/questions/60431/git-clone-problems-ssh-publickey-solutions
    http://stackoverflow.com/questions/7065257/permission-denied-publickey-fatal-the-remote-end-hung-up-unexpectedly-while
    http://stackoverflow.com/questions/3617113/github-newbie-problems-permission-denied-publickey-fatal-the-remote-end

    ReplyDelete
  22. cần 1 bạn chỉ mình tận tình , mình xin trả phí bao nhiêu cũng được , mò hoài ko ra bực mình quá huhu


    bạn nào làm dc rùi pm giúp mình với


    yahoo chat: haydzui
    Mail: hoa040387@gnail.com

    ReplyDelete
  23. Sao của mình nó báo lỗi này sửa hoài không được.
    $ heroku
    d:/Caidat/Hethong/Heroku/bin/heroku:15:in `[]': code converter not found (UTF-16
    LE to Windows-1258) (Encoding::ConverterNotFoundError)
    from d:/Caidat/Hethong/Heroku/bin/heroku:15:in `'

    delta@TRUNGLE-PC ~
    $

    ReplyDelete
  24. có lẽ bạn chưa đăng nhập ,
    gõ heroku login để đăng nhập
    http://facebook.stackoverflow.com/questions/9986433/unable-to-use-heroku-from-the-commandline

    ReplyDelete
  25. Thì mình gõ heroku hay heroku login cũng đều bị lỗi này.

    ReplyDelete
  26. Lam xong xuôi hết cả rồi nhưng khi git gui không biết chỉnh sửa ntn nữa, nó ko hiện ra dòng gì cả, cũng chẳng biết chỉnh ở đâu?

    ReplyDelete
  27. mình làm được rùi. thank bạn nhìu nhìu !
    bài viết thật sự hữu ích với những người mới
    tuy nhiên cho mình hỏi thêm là làm cách nào thêm phần like sau đó mới được dùng ứng dụng ?
    Like này có thể dẫn đến một trang khác do mình chỉ định ko ? hay vẫn like của chính ứng dụng ?

    ReplyDelete
  28. kiểm tra like cho fan page
    http://shimivn.blogspot.com/2012/03/kiem-tra-nguoi-dung-an-like-cho-fan.html
    chỉ 1 vài dòng code
    $likes = $facebook->api("/me/likes/PAGE_ID");
    còn cách sử dụng tùy bạn thôi .
    ** bonus
    http://www.masteringapi.com/tutorials/facebook-api-check-if-a-user-is-fan-of-a-facebook-page/20/

    ReplyDelete
  29. Hay lắm bạn ah, cho mình hỏi, có dùng hàm imagettftext đc ko nhỉ ?

    ReplyDelete
  30. mình vẫn chưa thành công. có lẽ bởi vì mình là new member lên hơi khó khăn ! đây là cái thỉnh thầy của bạn nè : http://apps.facebook.com/alohakun

    ReplyDelete
  31. Mình đã xóa https://apps.facebook.com/xemboinao/ và quyết làm lại nhưng vẫn không làm được ở phần tạo LIKE trước khi muốn dùng ứng dụng.( https://apps.facebook.com/xemboinao )
    ý bạn nói là chỉnh sửa :
    $likes = $facebook->api("/me/likes/PAGE_ID");

    trong file index phải không? mình có chỉnh và làm theo chỉ dẫn ở bài http://shimivn.blogspot.com/2012/03/kiem-tra-nguoi-dung-an-like-cho-fan.html nhưng vẫn bị lỗi. ra trang trắng tinh @@
    Bạn có thể hướng dẫn cụ thể hơn ko ? cám ơn nhìu lắm !
    có phải là chỉnh sửa code ở index.php trong cái thinhthay của bạn là đoạn này phải ko ?(mình chỉnh thì lại báo lỗi trang trắng tinh !)
    help me ^^


    require_once('sdk/src/facebook.php');

    $facebook = new Facebook(array(
    'appId' => AppInfo::appID(),
    'secret' => AppInfo::appSecret(),
    ));

    $user_id = $facebook->getUser();
    if ($user_id) {
    try {
    // Fetch the viewer's basic information
    $basic = $facebook->api('/me');
    } catch (FacebookApiException $e) {
    // If the call fails we check if we still have a user. The user will be
    // cleared if the error is because of an invalid accesstoken
    if (!$facebook->getUser()) {
    header('Location: '. AppInfo::getUrl($_SERVER['REQUEST_URI']));
    exit();

    ReplyDelete
  32. phân quyền ghi cho thư mục img thì làm thế nào nhỉ . Vì mình dùng hàm crateimgformjpg () và lưu trong folder img mà ko dc

    ReplyDelete
  33. bạn dùng phpinfo() sẽ thấy thông tin của host,
    không hỗ trợ createimgjpg()

    ReplyDelete
  34. ui, kiếm được cái host hỗ trợ https thế mà

    ReplyDelete
  35. bạn ui bạn gặp trường hợp này chưa hàm imagettftext() khi test trên localhost thì ok,chạy good,khi push len heroku thi lại ko dc,báo lỗi "cannot be displayed contained error",mình trace ra thì bị vướng chỗ $font,bạn đã gặp qua chưa và fix bằng cách nào

    ReplyDelete
  36. API post photo trên thằng heroku này định nghĩa thế nào nhỉ.Lấy cái api của facebook mà nó ko chạy

    ReplyDelete
  37. a oi muon tao app phai dang nhap so dt hay the tin dung nua ak.e gui tin nhan hoai ma no van khong gui tn lai gio phai lam sao

    ReplyDelete
  38. chao ban. minh tao ứng dụng hello đơn giản rồi. Khi chạy ứng dụng vẫn hiện ra heelô . Nhưng khi post lên wall nó không hiện mà hiện thế này ban nhi>
    growing-meadow-9282.herokuapp.com
    My first app
    mong đợc hồi âm sớm ym: phandungdtx10

    ReplyDelete
  39. link https://apps.facebook.com/tinhlofree/

    ReplyDelete
  40. cho minh hoi minh pai nhap email va pass nao de tai heroku ve.mjnh nhap hoai k dc

    ReplyDelete
  41. s mình thành công hết mấy bước trên hết r mà... khi load page ko thấy gì hết... mong được giúp đỡ !!!!!
    http://apps.facebook.com/toicamdo/

    ReplyDelete
  42. mình ở chỗ Hosting URL ko phải là blooming-meadow mà là tên khác ví dụ là empty-journey. mình thay vào thì toàn báo lỗi thôi! làm thế nòa dc bạn

    ReplyDelete
  43. bạn ơi, mình không thể mở được màn hình dos của Heroku, mình chỉ mở được git bash (là cái màn hình đen ý) thôi :(((((((((((
    mình thì đang cần gấp quá, bạn có thể cho mình nick yahoo và chỉ mình được không? Mình đang làm shop online nhưng lại ít like quá ~~ :((((9
    có gì, nick yh của mình đây nhé ^^~~
    clairdelune.moonlight@yahoo.com
    PS: xin chân thành cảm ơn bạn rất rất nhiều~~

    ReplyDelete
  44. Chào các bạn mình đang dùng heroku để tạo app facebook mình có đoạn code ghi text lên anh
    ");
    exit('
    Xong');
    ?>


    nhưng hình như nó không đọc được font trên host

    mình vẫn down được font đó từ https://vivid-journey-9911.herokuapp.com/broaw.ttf

    ai giúp mình làm sao cho cái font đó chạy với
    có thể yahoo nha : boygalaxy109x

    ReplyDelete
  45. bổ sung code
    ");
    exit('
    Xong');
    ?>

    ReplyDelete
  46. ban nao chi minh sua loi ssh key voi

    ReplyDelete
  47. YH: mr.noname_anewlife@yahoo.com

    ReplyDelete
  48. Mình đang làm nhưng hâu như đến bước cuối cùng thì lỗi

    ReplyDelete
  49. Thank ban rat nhieu ^^ :) bo nguyen ca ngay moi lam dc ^^ that sang khoai

    ReplyDelete
  50. nick fb: http://www.facebook.com/muontimnguoiyeu ban nao lam ko dc ma o tphcm thi ru minh di uong cafe minh chi cho nhe ^^

    ReplyDelete
  51. bạn ơi sau khi mình đã tải heroku tool veefvaf cài đặt rồi nhưng sao lại ko có chỗ đăng nhập bạn nhỉ

    ReplyDelete
  52. bạn khởi động ct heroku toolbelt thấy màn hình dos hiện lên
    và gõ lệnh
    $ heroku login
    chú ý xem kỹ Bước 3
    B3

    ReplyDelete
  53. bạn giúp mình với mình là đúng các bước nhưng không tạo ra thư mục được, tìm hoài không thấy có gì bạn cho mình số điện thoại đi mình hỏi bạn trực tiếp dc hôn , số mình là 0972445436 mình tên Tú!

    ReplyDelete
  54. Cho mình hỏi tại sao khi đánh mã
    $ git clone git@heroku.com:blooming-meadow-5451.git -o heroku
    xong nó hiện ra
    Cloning into ''blooming-meadow-5451'...
    ! Your key with finger............ nhiều lắm
    fatal: The remote end hung up unexpectedly

    ReplyDelete
  55. cho mình hỏi, muốn xài app chỉ cần vào thư mục của heroku đã tạo trên PC xong upload file index.php thôi phải ko, hay là phải upload hết tất cả các thư mục lên heroku

    ReplyDelete
  56. bạn ơi hướng dẫn mình tạo ssh với. Mình không hiểu sao đến bước Would you like to generate one? [Yn] (đến dòng này mình đánh vào chữ Yn nhưng k tạo dc ssh) nó gặp lỗi gì vậy, bạn chỉ giúp mình với nhé

    ReplyDelete
  57. mình bó tay rồi bạn ơi cho mình xin nick yahoo để tiện việc hỏi thăm cách làm nha, bạn nào biết thì pm mình rafaeltruong@yahoo.com

    ReplyDelete
  58. bạn ơi ở bước 4 nếu làm đúng thì nó như thế nào nhỉ. bạn úp ảnh báo thành công nên cho mọi người xem nhé

    ReplyDelete
  59. This comment has been removed by the author.

    ReplyDelete
  60. minh viet laf

    heroku login
    .......
    Email: bangoai_vn96@yahoo.com
    Passwork ( typing will be hidden ) : la the nao

    ReplyDelete
  61. ghi dung email roi maf khong sac dinh
    tan ghi
    Passwork ( typing will be hidden )

    ReplyDelete
  62. Mình nghĩ bạn bỏ chút thời gian ra quay video cách làm chia sẻ với mọi người là rất hay,

    ReplyDelete
  63. mình làm được rồi nhưng chẳng biết sửa thế nào, gà phần php này quá, hix. html thì biết chút ít ai k làm được pm yh sweet_one_kiss.nsq176 (buổi tối rảnh)

    ReplyDelete
  64. mình làm được rồi nhưng up lên toàn bị lỗi bạn xem giúp mình với https://warm-fjord-7273.herokuapp.com/

    ReplyDelete
  65. lam sao add fanpage vao de cau like dc ha ban? voi ca co cach nao doi duong link do khong?

    ReplyDelete
  66. Có ai làm được phần code lấy ảnh đại diện của người khác, tên của người đó để in ra ngoài màn hình bằng heroku không?

    ReplyDelete
  67. bước 6 cách 2 là sao vậy. Mình không thấy được lệnh trong menu @@

    ReplyDelete
  68. bạn ơi sao mình cài rồi, mở file cmd của heroku lên nó chạy ra nhiều dòng rồi tắt luôn. vậy là thế nào chỉ mình với

    ReplyDelete
  69. $ git commit -am "ghi chu" nhận được dòng sau
    fatal: not a git respository (or any of the parent derectoris): .git

    cách 2 thì mình không biết có phải cài dreamwaver hok chứ bấm phải hok thấy cái Git.. nào hết

    ReplyDelete
  70. $ git init đúng không nhỉ?... nhưng mà giờ lại không push được T_T

    ReplyDelete
  71. Vẫn clone commit push ok mà!!!!
    Ai cần HD qua teamviewer thì pm Y!M:sac_ac01 :D

    ReplyDelete
  72. mình hok thể login dc! gõ heroku login hiện ra lỗi! ai biết vì sao hok

    ReplyDelete
  73. Có cách nào lấy dữ liệu từ heroku về folder ở máy ko?
    Mình có file data ghi lại dữ liệu app. File data ở folder máy trống. Mỗi lần push là nó lại reset file data trên host heroku về trống không làm mất dữ liệu.
    Có cách push nào ko bị mất ko?

    ReplyDelete
  74. ca này khó nhỉ , thường push là đồng bộ dữ liệu ở máy và ở trên heroku . mất file thì hơi lạ

    ReplyDelete
    Replies
    1. bác nào giúp mình với mình commit nó không báo gì hết

      Delete
  75. làm được hết, ok hết rồi nhưng mà chạy app trên fb nó reload...là sao admin!

    ReplyDelete
  76. add ơi sao heroku của mình không hiển thị hình ảnh ra được vậy? chỉ mình với, gõ text thì hiển thì nhưng có hình ảnh hiển thị được. Giúp mình với

    ReplyDelete
  77. mình ở hn. bạn nào ở hn cho mình số đt mình mời bạn đi uống cà phê để nhờ bạn chỉ giáo cho mình.:)
    yahoo: thaison_888xxx

    ReplyDelete