« »

Bài viết này cung cấp một danh sách rất nhiều kinh nghiệm của tác giả khi làm việc với các thư viện JavaScript API của mạng mã hội nổi tiếng Facebook. Một bài viết rất đáng xem nếu bạn đang tìm hiểu cách để xây dựng các ứng dụng Facebook dựa trên JavaScript API của nó.

Nhãn: kinh nghiệm JavaScript, ứng dụng Facebook, JavaScript API

Báo cho chúng tôi lỗi JavaScript này

Demo
Phóng to
Tải lại
Cửa sổ mới

Miễn phí web hosting 1 năm đầu tại iPage

Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé! Thử iPage miễn phí cho năm đầu tiên NGAY

Part II

Here goes the link of the first part. In this post I will share (or better to say note down about further experience in FB Javascript API).

Here I will try to focus on :::

(2) get fans count and their feed on page's wall to promote and to share the page.

(3) post to wall (to my page or profile) from my site.

Steps for task (2) :

[1] Facebook fan pages are awesome tools for marketing or promotion. They are attached to facebook open graph. SO it is very much easy to access their public info like feed stream and fan count. But for the other info there should be nneded to logging in.

[2] If we hit to https://graph.facebook.com/ we will get all the public info like -- id, name, username(if any), page profile picture, link, location, hours open. For other info we have to use metdata tag. for this purpose we may hit https://graph.facebook.com/?metadata=1. We may find links for feed, posts, tagged, statuses, links, notes, photos, albums, events and videos. Among them feed, posts, photos and albums are publicly accessible.

[3] So using this protocol we can find and fulfil our needs as mentioned above.

[4] We have called javascript api for getting fancount and for feeds we have used php as this is easy to maintain a multilevel data structure like array in php than javascript.

[5] So the frame of our code goes like as below :

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

  </head>
  <body>
    <div id="user-info" style="display: none;"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <div id="fb-root"></div>

    <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>

    <script type="text/javascript">
            $(document).ready(function(){
                FB.init({ apiKey: 'XXXXXXXXXXXXXXXXXXX' });
            });
    </script>
 </body>
</html>

[6] Here the FB.init is used to initiate the api call. Now to get the fan count we will add the following function after document.ready block and call the function from document.ready.

function getUpdate () {
var htmls = '<div style="background-color:#77A1CD:color:#EAAA00;">';

FB.api('/224365082363', function(response1) {
                        total_members = response1.fan_count;
                        name = response1.name;
                        link = response1.link;
                        htmls += 'Total <i>'+total_members+'</i> persons likes '+'<a href="/javascript/article/JavaScript_Experiments_of_Facebook_SDK_with_Graph_API.php/'+link+'">'+name+'</a><br>';
                        htmls += '</div>';
                        $('#user-info').show();
                        $('#user-info').attr("style","width:450px;height:auto;background-color:#E4E9EE");
                        $('#user-info').html(htmls);
               });
}

[7] Now to find the lates feeds we have used php. From php we have called the same graph protocol and used file_get_contents. the returned datatype is json. SO we used json_decode to parse the data. Then the data type becomes an stdclassobject. The code goes as follows:

<?php
 $myObj = json_decode(file_get_contents("https://graph.facebook.com/224365082363/feed"));
echo "<br>";
$i = 0;
        foreach ($myObj->data as $aData){
                $user[$i]['from'] = $from = "<a href=\"http://www.facebook.com/profile.php?id=".$aData->from->id."\" >".$aData->from->name."</a>";
                $user[$i]['msg'] = $message = $aData->message;
                $created = $aData->created_time;
                
                
                $html  = "<div style=\"background-color:#F9F9F9;color:#000000;height:auto;width:500px;\">";
                $html .= $from.": ".$message;
                $html .= "<font size=\"1\">   ".$created."</font>";
                $html .= "<hr style=\"border-style:dotted; border-color:#6D84B4\"/>";
                $html .= "</div>";
                echo $html;
                $i++;
        }
?>

[8] Here the time returned is on 'yyyy-mm-ddThh:mm:ss' format but normally and specially our application demands time difference from now liek as how many mniutes ago the feed was posted. So for these reason we have used a function that calculates the time difference in days, hours and miniutes. the code block for the function and the calling will be as follows:

<?php
 $myObj = json_decode(file_get_contents("https://graph.facebook.com/224365082363/feed"));
echo "<br>";
$i = 0;
        foreach ($myObj->data as $aData){
                $user[$i]['from'] = $from = "<a href=\"http://www.facebook.com/profile.php?id=".$aData->from->id."\" >".$aData->from->name."</a>";
                $user[$i]['msg'] = $message = $aData->message;
                $created = $aData->created_time;
                $createdtime = date('Y-m-d h:i:s', strtotime($created));
                $now = date('Y-m-d h:i:s', time());
                $user[$i]['ago'] = $difference = get_time_difference($createdtime, $now);
                
                $html  = "<div style=\"background-color:#F9F9F9;color:#000000;height:auto;width:500px;\">";
                $html .= $from.": ".$message;
                $html .= "<font size=\"1\">   ".$created."</font>";
                $html .= "<hr style=\"border-style:dotted; border-color:#6D84B4\"/>";
                $html .= "</div>";
                echo $html;
                $i++;
        }

function get_time_difference($start, $end){

        $tempstart1 = explode('-',$start);
        $startyr = $tempstart1[0];
        $startmon = $tempstart1[1];
        $tempstart2 = explode(' ',$tempstart1[2]);
        $startday = $tempstart2[0];
        $tempstart3 = explode(':',$tempstart2[1]);
        $starthr = $tempstart3[0];
        $startmin = $tempstart3[1];
        $startsec = $tempstart3[2];

        $tempend1 = explode('-',$end);
        $endyr = $tempend1[0];
        $endmon = $tempend1[1];
        $tempend2 = explode(' ',$tempend1[2]);
        $endday = $tempend2[0];
        $tempend3 = explode(':',$tempend2[1]);
        $endhr = $tempend3[0];
        $endmin = $tempend3[1];
        $endsec = $tempend3[2];
        

        $start1 = mktime($starthr, $startmin, $startsec, $startmon, $startday, $startyr);
        $end1 = mktime($endhr, $endmin, $endsec, $endmon, $endday, $endyr);

        $dateDiff = $end1 - $start1;
        $fullDays = floor($dateDiff/(60*60*24));
        $fullHours = floor(($dateDiff-($fullDays*60*60*24))/(60*60));
        $fullMinutes = floor(($dateDiff-($fullDays*60*60*24)-($fullHours*60*60))/60);
        
        $ret = "";
        if($fullDays > 0){
                $ret .= "$fullDays Days ";
        }
        if($fullHours > 0){
                $ret .= "$fullHours Hours ";
        }
        if($fullMinutes > 0){
                $ret .= "$fullMinutes Minutes ";
        }

        if($ret!= ''){
                $ret .= "ago";
        } else {
                $ret .= "A Few Moments ago";
        }

        return $ret;
}
?>

[9] so the final out put will be as the following screenshot -

So we will be back soon with posting to wall steps. ;-)

1 2

« trang trước trang kế »

Mã nguồn
In

Lời bình (1)
Viết

bởi essay writing, 17/03/2011 06:03 PM
Phản hồi

Never though about using html in that purpose! Thank for good ideas you share in your blog! Best regards!

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
~~Website của bạn~~

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

Lượt gửi (0)
Mới

BBCode
HTML
URL
JID

Ứng dụng AI Video.com
Tạo video doanh nghiệp của bạn bằng AI chỉ với giọng nói hoặc văn bản

chatGPTaz.com
Nói chuyện với ChatGPT bằng ngôn ngữ mẹ đẻ của bạn

Ứng dụng AI Video
Ứng dụng video AI MIỄN PHÍ đầu tiên của bạn

Deepfake Video
Deepfake AI Video Maker

Deepfake
Deepfake AI Video Maker

AI Deep Fake
Deepfake AI Video Maker

AIvidio
AI Video Mobile Solutions

AIvideos
AI Video Platform & Solutions

AIvedio
AI Video App Maker

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Powerful AI Presentation PPT Maker for FREE
Build an impressive presentation with our free online AI presentation app

Your next top AI Assistant
Claude AI, developed by Anthropic

Your next top AI Assistant
Claude AI, developed by Anthropic

Temu tặng $500 cho người dùng mới
Claim Free Temu $500 Credit via Affiliate & Influencer Program

Tín dụng quảng cáo TikTok miễn phí
Làm chủ quảng cáo TikTok cho hoạt động tiếp thị doanh nghiệp của bạn

Dall-E-OpenAI.com
Tự động tạo ra hình ảnh sáng tạo với AI

chatGPT4.win
Nói chuyện với ChatGPT bằng ngôn ngữ mẹ đẻ của bạn

Sản phẩm AI đầu tiên của Elon Musk - Grok/UN.com
Nói chuyện với Grok AI Chatbot bằng ngôn ngữ của bạn

Công cụ.win
Mở trung tâm công cụ miễn phí để mọi người sử dụng với hàng trăm công cụ

GateIO.gomymobi.com
Airdrop miễn phí để nhận, chia sẻ lên đến 150.000 đô la cho mỗi dự án

iPhoneKer.com
Tiết kiệm tới 630$ khi mua iPhone 16 mới

Mua Robot Tesla Optimus
Đặt mua Tesla Bot: Robot Optimus Gen 2 ngay hôm nay với giá dưới 20.000 đô la

Cool Domains for Sale!

chatGPT2.fun system.money ApexBTC.com chatGPT4.win MetaTru.com CreditCard.rip javascriptON.com JavaScriptBank.com AI-Trading-Bot.com CTRCoin.com pornID.net AIvideo-app.com gomymobi.com eChainBank.com CryptoKD.com ABP3.com gomymobi.com gomy.mobi ChatTotal.com ChainTutor.com war.money chatGPTaz.com GrokUN.com XMQV.com gomy.mobi Card.rip ZWVQ.com index.services lend.services Dall-E-OpenAI.com hearf.com

Ngày cập nhật:
Tác giả:
Lượt xem:
Lời bình:
Lượt đánh giá:
Lượt gửi:
Kích thước:
Thứ hạng:

15/03/2011
Inverting Things [more]
52,563
1
3
0
25.91 KBytes

Những kinh nghiệm JavaScript hữu ích để phát triển ứng dụng Facebook - Trang 2/vi//en//fr/ - Ngôn ngữ: tiếng Việt

4.3/5 3 lượt đánh giá / 52,563 lượt xem / 1 lời bình 15/03/2011 ...Những kinh nghiệm JavaScript hữu ích để phát triển ứng dụng Facebook - Những kinh nghiệm JavaScript hữu ích để phát triển ứng dụng Facebook - Ngôn ngữ: tiếng Việt

inetryconydot pozcyseo[12] oliviamars[2] xx3004 Cao Phong[4]

Hãy là thành viên đầu tiên làm điều này