WordPress #22: Chatbox

Đăng vào by ~ Yappa ~

Nội dung

Do trang 99shoutbox không còn nữa nên bài viết này đã không còn giá trị. Các bạn có thể dùng tạm widget tlk.io Webchat có sẵn của WordPress nhé.

Lâu lắm mới lại viết tut :)
Tut lần này là về cách làm chatbox (shoutbox) trong WordPress.

 

Hướng dẫn

Bước 1: Đăng ký 1 tài khoản trong trang web 99shoutbox
Bước 2: Đăng nhập, bấm vào Create a Shoutbox
Bước 3: Đặt tên, chọn theme cho chatbox theo ý mình. Sau đó bấm Continue
Bước 4: Tại trang Shoutbox code, bạn hãy copy id của shoutbox trong địa chỉ trang
Ví dụ địa chỉ trang của tớ là

http://www.99shoutbox.com/code?id=40731_1

Thì phần mà tớ bôi đỏ chính là id
Bước 5: Thay id xuống code sau

Bước 6: Copy đoạn đã thay, dán vào widget hay bài viết trong blog mình. Vậy là xong

Ví dụ chatbox của tớ

Chú ý:
1. Trong trường hợp chatbox hiện to hơn và lệch ra khỏi thanh bên, các bạn chỉ cần thêm width="100%" sau code như thế này là được

2. Trường hợp các bạn đã có sẵn chatbox, thì có thể lấy id bằng cách sau:
– Tại trang quản lý shoutbox, chọn View Page
– Địa chỉ trên thanh address sẽ có dạng

http://www.99shoutbox.com/box_40731_1

Thì phần tớ bôi đỏ phía trên sẽ là id

Chỉnh sửa chatbox

Bạn có thể tùy biến cho blog mình bằng cách tự tạo theme. Cách làm như sau:

Bước 1: Vào phần My Themes, chọn Create a new Theme
Bước 2: Tùy biến theme theo ý thích theo các tab:

  • Border: đường viền
  • Background: nền
  • Text Area: vùng text
  • Buttons: nút
  • Input: nhập
  • Tooltip: gợi ý
  • Labels: nhãn, đây là chỗ có thể dùng để Việt hóa chat box

Bước 3: Edit chatbox, trong phần Theme, chọn theme vừa tạo

Về phần quản lý chatbox, trang web này cho bạn các quyền như xóa các tin nhắn trong chatbox, ban dãy IP của người bạn không muốn chat,… trong phần My Shoutbox. Tóm lại là rất dễ sử dụng ^^

Update ngày 20/03/2014

WordPress vừa thêm 1 widget giúp hỗ trợ làm một chatbox. Đó chính là widget tlk.io Webchat. Dùng cái này thì bạn sẽ không phải chỉnh sửa code kiếc gì. Nhưng tớ thì không ưng nó lắm vì nó rất khó tùy biến và quản lý. Nhưng nếu bạn nào thích nhẹ nhàng thì có thể tham khảo cách sử dụng ở đây.

https://tieuxuyen.wordpress.com/meo-wordpress/

273 bình luận về “WordPress #22: Chatbox”

        1. vậy em thêm phần kích cỡ chiều ngang xem thử nhé, số em có thể tự thay
          [gigya src="http://plugin.loader.objectembed.info/shockwave.swf?r=40731_1" width="150"]

          Đã thích bởi 2 người

  5. Bạn ơi sao mình chèn code vào wiget văn bản nhưng không được >”< Bạn chỉ dùm mình với :D

    Thích

      1. Code của mình như thế này: ( ) Khi mình chèn vào wiget văn bản và lưu lại thì dòng code kia bị mất, và khi ra ngoài thì ko có gì cả :D

        Đã thích bởi 1 người

          1. mình sửa rồi nhưng khi save lại vẫn bị mất hết bạn ạ >”<

            Thích

            1. bạn thử bỏ chọn cái lựa chọn Automatically add paragraphs ở cuối xem sao nhé
              nếu vẫn không được thì chụp ảnh cái code cho mình xem

              Thích

              1. Bạn cho mình xin mail của bạn được ko? Minh gửi hình qua cho bạn >”<

                Thích

                  1. Đây là code mình đã sửa lại ý bạn.. Nhưng khi save lại bị mất.

                    Thích

  6. Yappa ơi, tại sao em chèn cái chat bõ vào thanh bên thì đc, nhưng vào blog thì không đc ạ? tức quá! Chèn vào thì nó hiện ra cái dãy code gigiya gì gì đó xong rồi câu cuối là URL is not valid, vậy là sao?????????????? Yappa giứp em vs!! T^T

    Thích

    1. chắc em nhầm chỗ nào đó thôi
      vì đã đặt được ở thanh bên tức là đặt được trong bài viết rồi

      Thích

      1. Không có đâu ạ! Em đã thử lại, nhưng rất nhiều lần vẫn không làm được! :( Copy vào đoạn mà Yappa nói từ đoạn sau chữ data= phải không ạ? Em làm vậy đó, nhưng chèn vào không được! Nó để trống trơn một khoảng lớn cộng vs cái dòng em nói ấy ạ! :(

        Thích

  9. Chào bạn!
    Mình muốn hỏi bạn là cách để tạo các menu dạng lưới giống như một trang tin tức gồm các chuyên mục, ví dụ như: Giới trẻ, Sức khỏe…. như một số trang thông dụng hiện nay

    Cảm ơn bạn ^^

    Thích

    1. Bạn vào phần Message, cuối mỗi dòng đều có địa chỉ IP của người đã comment, bạn copy địa chỉ IP đó rồi paste vào phần Ban là được

      Thích

      1. ko phải đâu, mình có thử ở các mạng khác rồi nhưng vẫn có tình trạng như thế, cứ đánh tên người chát lần đâu tiên vào thì nó đơ luôn, f5 lại thì nó mới chạy bt thế mới ảo

        Thích

    1. mình thử thì thấy vẫn hiện bình thường bạn ạ
      vậy nên 1 là bạn làm nhầm, 2 là mạng nhà bạn có vấn đề rồi

      Thích

      1. dùng cả đoạn cũ đấy hay sửa thành gigya à? mình chẳng biết sao nó toàn bị biến mất thôi

        Thích

          1. ok đã thành công <3 bạn ơi mình dùng itheme2 nhưng mình chon summary nó vẫn hiện cả bải lên homepage chứ không hiện bài tóm tắt vậy là bị sao thế bạn? bạn xem giúp mình với

            Thích

  14. Cảm ơn bạn nha, mình cũng vừa thử làm một cái, hay quá :3

    Thích

  15. cảm ơn bạn nhé, mình vừa làm xong. Nhưng cho mình hỏi 1 cái nhé. Khung chat đấy của mình to quá, mình muốn thu hẹp lại thì làm thế nào?

    Thích

  18. yap ơi cho mình hỏi dùng cái nào để nó hiện ra ngay code mình làm trong html chứ ko hiện ra kết quả? Dùng dc với shortcode đó yap.

    Thích

    1. shortcode thì ko có code nào để hiện được đâu, chỉ có cách là biến những ký tự trong code thành mã html để nó ko hiện bình thường thôi, nhưng mà tớ ko đưa vào đây được vì nó ko hiện ra cho bạn xem được

      Thích

  19. Yap ơi sao code của mình khi dán dô nó không hiện ra đc cái code nó lạ lắm : =”http://protocol.flashobject.info/audioplayer.swf?r=42830_1″ T__T

    Thích

        1. tớ mở thẳng bằng chính link bạn đưa trong trình duyệt thì nó hiện ra thông báo như thế này

          99Shoutbox.com
          has been upgraded!

          If you see this message you are using the old embed code.

          Please login to your 99Shoutbox.com account and use the new embed code.

          bạn thử kiểm tra lại xem

          Thích

            1. bạn có hiểu cái thông báo nó hiện ra không?
              nếu có thì bạn làm theo cái thông báo đó đi
              tớ ko phải chủ tài khoản shoutbox của bạn thì làm sao tớ vào xem được

              Thích

    2. đúng là nó có code khác thật mà bạn
      tớ vào thử thì thấy địa chỉ mới dùng cho shoutbox của bạn là địa chỉ này cơ
      http://dirne.xmlrequest.info/adobeflash.swf?r=43204_1

      bạn thay vào code gigya theo mẫu ở trên là được nhé

      Thích

      1. ok rùi, còn phần post nhạc lên text đó, mình dùng code giống bạn :
        [gigya src="http://www.nhaccuatui.com/video/xem-clip/0cSt65pH4sSd" flashvars="autostart=false" width="620" height="386" ]

        mà màn hình trắng tinh à, bạn xem sao với

        Thích

      2. [gigya src="http://www.nhaccuatui.com/m/7HdbIShm6ldi" flashvars="autostart=false" width="300" height="286" ]

        mình dùng code này làm nahcj nền mà sao nó ko chạy vậy bạn,

        Thích

                    6. uh, nàng mình vô code mới đó nàng, ko bit sao nữa , nàng giúp mình đưa link code đó chuẩn đc ko, tk nàng nhiều lắm, huhuhu

                      Thích

                    9. bạn xem code mới chưa mà cứ bảo ko được
                      giống y hệt lần trước mình bảo bạn vào xem lại code chatbox mà bạn có chịu xem lại đâu
                      trong khi mình xem lại thì thấy nó rõ ràng thay đổi

                      Thích

                    11. để tạo chuyên mục, khi viết bài mới hoặc sửa bài cũ, bạn tìm phần Categories bên tay phải, tạo mới chuyên mục hoặc chọn chuyên mục đã có sẵn trong đó

                      Thích

              1. bạn cho mình hỏi, mình tạo mấy cái catelogy con đc mà, sao vào cái mục kia, kick vào đc vậy, trang mình là : Phong Thủy-Kiến trúc-Xây dựng có thư mục Phong thủy , mình kick vô ko đc, xem giúp mình với

                Thích

                  1. nàng cho mình hỏi, cái lịch đó, ko phải calendar đâu, mình làm sao cho đẹp như nàng, hiện hôm nay thứ mấy, ngày mầy, nàng có link cho đường link với nha nàng yêu dấu

                    Thích

  22. Bước 5: Copy đoạn đã thay, dán vào widget hay bài viết trong blog mình. Vậy là xong

    bạn ơi cho mình hoir~~ copy thì copy vào đâu~~ bạn nói từng bước cho mình đc ko~~ khổ< mình sinh đầu óc đã ngu ngốc nên chẳng hiểu ý bạn~~TXT

    Thích

    1. copy phần code đã thay địa chỉ tương ứng, sau đó paste vào một bài viết bất kỳ hoặc 1 widget văn bản

      Thích

  24. Tỷ ơi, em đã đổi lại theo đúng mã code rồi. Ban đầu của em là:

    Em đã đổi thành:

    Nhưng ko hiểu sao cứ paste vô phần widget văn bản là ko save được, em thử bỏ tick Automatically add paragraphs đi rồi vẫn ko được. Cứ ấn lưu lại là khung lại trắng xoá.

    Thích

    1. em sửa nhầm code rồi =,=
      em phải copy đoạn sau chữ data trong code 99shoutbox, rồi paste nó vào code gigya chứ

      Thích

      1. Dạ, cám ơn tỷ, em làm được ra chat box rồi, nhưng ko hiểu sao của em ko gõ được tiếng Việt tỷ ạ. Em ko biết chỉnh ở đâu nữa. Trong phần edit thì ko có, tỷ giúp em với.

        Thích

  26. chị ơi ~ em làm đúng như lời chị nói, box chat vẫn ra nhưng là tiếng anh mà sao em ko lấy cái box chat mà em tạo chỉnh sửa hoàn tất xong thì code nó ở đâu để copy nữa TT_TT chị giúp em vs…

    Thích

  27. bạn ơi mình mới dùng wordpress, nhưng mà cái dao diện 2014 hình như nó khác với cái bạn hướng dẫn thì phải, tại mình không thấy cái phần thêm wid ở đâu cả, toàn là những cái có sẵn trên wp thôi. Bạn giúp mình với, cảm ơn bạn nhé!

    Thích

  28. tớ làm như vậy rồi cơ mà nó không có hiện ra khung chat giống trên hình, nó hiện ra một dòng chữ Tiếng Anh, nói là : 99shoutbox đã được nâng cấp, nếu bạn nhìn thấy những dofnh chữ này có nghĩa là Embed của bạn đã bị cũ. Đăng nhập vào tài khoải 99shoutbox để có embed mới. Nhưng tớ ấn vô đường link đăng nhập trên đó nó cứ trơ ra chẳng chịu chuyển tới trang 99shoutbox gì cả T.T

    Thích

  29. Bạn ơi, sau khi mình đổi code như bạn hướng dẫ, save lại thì bị mất code, ra ngoài xem thì không có boxchat @@ Mình không biết sao nữa =.=

    Thích

    1. ko hiện thì chắc chắn là do bạn làm sai chỗ nào rồi, bạn check kỹ lại nhé, nếu vẫn không được thì chụp phần code của bạn cho mình xem

      Thích

    2. bạn làm nhầm rồi
      bạn phải copy phần link bôi đỏ ở code trên và thay vào đúng chỗ bôi đỏ của code gigya thôi

      Thích

        1. có vẻ là code gốc của bạn bị lỗi rồi @.@
          bạn copy lại code rồi gửi lại cho mình nhé
          nếu vẫn ko khác gì cái cũ thì mình nghĩ bạn nên tạo chatbox mới để lấy code mới

          Thích

          1. Bạn ơi, bây giờ mình vào my theme, mục action chỉ có edit hoặc delete thôi =((~ không có code :((~

            Thích

        1. bạn kiểm tra kỹ lại nhé, hiện trắng chỉ có thể do làm sai thôi
          bạn có thể test thử bằng cách dùng luôn code chatbox mình đưa ra làm ví dụ ở trên để xem có hiện hay ko

          Thích

  32. Thanks bạn nhiều ^_^
    Các bạn nào mà nó hiện màu trắng vs trang web thì là do các bạn lấy sai code của trang đó, bạn phải vào chữ code chứ không phải view page :) vì mình cũng bị như vậy, sau 1 lúc mò mẫm cũng ra nguyên nhân. Một lần nữa thanks bạn nhiều

    Thích

  34. Mình thay như bạn nói rồi nhưng mà nó không có hiện ra cái gì hết :( cái embed của mình thì không giống cái hình []

    Thích

  35. tỷ ơi, e lúc trước đã tạo rồi paste đúng code lên widget và đã hiện cái chatbox trên wp nhưng s vừa rồi e đổi Theme wp sau đó chỉnh lại từ đầu nhưng code cái chatbox thì giữ nguyên cũng paste vào widget như cũ, nhưg nó cứ hiện lên màn hình cái khung chữ nhật trắng bóc, còn trên đt thì thấy trống trơn, ko bik là do cái Theme hay do s ạ?

    Thích

        1. mấy ngày gần đây mình cũng ko nhìn thấy chat box của mình nữa
          cái này có lẽ là do vụ đứt cáp á bạn

          Thích

      2. cái này hình như ko phải do code sai a tỷ, tại e bấm vào nhà tỷ rồi Xà Viện luôn mà vẫn thấy chỗ chatbox màu trắng bóc, chắc là máy e bị j rồi, zậy e ko làm phiền tỷ nữa ah ^^ thks tỷ đã xem giúp

        Thích

  37. Yappa ơi :( Chatbox của tớ bị gì ấy :(
    Tớ vừa tạo thành công thì lát sau vô xem lại nó chỉ còn là cái khung trắng :'(
    Vài ngày sau thì lỗi code luôn :( Tớ check link shoutbox thì thấy nó đổi link rồi ;((
    Cùng 1 shoutbox mà khi thì “http://white.info-info-info-info-info.info/flashtest.swf?r=47196_1”, khi lại “http://xml5.xmlrequest.info/action.swf?r=47196_1” ;((

    Giúp tớ khắc phục tình trạng này với ;((

    Thích

    1. mình vẫn thấy chatbox của bạn hiện bình thường mà
      còn phần địa chỉ link thì nó đổi nhưng phần code cuối cùng vẫn nguyên xi thì dùng cái nào cũng được bạn ạ

      Thích

  40. Yappa ơi sao em làm mãi mà không được :'( nó cứ hiện lên cái link gì đấy mà không hiện Lên chatbox là sao? :'(

    Thích

  41. Nàng có thể cho ta mã code để chèn chatbox bên chattango được ko??? Ta làm theo mã code ở trên nhưng ko được. Cám ơn nàng nhiều!

    Thích

      1. Cám ơn bạn, tại bữa thấy có nhà chèn khá đẹp, mà mình lại quên ghi lại địa chỉ mất òi… T_T

        Thích

    1. Mình bấm vô view page thì có cái Embed này: ảnh chụp màn hình đây nè.

      Thích

        1. mình copy đoạn sau data trong” “rồi chèn vào [gigya src="http://static.99widgets.com/shoutbox/swf/shoutbox.swf?r=47801_1"]nhưng nó nói là code cũ ý, với cả ở trên có cmt nói không thể copy link ở trang view page được. Yappa giúp mình với. Mình tạo mấy cái rồi mà vẫn bị vậy.

          Thích

  43. nàng ơi sao ta save xong nó vẫn khôg hiện chatbox, cứ trống không 1 khoảng, cùng cả code của nàng cũng thế, code của ta đây, nàng xem dùm có sai gì không

    [gigya src="http://service.objectembed.info/box.swf?r=47820_1"]

    Đã thích bởi 1 người

  44. chị ơi hk bk tại s e khi coppy cái code dô phần văn bản thì trog trag chủ nó lại hiện ra như thế này ạ: No hotlinking please.
    e lm` y như chị ns mà hk bk s bị z nữa :(( chị chỉ e cái sửa đc hk ạ??
    p/s: e 10x xưng hô thế này chắc đúng

    Thích

                1. chị biết rồi, vì blog em đang bị chuyển sang dùng https rồi
                  nếu muốn dùng chatbox thì em dùng tạm cái tlk,io chị giới thiệu ở trên nhé

                  Thích

    1. hiện giờ WP đang dần chuyển các blog sang https, nên tạm thời thì ko có cách bỏ đi đâu bạn ạ :(
      bạn có thể dùng tạm tlk.io nhé :)

      Thích

  47. Chị ơi con bạn em trên facebook nó hỏi là widgets văn bản ở chỗ nào. Em chỉ nó rồi mà nó nói k hỉu, gì mà vô đủ thứ chỗ rồi nhấn từa lưa hết. Chị có cách nào để có thể nói nhanh gọn lẹ chỗ của widgets văn bản không ạ ?

    Thích

    1. em bảo bạn đó vào trang widget, Ctrl-F tìm chữ văn bản nhé
      nếu bạn đó đang dùng tiếng Anh thì tìm chữ text

      Thích

      1. Yap ơi tớ làm theo cũng không được nè, thử lấy luôn cái [gigya src="http://cldup.com/ZxVsbF79RZ.swf?r=40731_1"] của Yap thử luôn – ph
        ần CHATBOX không hiển thị nè

        Thích

  49. Chào bạn, cám ơn bài viết này của bạn rất nhiều!
    Chat box thực sự là cứu tinh sau zopim.
    cám ơn bạn lần nữa.

    Thích

  52. Bạn ơi, cho mình hỏi là mình đã tạo đc chatbox theo bạn chỉ, nhưng sau đó mình chỉnh sửa màu của khung chatbox trên shoutbox xong rồi save mà sao cái chatbox bên nhà mình k đổi theo, cái phần tên theme là mình để cái tên theme của nhà mình có đúng k?

    Thích

      1. K có,mình đã về nhà xem thì nó k thay đồi j hết, ùi mình qua shoutbox zô sb code lấy code mới dán qua nó lại bị trắng, mất lun khung chatbox. Code mình dán đây: [gigya src="http://container.flash-container.info/support.swf?r=52639_1"], hixhix, mình ktra thấy đâu sai code đâu?

        Thích

      2. Sao tự nhiên nó lại đc rồi, mình bị mất khung chatbox ùi mình copy lại cái code ban đầu bạn để ở trên, mình dán cái ip nhà mình zô tính mặc kệ nó, tự nhiên về xem lại đc rồi! K hỉu j luôn!!!!

        Thích

  54. Pingback: Notice 2/18/2016 : Most anticipated update LOL | AzzRule's Blog

  56. cho mình hỏi với ạ. lúc edit thì nó ntn https://z-1-scontent-hkg3-1.xx.fbcdn.net/hphotos-xfl1/v/t1.0-0/s480x480/12814703_830216667089441_8295923243817925771_n.jpg?oh=4cb35f88021e122c8f2d4aecd2451bb8&oe=5757766E
    còn lúc chèn vào wp màu sắc các kiểu nó lại thành thế này https://z-1-scontent-hkg3-1.xx.fbcdn.net/hphotos-xpf1/v/t1.0-0/s480x480/12321660_830216643756110_5301055225799440100_n.jpg?oh=86227d26edd993eb845e6025081b24e6&oe=5766129D
    phải làm sao để giữ nguyên màu mình chọn ạ

    Thích

    1. bạn mới chỉ tạo theme thôi, chứ chưa chọn cho chatbox của bạn theme đó, bạn vào edit chatbox và chọn theme bạn đã tạo là được

      Thích

    2. sau khi edit xong mình lưu lại thì thì địa chỉ trang edit của mình là http://www.99shoutbox.com/theme?id=12452
      cái phần 12452 là id của shoutbox đúng không ạ
      mình thay đoạn 12452 này vào đoạn code bạn cho rồi dán vào wg thì nó ra cái khung chatbox xanh xanh kia.
      sợ hỏi nhiều nên mình edit thử thêm một theme nữa. phần id là 12453 nhưng vẫn ra cái khung xanh xanh kia ạ
      bạn biết mình sai ở đoạn nào thì chỉ mình với

      Thích

    1. mình thử code của bạn thấy vẫn hiện bình thường, bạn cho mình địa chỉ trang bạn để mình xem thử nhé

      Thích

  63. Bạn ơi, mình tạo theme xong rồi nhưng không biết cách lấy chatbox theo cái theme đó :< với lại sao mình cop link vào widget nhưng nó chỉ hiện link thôi chứ ko hiện chatbox?? :<<

    Thích

Đã đóng bình luận.