WordPress #22: Chatbox

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/

Một suy nghĩ 273 thoughts on “WordPress #22: Chatbox

  1. 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

    Số lượt 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 ạ! :(

        Số lượt thích

  2. 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 ^^

    Số lượt 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

      Số lượt 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

        Số lượt 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

        Số lượt 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

            Số lượt thích

  3. 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?

    Số lượt 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

      Số lượ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

          Số lượt 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

              Số lượt thích

    1. đú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é

      Số lượt 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

        Số lượt 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,

        Số lượt thích

                    1. 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

                      Số lượt thích

                    2. để 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 đó

                      Số lượt 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

                Số lượt 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

                    Số lượt thích

  4. 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

    Số lượt thích

  5. 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á.

    Số lượt 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.

        Số lượt thích

  6. 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…

    Số lượt thích

  7. 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é!

    Số lượt thích

  8. 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

    Số lượt thích

  9. 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 =.=

    Số lượt 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

      Số lượt 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

          Số lượt 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 :((~

            Số lượt 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

          Số lượt thích

  10. 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

    Số lượt thích

  11. 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 ạ?

    Số lượt thích

      1. 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

        Số lượt thích

  12. 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 ;((

    Số lượt 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 ạ

      Số lượt thích

  13. 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!

    Số lượt 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

        Số lượt 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.

          Số lượt thích

  14. 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"]

    Liked by 1 person

  15. 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

    Số lượt 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é

                  Số lượt thích

  16. 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 ạ ?

    Số lượt 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è

        Số lượt thích

  17. 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?

    Số lượt 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?

        Số lượt 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!!!!

        Số lượt thích

    1. 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

      Số lượt thích

  18. 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?? :<<

    Số lượt thích

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