Hướng dẫn tạo button lấy mã giảm giá

Hướng dẫn tạo button lấy mã giảm giá – Plugin chia sẻ mã coupon

Nếu bạn đang tạo một website hay một blog để tham gia kiếm tiền bằng hình thức tiếp thị liên kết, thì việc tạo button lấy mã giảm giá là điều vô cùng quan trọng. Blog chia sẻ coupon hay mã giảm giá đang trở thành xu thế chung của những người làm tiếp thị liên kết (affiliate marketing)

Hiện nay các blogger hay sử dụng cách thức nhận mã giảm giá bằng các nút chia sẻ mã giảm giá (button chèm mã giảm giá coupon). Mục đích của cách làm này là bạn chèn link tiếp thị liên kết vào nút lấy mã coupon và đưa ra những lời kêu gọi hành động hướng tới khách hàng. Chẳng hạn như, hãy click vào đây để nhận mã giảm giá, nhận mã coupon tại đây

Việc thông qua kêu gọi hành động bằng cách nhấn vào nút chia sẻ, nhận mã coupon, bạn sẽ điều hướng người dùng tới website bán sản phẩm mà bạn làm tiếp thị liên kết, và bạn sẽ nhận được hoa hồng nếu khách hàng mua sản phẩm đó.

Khi người dùng click vào button này thì mã giảm giá sẽ hiện ra đồng thời một tab mới chứa link sản phẩm tự động mở ra (cách này mục đích là tạo cookie trên trình duyệt của người dùng)

Hiện nay ở Việt nam có nhiều website chia sẻ mã giảm giá, giới thiệu các đợt khuyến mại, mã coupon và đã rất thành công với cách làm này như website: magiamgia.comcanhme.comoffers.vn, …

Ưu điểm của việc này là, bạn có thể giấu các link tiếp thị liên kết một cách khéo léo khiến khách hàng tin tưởng hơn khi click.

Trong bài này, mình sẽ hướng dẫn bạn cách tạo ra nút chia sẻ mã giảm giá trong WordPress giống canhme.com

Hướng dẫn tạo button lấy mã giảm giá

Đây là cách tạo mã coupon đơn giản, hiện nay có nhiều plugin về mã giảm giá và theme hỗ trợ mã giảm giá, bạn có thể tìm hiểm thêm về chủ đề này nhé.

Cách 1. Tạo Coupon Button với Custom Shortcode

Tạo Custom Shortcode trong Functions.php

Cách làm này thì bạn có thể giấu hoàn toàn link tiếp thị liên kết khi người dùng di chuyển chuột vào nút bấm.

Đầu tiên, bạn đăng nhập vào Bảng tin => Giao diện => Sửa và mở tập tin functions.php, hãy nhớ là chọn đúng file nhé !

Tiếp theo bạn copy đoạn mã code bên dưới và thêm vào dưới cùng của tập tin functions.php.

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
/**
* Button Coupon.
*/
function xuanhoablog_bt_coupon( $atts) {
    extract(shortcode_atts(array(
                ‘link’ => ,
                ‘coupon’ => ,
                ‘text’ => “‘Sử dụng coupon giảm giá bên dưới khi thanh toán:'”,
                ‘content’ =>,
‘a’ => “‘”              
                ), $atts));
   return ‘<a href=”javascript:void(0)” target=”_blank” onclick=”s=prompt(‘.$text.‘,’.$a..$coupon..$a.‘);window.open(‘.$a..$link..$a.‘); ” class=”coupon-code”>’.$content.‘</a>’;
}
add_shortcode( ‘btcoupon’, ‘xuanhoablog_bt_coupon’ );
/**
* Link Coupon.
*/
function xuanhoablog_link_coupon( $atts) {
    extract(shortcode_atts(array(
                ‘link’ => ,
                ‘content’ =>,
‘a’ => “‘”              
                ), $atts));
   return ‘<a href=”javascript:void(0)” target=”_blank” onclick=”window.open(‘.$a..$link..$a.‘);” class=”coupon-code”>’.$content.‘</a>’;
}
add_shortcode( ‘linkcoupon’, ‘xuanhoablog_link_coupon’ );

Cuối cùng bạn hãy lưu lại nhé

Thêm CSS để làm đẹp nút nhấn

Để cho nút mã giảm giá đẹp mắt chúng ta hãy tùy chính bằng cách thêm đoạn code CSS.

Bạn vào Bảng tin => Giao diện => Sửa và chọn tập tin CSS, nếu theme có hỗ trợ tùy chỉnh CSS thì bạn hãy dán đoạn code bên dưới vào nhé, sau đó lưu lại là xong.

.couponcode {backgroundcolor: #669900;text-align: center;color: #ffffff;
cursor: pointer;fontweight: bold;fontsize: 12px; padding: 3px 12px;
display: inlineblock;marginbottom: 8px;height: initial;borderradius: 4px;}

Sau khi hoàn thành, mình sẽ được nút nhấn như dưới:

Hướng dẫn tạo button lấy mã giảm giá

Bạn có thể tùy chỉnh màu sắc, kích thước theo ý muốn bằng cách đổi mã code, size tương ứng.

.couponcode{backgroundcolor: #669900;text-align: center;color: #fff; cursor: pointer;font-weight: bold;font-size: 14px; padding: 10px 15px;display: inline-block;margin-bottom: 10px;height: initial;}
a.couponcode:hover {color: #ffffff;text-decoration:none}

Hướng dẫn cách sử dụng

Sau khi hoàn tất bước phía trên thì bạn có thể sử dụng đoạn shortcode bên dưới để chèn vào vị trí muốn hiển thị trong bài viết.

[linkcoupon link=“https://xuanhoablog.com” content=“XUAN HOA BLOG”]
[btcoupon link=“https://xuanhoablog.com” coupon=“XUANHOABLOG” content=“XUAN HOA BLOG”]

Trong đó:

  • linkcoupon là nút nhấn thông thường, khi nhấn vào sẽ chuyển hướng tới trang tiếp theo.
  • btcoupon là nút nhấn có chứa mã giảm giá, khi nhấn vào sẽ mở ra một popup để người dùng có thể copy được và chuyển hướng đến trang tiếp theo.

Tuy nhiên, mỗi lần sử dụng bạn lại phải gõ hoặc copy thì nó sẽ rất tốn thời gian.

Để tạo button lấy mã giảm giá đơn giản, bạn sử dụng plugin Visual Editor Custom Button giúp chèn button vào trình soạn thảo WordPress dễ dàng hơn.

Cài đặt plugin Visual Editor Custom Buttom

Bạn cài đặt plugin Visual Editor Custom Buttons và kích hoạt nó lên để bắt đầu sử dụng.

Sao đó, bạn truy cập Dashboard => Visual Editor Custom Buttons => Settings để cấu hình vị trí hiển thị của các button và chỉ định loại user có thể sử dụng.

Tiếp theo, bạn vào Visual Editor Custom Buttons => Add new để tạo ra một button mới.

Trong đó:

  • Enter title here: tên nút button.
  • Button Content: nội dung của nút button.
  • Display Editor: tùy chọn hiển thị.
  • Visual Editor Content Styling: Cấu hình CSS.

Bạn tùy chọn giống như hình bên dưới, trong ví dụ mình chèn đoạn shortcode và lựa chọn Icon để dễ nhìn thấy.

Hướng dẫn tạo button lấy mã giảm giá

Cuối cùng nhấn nút Publish.

Bây giờ, tại khung soạn thảo bài viết, bạn chỉ cần nhấp vào đây là được.

Hướng dẫn tạo button lấy mã giảm giá

Chỉ cần vào thao tác đơn giản là bạn đã có thể thêm một Custom Button bất kỳ vào trình soạn thảo của WordPress rồi đấy.

Từ giờ nó sẽ giúp bạn tiết kiệm được nhiều thời gian và làm cho công việc viết bài của bạn trở nên chuyên nghiệp hơn.

Cách 2. Tạo Coupon Button với Plugin ShortCodes Ultimate

Hướng dẫn cài đặt plugin Shortcodes Ultimate

Plugin Shortcodes Ultimate là một plugin miễn phí của WordPress.

Shortcodes Ultimate là plugin rất phong phú và đa dạng, có rất nhiều tính năng rất hữu ích trong trình soạn thảo văn bản của WordPress

Và trong phần này chúng ta sẽ tìm hiểu tính năng tạo nút mã giảm giá, còn các tính năng khác chúng ta sẽ tìm hiểu ở một chủ đề khác.

Để cài đặt bạn hãy vào phần Plugin trong phần quản trị của website bạn chỉ cần gõ đúng tên plugin Shortcodes Ultimate này rồi cài đặt.

Việc cài đặt plugin khá đơn giản nên mình sẽ không nói chi tiết ở đây. Xem thêm Hướng dẫn cài đặt plugin

Hướng dẫn tạo button lấy mã giảm giá

Sau khi cài đặt xong, plugin này sẽ tự động chèn nút Insert shortcode vào khung soạn thảo bài viết.

Hướng dẫn Tạo button lấy mã giảm giá

Ở cửa sổ soạn thảo bài viết, bạn nhấn vào Insert shortcode => Button.

Hãy nhấn vào nút Button

Hướng dẫn tạo button lấy mã giảm giá

Sau khi nhấn vào nut Botton nó sẽ hiện ra khung cài đăt thông số cho nút.

Bạn chú ý các thông tin sau:

Hướng dẫn tạo button lấy mã giảm giá

Hướng dẫn tạo button lấy mã giảm giá

Hướng dẫn tạo button lấy mã giảm giá

Các trường bạn cần điền vào như sau:

  • Link: bạn chèn link (thường là link affiliate) được trỏ đến sau khi click vào button. Bạn có thể dùng các plugin cloak link như plugin Pretty Link để giúp link affiliate thân thiện hơn với người dùng.
  • Target: chọn Open in new tab để mở link trong tab mới. Điều này giúp cho người dùng vẫn ở lại site của bạn và giảm tỉ lệ thoát trang.
  • Style: chọn kiểu nút bấm. Chọn mặc định nếu bạn không muốn thay đổi.
  • Background: màu nền cho nút button.
  • Text color: màu chữ ở nút button, theo mình bạn nên để mặc định là #FFFFFF tức là màu trắng
  • Size: kích cỡ của nút button.

Còn rất nhiều tùy chỉnh các bạn có thể tự vọc bao gồm hình dạng, kích thước, biểu tượng, ký hiệu…

Bạn chú ý quan trọng nhất để làm Button ẩn mã giảm giá thì bạn điền vào mục Tự động trượt như sau:

  • onClick: action xảy ra sau khi người dùng click vào nút bấm. Đây chính là phần hiển thị ở góc trên màn hình thông báo khi bạn bấm vào nút chia sẻ. Nôm na nó là một mã Javascript yêu cầu hành động khi bấm nút. Cú pháp như sau:
1
s=prompt(‘Sử dụng coupon giảm giá bên dưới khi thanh toán:’,‘mã giảm giá’)

Bạn thay đổi chữ mã giảm giá mình bôi đen kia thành mã giảm giá tương ứng của bạn.

Tránh thay đổi các dấu chấm, phẩy nếu không thì code sẽ không chạy nhé.

  • Rel attribute: chọn nofollow. Lý do Google cực ghét các link tiếp thị liên kết. Bởi vậy tốt nhất là cài đặt cho nó thuộc tính nofollow, khi các con bọ google ghé thăm blog thì nó sẽ bỏ qua cái link này, rất tốt cho SEO. Bạn có thể tìm hiểu thuộc tính Nofollow và Dofollow là gì nhé.
  • Content: đây là nội dung văn bản hiển thị trong nút. Ví dụ: Lấy mã giảm giá hoặc Nhận Coupon….

Sau khi cài đặt xong, bạn kéo xuống dưới cùng và chọn Live Preview để xem trước.

Sau khi kiểm tra nếu thấy OK thì bấm chọn Insert Shortcode để chèn button mã giảm giá.

Cách sử dụng rất đơn giản, trong khi soạn thảo bài viết, khi nào bạn cần chèn nút chia sẻ Coupon thì bạn nhấn vào Insert shortcode rồi chọn chức năng Button.

Tuy nhiên điểm bất tiện là mỗi lần sử dụng, bạn lại phải thao tác từ đầu.

Và đây là thành quả của mình:

Hướng dẫn tạo button lấy mã giảm giá

Lời kết tạo button lấy mã giảm giá

Hiện nay, trong lĩnh vực kiếm tiền affiliate marketing, có rất nhiều website chia sẻ mã giảm giá, do đó việc cạnh tranh ngày càng cao.

Để có thể đưa website của mình vượt lên đối thủ, bạn cần một chiến lược phát triển đúng đắn. Hãy tập trung chia sẻ giá trị cho người dùng, và đừng quá nhồi nhé mã giảm giá vào bài viết của website. Hãy cập nhật những thông tin khuyến mãi, mã giảm giá thiết thực nhất cho khách hàng của mình.

Bên cạnh 2 cách tạo mã giảm giá trên, có khá nhiều plugin giúp tạo ra nút chia sẻ mã giảm giá, bạn có thể tham khảo:

Nếu có bất cứ khó khăn hay thắc mắc gì về bài viết, bạn nhớ để lại bình luận phía dưới để chúng ta cùng trao đổi nhé.

Chúc bạn thành công !

Xem thêm: Chống spam comment bằng plugin Akismet

4 Comments

  1. Hoàng Tuấn 20/11/2018
    • Nguyễn Xuân Hòa 20/11/2018
  2. Kiên Cương 12/11/2019
    • Nguyễn Xuân Hòa 30/11/2019

Leave a Reply