Tạo button đếm ngược chỉ hiển thị khi user search trên Google

24
1915

Chắc rất nhiều bạn download đã gặp qua trường hợp khi tải Photoshop hoặc 1 phần mềm nổi tiếng trên mạng thường kèm 1 file .txt hướng dẫn để lấy pass mở khóa file giải nén, pass mở khóa file giải nén chỉ hiển thị khi người dùng search 1 từ khóa và click vào bài viết kéo xuống tìm mã.

Giống thế này, yêu cầu tìm kiếm để lấy pass mở khóa file nén

1. Giới thiệu sơ qua về việc thêm button:

* Hướng dẫn này đi theo hướng tương tự như trên, lợi ích:
  • Button có thời gian chờ giúp time-on-site của người dùng trên website của bạn lâu hơn.
  • Button chỉ hiển thị khi người dùng tìm từ khóa từ Google nhằm loại bỏ người dùng direct link.
* Thử nghiệm demo để ae dễ hình dung:

Trong demo này mình sẽ test 2 gạch đầu dòng dưới đây:

  • Tìm từ khóa “share cookies Netflix” trên Google. Nhấn vào sẽ hiện button đếm ngược.
  • Nếu từ sharengay.com nhấn thẳng vào bài viết hoặc nhấn vào link đã bookmark sẽ không hiện cho dù trước đó người dùng lấy link truy cập từ Google.

Video demo:

* Demo 2 case button được dùng trong trường hợp:
  • Như đã nói ở trên, nó chỉ hiển thị khi người dùng tìm trên Google, do đó có thể bổ sung cho đoạn đầu tiên mình nói trong bài viết này. Lọc người dùng từ Google Search.
  • Thực tế sharengay: mình có tạo bài viết share cookies Netflix, link tới bài cookies có đặt pass nhưng thường xuyên bị người nước ngoài phá. Nên mình tạo button trên gắn đến bài viết muốn SEO.
  • Có rất nhiều cách có thể áp dụng, ae có thể tùy biến cho trường hợp của mình….
* Ví dụ case thực tế từ website sharengay:

Bài viết share cookies link tới bài viết bán tài khoản Netflix, vừa giúp tăng traffic cho bài bán Netflix (bài share cookies hơn 1k view / 1 ngày), vừa tăng thời gian ở lại trên bài viết lâu – tiêu chí giúp Google đánh giá và xếp hạng bài viết thay vì ae chỉ tìm đúng pass vào copy rồi thoát ra ngay.

* Các bạn có thể xem ảnh bên dưới mình capture 1 đoạn trong bài viết.
Mình đang dùng cách này để hạn chế người phá cookies và thấy hiệu quả hơn

Ưu điểm cách như hình là tiện, chỉ việc sửa bài viết. Nhược điểm là không biết ae có tìm trên Google không và thời gian ở lại trang gần như siêu ngắn. Nên bổ sung thêm button trên sẽ khắc phục được.

2. Thêm button và các thông số cần lưu ý khi setup:

Bước 1: thêm mã HTML vào bài viết:

* Hướng dẫn bằng ảnh kèm chú thích:
Vào bài viết cần thêm button, nên chọn Block Editor để dễ thêm HTML

 

Mình thường thêm button vào cuối bài, ae thích chèn đâu tùy ý
* Đoạn mã thêm vào:
<div id="references40" code-ref="ref51" countdown="8" style="text-align: center; font-weight: 600;"> BUTTON CHỈ HIỆN MẬT KHẨU KHI TÌM TỪ KHÓA "SHARE COOKIES NETFLIX" TRÊN GOOGLE </div>

với:

  • Giá trị code-ref là các khóa (mã bí mật) bạn muốn chèn khi người dùng click vào nó sẽ hiện ra. Các khóa này được lưu trong biến stores bên dưới đoạn mã Javascript (mình sẽ embed trong bài viết). Khóa này có thể là chữ, số được phép có khoảng trắng.
  • Giá trị countdown là số giây bạn muốn người dùng đợi. Mình hay set ngắn khoảng 20s thôi vì để lâu người dùng bực mình.
  • Chỗ nội dung bên trong div có id=”references40″ ở trên là tùy biến, mình chỉ ghi 1 câu ngắn gọn “BUTTON CHỈ HIỆN MẬT KHẨU….” để điều hướng người dùng, các bạn có thể tạo 1 thông báo đẹp đẽ nào đó hoặc chèn HTML thêm vào và style theo ý, chỉ khi người dùng tìm kiếm từ Google nó sẽ tự append button và xóa đi toàn bộ HTML đang có trong div có id=”references40″. Ae tùy biến theo ý mình là được.

Bước 2: thêm mã Javascript để tự động append button vào đoạn HTML có id là references40 vào bài viết:

* Đây là JS hoàn chỉnh (các bạn cuộn xuống để xem):
* Mình sẽ giải thích sơ qua các biến cần lưu ý trên file JS trên:
  • ifm_list_browser: các bạn có thể add thêm các công cụ tìm kiếm như Bing, Cốc Cốc,… các bạn cũng có thể mở rộng ra link từ 1 trang nào đó như Facebook, website của bạn bè, website bất kỳ click vào mới hiện ra phần tử đó chứ không gói gọn trong Google.
  • stores: mảng này chứa cặp key-value tương ứng với trường code-ref="ref51" trên đoạn HTML ở bước 1, keyref51 tương ứng với value343596. Value các bạn có thể để là text có khoảng trắng bất kỳ đều được.
  • Các bạn cũng có thể style css button theo ý thích, style demo ở trên có thể dùng ngon trên Desktop và Mobile.
* JS này chèn ở đâu?

Cá nhân mình chỉ dùng cho 1 số bài viết đặc biệt nên mình chèn trực tiếp vào bài viết luôn. Cần lưu ý site bạn phải có jQuery vì trong đoạn JS trên có sử dụng jQuery.

Cần nói thêm, vì mình dùng WordPress nên hướng dẫn này + hình ảnh đi kèm là WordPress, tuy nhiên mã trên dùng cho mọi nền tảng vì chỉ là HTML + JS. Hướng dẫn khá dài dòng, tuy nhiên mình đã cố gắng cho đơn giản và dễ hiểu nhất có thể để tất cả ae đều làm được. Mong ae thông cảm nếu có điều gì sai sót hoặc góp ý có thể comment bên dưới bài viết này, mình sẽ sửa đổi và tiếp thu. Cảm ơn anh em.

OK, bài viết đã kết thúc. Chúc anh em làm được.

5/5 - (9 bình chọn)
Bài trướcShare tool Keywordtool.io bản Pro nhúng trực tiếp trên web
Bài tiếp theoShare List Phim Sinh Tồn tương tự Squid Game, Alice in Borderland
Tui là 1 con người cả ngố đó mấy bạn, thật may tui được thằng Tín tà tưa (bạn cùng phòng) nhờ làm cái web mà nó không viết gì, tui cũng không biết viết nhưng mà bỏ phí domain tốn xiền. Share Ngay ra đời lãng xẹt z đó. Blog này tui viết hồi cuối tháng 3/2018, có thể thấy độ trẻ trâu qua từng năm của tui không hề giảm. Nói thiệt nha, tui quý mấy bạn đọc cái blog này dù cho nó có mang lại giá trị cho mấy bạn không, nhưng mà tui thực sự cảm ơn mấy bạn. Hông giống Youtube, đăng lên phát là có vài chục ngàn view, tui đăng lên 1 phát có chục view là: "Ơ, dm, sao bữa này nhiều ng đọc dị. Tui dzui. Mấy bạn comment, tui đọc. Tui dzui. Đơn giản dậy thôi". Tui quỡn lắm, lâu lâu đọc lại những gì mình viết rồi thấy trẻ trâu mà không dám sửa. Thôi cứ để nó là 1 kỷ niệm. Ờ, nói nhiều là dậy, vì tui muốn mấy bạn thoải mái nhất khi đọc những dòng này nên viết có hơi dài dòng. Đoạn giới thiệu dễ thương này dành tặng tất cả những ai yêu mến Share Ngay. Sharahero!!!
Theo dõi
Thông báo về
guest
24 người bình luận
mới nhất
cũ nhất like nhiều nhất