Hôm nay vào face tìm cách làm thẻ cho page thì đọc được mấy bài này, đã tạo được một thẻ và nhận thấy nếu muốn làm tiếp cần có một ít tìm hiểu thêm về html và code. Để lúc nào vọc tiếp vậy. Bạn nào muốn nghịch ngợm với một thẻ như Mục lục ở đây:
http://www.facebook.com/dochoigiay hay limit như ở đây: http://www.facebook.com/smartpassiveincome?fref=ts thì vọc nhé.
Cụ thể bài viết:
3 bước tạo Static HTML iFrame Tab cho Fan Page [Update]
Thực sự là gần đây mình gặp rất nhiều các câu hỏi của bạn bè về việc làm fan page tab ra sao. Nhiều bạn cảm thấy rất lạ lẫm và hoang mang vơi một số thay đổi tại Static FBML Application của Facebook. Thực sự điều gì đang diễn ra ? Mình mong muốn muốn post bài này để giúp mọi người xóa tan những “thắc mắc biết hỏi ai” như thế này.
Từ trước đến nay, để tạo được các Fan Page Tab theo ý mình bằng HTML, chúng vẫn thường dùng Static FBML Application. Tuy nhiên, chỉ mới đầu tháng 3/2011 vừa qua, Facebook đã tuyên bố sẽ ngưng không phát triển ứng dụng này và chuyển nó sang hình thức iFrame Tab.
Điều này có nghĩa là admin của fan page phải tạo một facebook application sau đó liên kết nó với fan page (add to page). Sau đó viết code HTML, đặt tại hosting của mình. Khi người dùng truy cập fan page tab, facebook sẽ gọi mã HTML từ hosting của bạn để hiển thị.
Trong chiến lược dài hạn, Facebook sẽ loại bỏ Static FBML ra khỏi mạng xã hội này. Thắng chỉ suy đoán (!?) rằng facebook muốn các admin và developer sử dụng iFrame để tránh ảnh hưởng đến framework chung của facebook (một số trường hợp user dùng Static FBML để hack facebook ?!). Tuy nhiên , để trấn an cả nhà, mình xin báo cáo tình hình hiện tại là:
1. Static FBML application đã không thể sử dụng được nữa (không add Static FBML tab vào page được nữa).
2. Với những ai đang dùng Static FBML Tab từ trước thì các tab vẫn được giữ nguyên, không bị ảnh hưởng.
3. Không thể add thêm các Static FBML tab vào fan page nữa. Vì Facebook đã xoá nút “add another fbml box” trong phần edit app của Static FBML tại fan page.
Vậy thì chúng ta phải giải quyến vấn đề thế nào đây ? làm sao để add một iFrame HTML Tab mới vào Fan Page ? Có hai cách, đó là nếu bạn là một coder thì việc tạo và liên kết application với fan page là chuyện quá dễ dàng. Nhưng nếu bạn là một con gà IT như mình thì sao ? Thì bạn nên thực hiện 3 bước đơn giản của thủ thuật facebook sau đây nhé hehe:
Bước 1: Cài đặt Static HTML iFrame Tabs
Bạn truy cập vào Static HTML iFrame Tabs . Kéo xuống dưới, bạn tìm link Add to my Page như hình minh hoa dưới đây:
Bước 2: Thiết kế Landing Tab
Sau khi add vào page xong, bạn trở về trang fan page của mình. Nhìn qua bên trái, ngay dưới avatar chính, nơi có nhiều các tab cơ bản như Video, Discussion Board….bạn sẽ thấy có thêm một tab có icon hình ngơi sao 5 cánh có tên là Welcome. Đó chính là Static HTML iFrame Tab mà bạn vừa add vào đầy.
Click vào tab này, bạn sẽ thấy hiện ra màn hình sau:
Giờ đây bạn có thể paste HTML Code, Javascript vào ô edit mà ứng dụng này cung cấp. Sau đó click save và view tab là xong. Khi paste HTML code vào ô này, bạn nhớ tick vào nút Enable FBML nhé.
Ngoải ra, khi bạn còn có thể phân chia ra nội dung mà Fan sẽ thấy và nội dung mà Non-Fan sẽ thấy, y hệt như thủ thuật Ẩn hiện nội dung cho Fan Page tab mà có lần mình đã chia sẻ. Chỉ có điều là với ứng dụng mới này, bạn sẽ dễ dàng điều chỉnh và thiết kế vì 2 ô FBML được phân tách ra hẳn hoi.
Cơm thêm: Tên mặc định của tab bạn vừa add vào là “Welcome”, nhưng chắc chắn bạn sẽ muốn đổi tên này sang một cái tên khác thuần Việt hơn đúng không. Bạn hãy vàoEdit Page > Click App (cột trái) > kéo xuống dưới tìm đến iFrame tab> Click Edit Setting > Lúc này bạn có thế thay đổi tên tab tuy hỉ nhé hehe.
Các bạn lưu ý, các hình ảnh add vào tab này cần có độ rộng tối đa (max width là 520 px). Dưới đây là một số code mẫu mà bạn có thể sử dụng thử để chèn vào:
| 1234567891011121314 |
|
Bạn có thể chèn thử đoạn code này vào box đầu tiên trên tab welcome
| 1234567891011121314 |
|
Bạn có thể chèn code này vào box thứ 2 trên tab welcome
Bước 3: Làm sao add thêm tab cho fan page ?
Đây cũng là vấn đề chúng ta cần giải quyết luôn. Khi bạn đã add được một tab cho fan page bằng ứng dụng mới này, bạn sẽ muốn add thêm tab thứ 2, thứ 3…..Làm thế nào đây ? Ứng dụng Static HTML iFrame Tab cho bạn add tối đa 12 tab. Bạn chỉ cần truy cập đường link sau:
……..
cứ thế tiếp tục thay thế con số bằng tiếng anh trong đường dẫn cho tới 12 (twelve) sau đó lại tiếp tục add to fan page như lầ đầu dùng app này.
Rùi ! khi đã định hình được cách add tab vào fan page, giờ đây bạn cần có một trình thiết kế HTML để viết mã như phần Editor (Vew HTML) của WordPress, Yume, Yahoo 360 Plus…Bạn cứ edit, chèn hình ảnh, video, format chữ…rồi chuyển sang view HTML để lấy code là xong. Nếu muốn thiết kế chuyên nghiệp và tinh vi hơn, bạn có thể sử dụng Adobe Dreamweaver cho nó pro hehe. Dưới đâu là Tutorial Video minh hoa cho những gì mình đã hướng dẫn các bạn ở trên.
Vậy là mọi thứ đã rõ ràng rồi đúng không cả nhà. Facebook có tốc độ phát triển và thay đổi rất nhanh dựa trên tiêu chí giúp mọi người liên kết và chia sẻ với thật nhiều người xung quanh mình, vì vậy chúng ta cũng phải linh hoạt chạy theo những thay đổi của nó. Nếu có những thắc mắc nào khác, mọi người có thể comment và đặt câu hỏi ở dưới đây nhé. Chúc cả nhà sử dụng facebook vui khoe nha ^_^.
Facebook for Websites
This guide describes adding Facebook capabilities to websites. See the Getting Started with Apps on Facebook.com guide if you instead want to integrate your app directly into the core Facebook experience.
Facebook Platform enables you to make your web site more social. You can use our Social Plugins, such as the Like Button to drive user engagement with a single line of HTML. Our Login Button and Registration Plugin let you simplify or eliminate your own user registration and sign-in. Lastly, the Graph API lets you access the full social graph of a given user, allowing you to create a truly deep personal experience.
This guide will walk you through the basics of creating a web app that leverages these features. The examples in this guide use PHP for server-side programming and HTML/JavaScript for client-side code. These examples are very straightforward and easily translatable to other languages.
Social Plugins
Social Plugins are the easiest way to get started with Facebook Platform. The plugins are embeddable social features that can be integrated in your site with a line of HTML. Because they are hosted by Facebook, the plugins are personalized for all users who are currently logged into Facebook, even if they are visiting your site for the first time.
The most important Social Plugin is the Like Button, which enables users to share your page with their friends with one click. You can add a Like button to any page with an
iframe tag:<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<iframe src="https://www.facebook.com/plugins/like.php?href=YOUR_URL"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
</body>
</html>
There are a number of options for the Like Button, including the option to include the names and profile pictures of the user's friends who have also liked the page. Here is a Like Button for the Facebook Developers site:
Once you have included the Like Button into your site, you can use other Social Plugins to turn those user interactions into more engaging experiences throughout your site. You can use the Activity Feed Plugin to show users a stream of the recent likes and comments from their friends on your site. You can use the Recommendations Plugin to show personalized page recommendations to your users based on the likes and comments across your entire site. Here are the activity and recommendations plugins for the Facebook Developers site:
Most Social Plugins can be integrated with your site by simply including the
iframe tag for the plugin within your page. There are several Social Plugins, such as Comments and Live Stream, that require the use of XFBML (eXtended Facebook Markup Language). XFBML is a set of XML elements that can be included in your HTML pages to display Social Plugins. When your page is loaded, any XFBML elements found in the document are processed by the JavaScript SDK, resulting in the appropriate plugin being rendered on your page.
We provide XFBML elements for all of our Social Plugins. For example, the Like Button can also be placed on your page by using the XFBML equivalent:
<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-like"></div>
</body>
</html>
The
iframe versions of our plugins are the most widely used, as they require a minimal understanding of Facebook Platform. The XFBML versions are typically used by more sophisticated developers looking for more control and consistency in their codebase.
Getting started could not be simpler. Just select the plugin from our Social Plugin page and follow the steps in the provided configurator. These configurators, like the below, help you setup your plugin and generate all the code you need to add it to your site.
Login
See our Login docs for info and technical guides.
Personalization
While Social Plugins offer an easy way to personalized your site, once you have added login to your site, you can access the full power of the Graph API to create an even deeper personalized experience for your users. You can use the Graph API to access the user's Facebook profile, using this data in your own custom experience. You can use the Graph API to publish to the user's Facebook Wall and their News Feed. You can use the Graph API to access the user's social graph, bring their friends directly to your site all in your own custom experience.
The Javascript SDK provides a straightforward way to access the Graph API: FB.api. This function takes a string argument which specifies the part of the Graph to target and a callback function that is invoked when the call completes. The following demonstrates how to use FB.api() to retrieve the user's picture and name from the Graph API and display it on a page within your site:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'https://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div align="center">
<img id="image"/>
<div id="name"></div>
</div>
</body>
</html>
Another way to personalize your site with the JavaScript SDK is the FB.ui function. This function invokes our Platform Dialogs within the context of your site. You can use the FB.ui function to post to the user's Feed or allow them to invite new friends. The following demonstrates how to use the Feed Dialog from your site:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.ui({
method: 'feed'
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</body>
</html>
When this page is loaded in the user's browser, the JavaScript SDK will render the below dialog that the user can use to post to their feed. You can set a number of defaults for the dialog, which the user can then modify or override prior to posting.
One of the best ways to learn what is possible with the JavaScript SDK is our JavaScript Console. The tool offers a host of examples that you can execute directly in the console itself before you make any changes to your site.
The JavaScript SDK lets you access the Graph API and Platform Dialogs from client-side code but some of the most interesting integrations involve accessing the Graph API from server-side code running on your web server. The JavaScript SDK saves the details for the logged in user in such a way that it can be accessed by the PHP SDK. This allows you to make server-side calls to Facebook Platform without doing any extra work. The following PHP example shows you how to use the JavaScript SDK for login and the PHP SDK for personalization:
<?php
define('YOUR_APP_ID', 'YOUR APP ID');
//uses the PHP SDK. Download from https://github.com/facebook/facebook-php-sdk
require 'facebook.php';
$facebook = new Facebook(array(
'appId' => YOUR_APP_ID,
'secret' => 'YOUR APP SECRET',
));
$userId = $facebook->getUser();
?>
<html>
<body>
<div id="fb-root"></div>
<?php if ($userId) {
$userInfo = $facebook->api('/' . $userId); ?>
Welcome <?= $userInfo['name'] ?>
<?php } else { ?>
<fb:login-button></fb:login-button>
<?php } ?>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</body>
</html>
Using the JavaScript SDK and PHP SDK together is only one of several ways to access user credentials and information from server-side code. Our Authentication Guide highlights how to perform authentication and authorization directly from your web server allowing you to access the Graph API without using any client-side code.
Analytics
You can get detailed analytics about the demographics of your users and how users are sharing from your website with Insights.
Insights provides reports broken down by domain and by app. These reports include rich data about users sharing content from your site within Facebook and other Facebook-enabled apps no matter where those activity originated. For example, if a user puts a URL from your site into a Facebook status message, that data is included in the analytics for your domain.
The data from Insights is also available in the Graph API so you can integrate the Facebook analytics data with your own, in-house analytics systems.
If you use an external analytics system, there are a couple of steps you can take to ensure proper counts for page hits on your domain. First, exclude requests with a user agent matching
facebookexternalhit/*. This user agent is used by the Facebook Open Graph tools to retrieve your og meta tags. Second, track clicks from plugins embedded on your site separately from clicks with a facebook.com referrer. Social Plugins with have a referral URL matching http://www.facebook.com/plugins/*.Next Steps
This was a quick survey of the major features available to your website from Facebook Platform. Our core concepts documents provide deeper insight into the various pieces of Facebook Platform. The Facebook Platform Overview course and Graph API are great places to start. If you are looking for a real world examples to help you get started building please see our Samples. If you are looking for inspiration, check out our Showcase.
