Home » Social Media » Ẩn, hiện nội dung của Fan Page Tab khi bấm Like

Ẩn, hiện nội dung của Fan Page Tab khi bấm Like

Làm cách nào để ẩn nội dung của fan page tab và chỉ show ra khi người dùng bấm Like ? Đây là một thủ thuật FBML rất hay trong việc khuyến khích người dùng Facebook trở thành fan của bạn đấy. Mình không phải người đầu tiên post bài này nhưng mình sẽ giúp các bạn nắm được cách làm chủ đoạn code FBML để thực hiện được thủ thuật thú vị và hữu ích này.

Tại sao bạn nên biết thủ thuật facebook này ? Rất đơn giản, vì tôi muốn làm fan page của mình thêm cuốn hút, gây sự tò mò và mở rộng cơ hội có được nhiều fan hâm mộ hơn. Các bạn có thể tham khảo Fan Page của LG Mobile dưới đây để làm ví dụ:

Một hình ảnh khá tò mò và lời kêu gọi bấm Like để thấy được “sự thật” sau tấm ảnh mờ ảo khiến người dùng khó cưỡng lại được việc click Like.

Từ ví dụ này, bạn có thể modife ra rất nhiều kiểu, ví dụ như bạn có thể kêu gọi người dùng click like để thấy một đoạn Video thay vì một bức ảnh rõ chẳng hạn…. Vậy cơ bản để thực hiện điều này ra sao ? Mình biết nhiều bạn sẽ cảm thấy hơi khó khăn tvì thủ thuật này có vẻ liên quan tới code nhiều, vì vậy mình hứa sẽ hướng dẫn một cách cơ bản và chi tiết. Yên tâm nhé ! Bắt đầu nào !

Bước 1: Truy cập Fan Page của bạn và Click “Edit Page”.

Bước 2: Kéo thanh cuộn trình duyệt xuống gần cuối trang, và click vào mục Static FBML dưới phần “More Applications”. Click “Add to my Page” và chọn Fan page mà bạn muốn add.

Bước 3: Sau khi đã thêm ứng dụng FBML vào fan page, bạn hãy quay trở lại trang chính của fan page và lại click vào ” Edit Page” ở bước 1. Kéo xuống dưới và tìm mục FBML mà giờ đây đã xuất hiện như trong hình dưới.

Bước 4: Click Vào “Edit Setting” và “Add”. Như vậy là bạn đã thêm 1 FBML tab trống vào list các tab tại Fan page của mình. Công việc tiếp theo là customize tab này. Đây cũng sẽ là Tab mà bạn sẽ nhúng Video vào.

Bước 5: Click “Go to Application”, bạn sẽ được đưa đến 2 ô để nhập tên Tab và Code nhúng Video.

Bước 6: Copy và past đoạn code này vào ô FBML:

Cặp thẻ <fb:fbml version=”1.1”> </fb:fbml> là cặp thẻ bắt buộc phải có. Bạn phải bao bọc toàn bộ nội dung của cả bộ code giữa 2 thẻ này bất kể khi nào dùng FBML.

Bước 7: Nội dung mà khi người dùng đã bấm like sẽ thấy được đặt giữa 2 thẻ sau: <fb:visible-to-connection></fb:visible-to-connection>

Bước 8: Nội dung xuất hiện khi người dùng chưa bấm Like được đặt trong 2 thẻ sau: <fb:else></fb:else>. Ví dụ minh họa bằng code:

<fb:visible-to-connection>
<h2> Hi hi !!! Demo giải pháp thôi nhé! Thanks!</h2>
<img src=”http://www.giaiphapso.info/elly.jpg” style=”border: none;” />
<fb:else>
<div style=”position: absolute; top: 0; left: 0;”>
<h2>Hãy click vào nút like phía trên để khám phá bí mật của bức ảnh!</h2>
<img src=”http://www.giaiphapso.info/elly1.jpg” style=”border: none;” />
</div>
</fb:else>
</fb:visible-to-connection>

Bước 9: Click “Save”, sau đó trở về Wall cảu Fan Page. Click vào “Wall Setting” và chọn Tab mình vừa tạo là Default Landing Tab, để những khách viếng thăm (chưa là fan) sẽ thấy tab này khi chưa click Like.

Chưa click Like – Link Demo: http://www.facebook.com/mrthangdotnet?v=app_6009294086

Sau khi Click Like

Chú ý: nếu bạn là admin của fan page thì bạn sẽ thấy 1 lúc cả 2 hình ảnh (lỗi bất khả kháng của Facebook), vì vậy các bạn hãy truy cập vào fan page bằng một tài khoản khác để thấy kết quả cả thủ thuật này. Dưới đây là 2 đoạn code mẫu, cả nhà có thể download file .txt về để đưa thử vào fan page của mình mà test và thay đổi:

Đoạn Code đầu tiên là đoạn code cơ bản, chưa áp dụng CSS.

Download Hide and See – FBML Code 1

Đoạn Code thứ 2 là đoạn code có dùng CSS Style và canh giữa trang cho hình ảnh.

Download Hide and See – FBML Code 2

Thế là xong rồi đấy, các bạn có thể kết hợp thủ thuật chèn Video vào Fan Page Tab để tạo ra 1 concept là khi người dùng đã click like thì họ sẽ thấy một Video thay vì một hình ảnh. Muốn vậy, các bạn chỉ cần đưa mã FBML để nhúng Video vào Fan Page vào trong khu vực thẻ <fb:visible-to-connection></fb:visible-to-connection> là xong !

FBML rất đa dạng và linh hoạt trong nhiều tình huống, đây chỉ là một ví dụ nhỏ. Sẽ tốt hơn nhiều nếu bạn biết một chút về HTML và CSS. Mọi người hãy kiên nhẫn một tí là xong ngay _^. Chúc cả nhà thành công với thủ thuật này. Có vấn đề gì thì cứ alo ala hoặc yahoo tớ nhé ^_^

P/S: Ý tưởng bài viết gốc là từ Mr Giải Pháp Số nên các bạn có thể thấy trong code có hình ảnh Elly với đường dẫn từ giaiphapso.info. Vì một số bạn nói bài viết của bác GPS hơi ngắn gọn và khó hiểu (vì hơi nặng tính IT hehe) nên mình muốn giúp cả nhà có thể dễ hiểu hơn thủ thuật này.

Mr Thắng@mrthang.net

Các bài viết liên quan

• Facebook: Ấn tượng với quảng cáo cho Fan Page Timeline [Video] (7)
• Social Media: 2 hình thức quảng cáo mới tại Facebook (2012) (12)
• Facebook:”Tung chảo” với giao diện Timeline cho Fan Page (37)
• Social Media: 4 cách để có fan trung thành (19)
• Facebook GraphRank-Một khái niệm mới ? (20)
• Social Media: 7 cách đối phó với fan cuồng (12)
• Các kích thước chuẩn về hình ảnh trên Facebook (18)
• Social Media: Tăng Traffic bằng ma trận Social Bookmarking (62)
• Facebook Insights for Website – Đối thủ của Google Analytics ? (12)
• 3 bước tạo Static HTML iFrame Tab cho Fan Page [Update] (160)

1. 3 bước tạo Static HTML iFrame Tab cho Fan Page « Vivu
2. Remove quảng cáo khi dùng Hotspot Shield để vào facebook Quang cao Popup Sử dụng Hotspot Shield để vào Facebook bị chặn là một trong những thủ thuật đơn giản nhất hiện nay. Nhưng làm thế nào để chặn những q