Chèn nút like facebook vào wordpress với 3 bước đơn giản nhất

     

Lấy mã và khóa ứng dụng từ Facebook Developers

Bạn truy cập theo đường link Facebook for Developers này, sau đó nhấn vào chữ “Bắt đầu” góc trên cùng bên phải.

Bạn đang xem: Chèn nút like facebook vào wordpress với 3 bước đơn giản nhất

*
Giao diện bắt đầu của Facebook Developers

Nếu chưa có tài khoản, bạn hãy lập một cái, vì tạo tài khoản khá dễ nên mình sẽ không hướng dẫn thêm.

Sau khi đã tạo tài khoản, bạn sẽ được chuyển hướng đến giao diện chính, tại đây nhấn “Tạo ứng dụng”

*

Bạn điền một vài thông tin mà facebook yêu cầu như: Tên hiển thịEmail liên hệ, sau đó nhấn nút “Tạo ứng dụng

*

Trong menu bên trái trỏ vào “Cài đặt” rồi nhấp vào “Thông tin cơ bản”. Điền thông tin vào những trường cần thiết. Bao gồm:

Tên hiển thị: Nhập tên mà bạn muốn facebook hiển thị trong giao diện quản trị ứng dụng.

Miền ứng dụng: Nhập tên miền mà bạn muốn thêm bình luận facebook vào website. Nhớ bao gồm cả http hoặc https.

URL chính sách quyền riêng tư: Nhập đường dẫn (link) tới trang chính sách bảo mật của bạn.

Kéo xuống cuối trang rồi nhấp vào “Thêm nền tảng”. Chọn “Website” rồi nhập tên miền của bạn vào.

*

Sau khi điền xong tên miền, facebook sẽ tự chuyển hướng về giao diện thông tin cơ bản. Bạn hãy lưu lại hai trường APP_IDSecret Key. Hai trường mã này giúp bạn kết nối ứng dụng giữa hai nền tảng với nhau, ở đây là facebook và website.

Được trích dẫn từ bài viết Thêm bình luận facebook vào website wordpress (letspro.edu.vn)

Thêm nút like facebook vào website wordpress bằng Plugin

Trong menu quản trị wordpress. trỏ vào mục “Plugin” rồi chọn “Cài mới”. Tiếp đến nhập từ khóa “wp like button” vào trường tìm kiếm.

*

Bạn cũng có thể tải trực tiếp file .zip từ trang chủ wordpress theo đường dẫn WP Like Button.

Sau khi cài đặt và kích hoạt plugin. Bạn sẽ thấy một icon mới như thế này

*
xuất hiện ở thanh menu quản trị, hãy nhấp vào nó để đi tới giao diện chính của plugin

*

Đầu tiên là tab setting, trong này sẽ bao gồm 3 mục cài đặt chính. Đầu tiên là:

*
Where to display?: Tùy chọn nơi hiển thị Plugin. bao gồm:Homepage: Trang chủAll pages: Tất cả các trangAll posts: Tất cả bài viếtAll archive pages: Tất cả các trang lưu trữ (Chuyên mục, thẻ,…)Exclude specific pages and posts: Loại trừ các trang và bài đăng cụ thể (Có danh sách cho các bạn chọn)Enable like button for mobile (Responsive layouts): Bật nút thích cho thiết bị di động (Bố cục đáp ứng) Tùy chọn này giúp nút like sẽ thu nhỏ/ phóng to tùy theo tỉ lệ màn hình.
*
App ID: Trường để điền mã ứng dụng của Facebook DevelopersAdmin ID: mã ID User Facebook của người quản trịKid Directed Site?: Nếu trang của bạn có nội dung giới hạn độ tuổi (ví dụ, 13 tuổi trở lên) thì “yes” để bật tùy chọn này, không có thì để “no”.Default Image: Thiết lập hình ảnh mặc định sẽ hiển thị khi chia sẻ lên facebook nếu bài đăng không có ảnh thumbnail.
*
Shortcode: Sử dụng shortcode để hiển thị nút like và chia sẻ facebook ở bất kỳ đâu bạn muốn.Code Snippet: Nếu bạn muốn hiển thị plugin tại 1 vị trí tùy chỉnh trên tất cả bài đăng hoặc trang thì có thể chèn Snippet này vào trong giao diện.

Xem thêm: Nhập Nhèm Xuất Xứ Xe Đạp Điện Việt Nam Sản Xuất Xứ Xe Đạp, Xe Máy Điện

*
Before of After: Tùy chọn hiển thị trước hoặc sau nội dung.What to like?: bao gồm 3 tùy chọn.Mỗi bài viết và trang sẽ có một nút like và chia sẻ riêng biệtwebsite sẽ chung một nút thích và chia sẻwebsite sẽ chung một nút thích và chia sẻ bằng một nguồn URL tùy chỉnh.Language: Ngôn ngữWidth: Chiều rộng tối đa của toàn bộ vùng chứaPosition: Vị trí của nút like và share trong vùng chứa (Trái, giữa hoặc phải)

Cuối cùng là tab Preview, bao gồm các cài đặt và chế độ xem trước

*
Layout: Chọn bố cục cho nút like và shareColor: Chọn chế độ màu cho nút like và share (sáng hoặc tối)Action Type: Loại hành động (like hoặc recommend)Button Size: Kích thước nút (nhỏ hoặc lớn)Include Share Button: Bao gồm nút chia sẻ. Tùy chọn này giúp tạo ra một nút chia sẻ lên facebook nằm bên cạnh nút like.

Sau khi tùy chỉnh xong bạn nhấn vào nút “Save Settings” để lưu lại toàn bộ cài đặt. Ngoài nếu để ý bạn sẽ thấy bên cạnh có một công tắc ON/OFF. Cái này là để để tắt hoặc bật plugin, tương đương với kích hoạt và ngừng kích hoạt trong cài đặt plugin của wordpress.

Cuối cùng thì đây là kết quả mà bạn sẽ nhận được

*

Tiếp theo mình sẽ hướng dẫn các bạn chèn nút like vào wordpress theo cách thủ công, hay chính xác hơn là sử dụng code và tài nguyên có sẵn của giao diện. Đây có thể coi là một hướng dẫn nâng cao, nhưng bạn vẫn nên tham khảo để tích lũy thêm kinh nghiệm cho bản thân nha.

Chèn nút like facebook vào wordpress theo cách thủ công

Lấy mã từ Facebook Developers

Đầu tiên bạn truy cập đường dẫn sau Nút Thích – Plugin xã hội (facebook.com). Sau đó cuộn trang xuống dưới một chút sẽ thấy giao diện sau

*

Bạn tiến hành nhập thông tin vào những trường cần thiết, cũng như thiết lập những tùy chọn sao cho phù hợp với nhu cầu cần thiết. Các thiết lập có trong trình tạo nút like bao gồm:

URL để thích: Nhập URL trang bạn muốn tạo nút like.Width: Chiều rộng vùng chứa nút thích và chia sẻ (mặc định 100%)Bố cục: Chọn bố cục cho nút thích và chia sẻ (Hỗ trợ xem trước ở box bên dưới)Kích thước nút: như tên gọi (có hỗ trợ xem trước)Loại hành động: Chọn “thích” hoặc “khuyên dùng”Bao gồm nút chia sẻ: như tên gọi, tắt để hiển thị mỗi nút thích.

Sau khi thiết lập xong bạn nhấn vào nút “Lấy mã” ngay bên dưới, một popup nhỏ chứa mã sẽ hiện ra như ảnh dưới:

*

Trong popup này chứa 2 loại mã. Đầu tiên là mã JavaScript hay còn được gọi là JavaScript SDK – mã này gửi trình duyệt tới thư viện mã dành cho ứng dụng của facebook. Hệ sinh thái sử dụng mã này rất đa dạng (Bình luận facebook, Fanpage facebook, Live chat facebook,…) Với mã này bạn chỉ cần thêm vào 1 lần duy nhất là đã có thể tích hợp được hết tất cả ứng dụng của facebook vào website của mình rồi.

Thứ hai là mã HTML của nút like. Mã này thì dành riêng cho nút like (tất cả tích hợp của facebook đều có mã HTML riêng). Vị trí bạn dán mã này sẽ quyết định việc nút like sẽ được hiển thị ở đâu.

Dán mã vào website

Giao diện hỗ trợ Hook

Với JavaScript SDK bạn nên để nó load ở trong thẻ head để không làm gián đoạn quá trình tải của các tích hợp liên quan.

wp_head sẽ là hook mà bạn cần lựa chọn. Display rule (quy tắc hiển thị) thì tùy theo nhu cầu, như mình thì chỉ muốn nó tải ở bài viết lên để Display rule = posts.Ảnh dưới đây là ví dụ của mình với theme generatepress

*

Mã HTML thì bạn sẽ hook tại vị trí cần hiển thị, nó có thể là trước nội dung, sau nội dung hoặc ở bất kỳ đâu bạn muốn mà theme hỗ trợ điều đó.

Nếu bạn muốn hook nút like và share ở sidebar thì mình khuyên bạn lên “nhét” code vào widget có tên là “HTML” hoặc “Văn bản”.

Ví dụ mình muốn hook nút like và share ở cuối nội dung. Với Theme Generatepress thì hook đó có tên generatepress_after_entry_content.