Cách sử dụng tiện ích Facebook Button

1. Các tiện ích Widgets trong Elementor

Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.

Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:

• Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
• Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
• Advanced (Nâng cao): Các tùy chọn nâng cao như:
  • Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
  • Z-index: Thứ tự hiển thị của các lớp phần tử.
  • CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
  • Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
  • Background: Màu nền, hình ảnh nền, gradient.
  • Border: Đường viền.
  • Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
  • Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
  • Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.

2. Tiện ích Facebook Button là gì ?

Tiện ích Nút Facebook (Facebook Button) trong Elementor cho phép bạn dễ dàng nhúng các nút tương tác từ Facebook vào trang web của mình. Điều này giúp tăng cường tương tác xã hội, khuyến khích người dùng chia sẻ nội dung hoặc theo dõi trang của bạn trên Facebook.

3. Các bước sử dụng tiện ích Facebook Button

I. Nội dung (Content)

Đây là nơi bạn cấu hình loại nút, bố cục, kích thước và các tùy chọn hiển thị khác.

A. Button (Nút)

• Bạn đã kết nối với ứng dụng Facebook (You are connected to Facebook App): Điều này cho biết tiện ích đã được kết nối với Facebook App ID của bạn. Bạn có thể thay đổi ID ứng dụng nếu cần.
• For users from the EU Facebook widgets will only work for site visitors if they have logged into Facebook and consented to cookies. Learn more: Đây là một thông báo quan trọng về quyền riêng tư dữ liệu (GDPR) cho người dùng ở EU, cho biết các tiện ích Facebook chỉ hoạt động nếu người dùng đã đăng nhập Facebook và đồng ý với cookie.

• Kiểu (Type): Chọn loại nút Facebook bạn muốn hiển thị. Các tùy chọn phổ biến thường bao gồm:
  • Like (Thích): Nút “Thích” cho phép người dùng bày tỏ sự yêu thích đối với nội dung hoặc trang của bạn.
  • Share (Chia sẻ): Nút “Chia sẻ” cho phép người dùng chia sẻ nội dung của bạn lên Facebook.
  • Follow (Theo dõi): Nút “Theo dõi” trang Facebook của bạn.

• Layout (Bố cục): Chọn cách hiển thị nút. Các tùy chọn có thể bao gồm:
  • Standard (Tiêu chuẩn): Hiển thị nút kèm theo số lượt tương tác (nếu có).
  • Button Count (Nút với số lượng): Chỉ hiển thị nút và số lượt tương tác bên cạnh.
  • Box Count (Hộp với số lượng): Hiển thị nút và số lượt tương tác trong một hộp phía trên.
• Kích thước (Size): Chọn kích thước của nút (ví dụ: Nhỏ, Lớn).
• Color Scheme (Bảng màu): Chọn bảng màu cho nút (ví dụ: Sáng, Tối).
• Nút chia sẻ (Share Button): (Chỉ hiển thị nếu bạn chọn “Like” hoặc “Follow” là loại nút) Bật/tắt hiển thị nút chia sẻ bên cạnh nút chính.
• Faces (Khuôn mặt): Bật/tắt hiển thị ảnh đại diện của những người đã tương tác với nội dung/trang.
• Target URL (URL đích): URL mà nút Facebook sẽ tương tác (ví dụ: trang bạn muốn chia sẻ, hoặc trang fanpage Facebook của bạn).
• URL Format (Định dạng URL): Chọn định dạng URL (Plain Permalink hoặc Simple Permalink).

II. Kiểu hiển thị (Style)

Tiện ích Nút Facebook thường có các tùy chọn kiểu hiển thị hạn chế vì giao diện của nó được kiểm soát phần lớn bởi Facebook. Tuy nhiên, một số tùy chỉnh cơ bản có thể có:

• Align (Căn chỉnh): Căn chỉnh nút (trái, giữa, phải).
• Margin/Padding: Khoảng cách lề/đệm (trong tab Nâng cao).

(Do bản chất của tiện ích Facebook, các tùy chọn về phông chữ, màu sắc chi tiết của nút thường được kiểm soát bởi API của Facebook chứ không phải trực tiếp từ Elementor. Các tùy chọn này thường chỉ có ở tab Nâng cao để điều chỉnh vị trí và lề của toàn bộ tiện ích.)

III. Nâng cao (Advanced)

Tab này cung cấp các tùy chọn nâng cao hơn để kiểm soát bố cục, hiệu ứng và khả năng đáp ứng của toàn bộ tiện ích Nút Facebook.

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích Nút Facebook với các phần tử khác xung quanh.
• Padding (Khoảng đệm): Khoảng đệm bên trong tiện ích.
• Width (Chiều rộng): Đặt chiều rộng của toàn bộ tiện ích Nút Facebook.
• Position (Vị trí): Mặc định, Relative, Absolute, Fixed (các tùy chọn định vị nâng cao).
• Z-index: Xác định thứ tự xếp lớp của tiện ích nếu nó chồng lên các phần tử khác.

2. CSS ID & CSS Classes:

• Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến tiện ích bằng mã CSS riêng.

3. Hiệu ứng chuyển động (Motion Effects):

• Entrance Animation (Hoạt ảnh khi vào): Chọn hiệu ứng xuất hiện cho toàn bộ tiện ích Nút Facebook khi trang được tải.
• Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho toàn bộ tiện ích khi di chuột qua.
• Scrolling Effects (Hiệu ứng cuộn): Tạo các hiệu ứng khi người dùng cuộn trang.
• Mouse Effects (Hiệu ứng chuột): Tạo các hiệu ứng khi di chuột qua tiện ích.

4. Nền (Background):

• Bạn có thể thêm màu nền, hình nền hoặc gradient cho toàn bộ vùng chứa tiện ích Nút Facebook.

5. Đường viền (Border):

• Tùy chỉnh kiểu đường viền, độ dày, màu sắc và bán kính bo tròn cho toàn bộ vùng chứa tiện ích.

6. Mặt nạ (Mask):

• Áp dụng một hình dạng mặt nạ để tạo hiệu ứng đặc biệt cho tiện ích.

7. Khả năng đáp ứng (Responsive):

• Ẩn trên máy tính để bàn (Hide On Desktop), Ẩn trên máy tính bảng (Hide On Tablet), Ẩn trên thiết bị di động (Hide On Mobile): Cho phép bạn ẩn tiện ích Nút Facebook trên các loại thiết bị khác nhau nếu cần.

8. Thuộc tính (Attributes):

• Cho phép bạn thêm các thuộc tính HTML tùy chỉnh cho thẻ tiện ích.

9. CSS tùy chỉnh (Custom CSS) (chỉ có trong Elementor Pro):

• Cho phép bạn viết mã CSS trực tiếp để tùy chỉnh giao diện và hành vi của tiện ích một cách nâng cao.