2013-11-25 16 views
8

enter image description herefacebook lập trình đăng trên trang facebook có ảnh lớn

Tôi đã tạo trang facebook giả (trang giải trí). Ở bên trái của ảnh đính kèm, tôi đã tạo một bài đăng đầu tiên theo cách thủ công (ảnh bên dưới có ảnh lớn nhất là ) và một ảnh theo chương trình (ảnh ở trên có ảnh nhỏ).

Code tôi sử dụng cho các ảnh nhỏ trông như thế này:

FB.api(
     'https://graph.facebook.com/[myAppId]/feed', 
     'post', 
     { 
      message: 'this is a grumpy cat', 
      description: "This cat has been lost for decades now, please call at 654321486", 
      picture: "http://laughingsquid.com/wp-content/uploads/grumpy-cat.jpg" 

     }, 
     function (response) { 
      if (!response) { 
       alert('Error occurred.'); 
      } else if (response.error) { 
       document.getElementById('result').innerHTML = 
        'Error: ' + response.error.message; 
      } else { 
       document.getElementById('result').innerHTML = 
        '<a href=\"https://www.facebook.com/' + response.id + '\">' + 
         'Story created. ID is ' + 
         response.id + '</a>'; 
      } 
     } 
    ); 

Nhưng tôi không hài lòng với nó: ứng dụng tôi đang làm việc trên làm cho một danh sách các loài động vật bị mất, vì thế nó sẽ lớn hơn nhiều với những bức ảnh lớn.

Tôi không thấy bất kỳ ví dụ nào về cách thực hiện trên các trang dành cho nhà phát triển facebook. Tôi tin rằng điều này là có thể, nhưng tôi chưa tìm thấy nó. Các bạn đã trải qua vấn đề này chưa?

Trả lời

7

Cuối cùng, tôi đã làm được! Tôi đang đăng giải pháp, nhờ cdbconcepts chỉ cho tôi đúng hướng. Sau khi đọc doc lại:

https://developers.facebook.com/docs/reference/api/photo/

Họ nói rằng: "Bạn cũng có thể xuất bản một bức ảnh bằng cách cung cấp một param url với URL của ảnh." Url không phải nằm trên cùng một máy chủ, như được hiển thị trong ví dụ bên dưới, và nó hoạt động với js-sdk.

Vì vậy, đây là mã thức mà làm việc cho tôi:

<html> 
<head> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
</head> 
<body> 

<div id="fb-root"></div> 
<script> 

var appId = 'Replace with your appId'; 

window.fbAsyncInit = function() { 
    FB.init({ 
     appId: appId, 
     status: true, // check login status 
     cookie: true, // enable cookies to allow the server to access the session 
     xfbml: true // parse XFBML 
    }); 


    var options = { 
     scope: 'manage_pages, publish_stream' 
    }; 

    FB.Event.subscribe('auth.authResponseChange', function (response) { 
     if (response.status === 'connected') { 
      testAPI(); 
     } else if (response.status === 'not_authorized') { 
      FB.login(function() { 
      }, options); 
     } else { 
      FB.login(function() { 
      }, options); 
     } 
    }); 
}; 

// 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)); 

// Here we run a very simple test of the Graph API after login is successful. 
// This testAPI() function is only called in those cases. 
function testAPI() { 
    console.log('Welcome! Fetching your information.... '); 
    FB.api('/me', function (response) { 
     console.log('Good to see you, ' + response.name + '.'); 
    }); 
} 

function error(msg) { 
    document.getElementById('result').innerHTML = 'Error: ' + msg; 
} 

function postApi() { 

    var myPageID = '484364788345193'; 
    var targetPageName = 'Entertainment page of ling'; 
    var pathToImg = 'http://laughingsquid.com/wp-content/uploads/grumpy-cat.jpg'; 
    var accessToken = null; 

    FB.api(
     'https://graph.facebook.com/me/accounts', 
     function (response) { 
      if (!response || response.error) { 
       console.log(response); 
       error('Error occured'); 
      } else { 
       console.log(response); 
       for (var i in response.data) { 
        if (targetPageName === response.data[i].name) { 
         accessToken = response.data[i].access_token; 
        } 
       } 
       if (accessToken) { 
        FB.api(
         'https://graph.facebook.com/' + myPageID + '/photos', 
         'post', 
         { 
          url: pathToImg, 
          access_token: accessToken, 
          message: "Tadaam" 
         }, 
         function (response) { 
          if (!response || response.error) { 
           console.log(response); 
           error('Error occured'); 
          } else { 
           console.log(response); 
           alert("PostId: " + response.id); 
          } 
         } 
        ); 
       } 
       else { 
        error("Page not found in the accounts: " + targetPageName); 
       } 
      } 
     } 
    ); 

} 


function logout() { 
    FB.logout(); 
} 


$(document).ready(function() { 
    $("#logout").click(function() { 
     logout(); 
    }); 
    $("#post1").click(function() { 
     postApi(); 
    }); 
}); 


</script> 

<!-- 
    Below we include the Login Button social plugin. This button uses the JavaScript SDK to 
    present a graphical Login button that triggers the FB.login() function when clicked. --> 

<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button> 


<button id="logout">Logout</button> 
<button id="post1">post something</button> 
<div id="result"></div> 
</body> 
</html> 
+0

Tuyệt vời, rất vui khi biết bạn đã hiểu! – chrisboustead

9

Có hai điều bạn sẽ cần phải làm để đạt được điều này. Tôi không chắc chắn 100% nếu JS-SDK sẽ cho phép bạn thực hiện bước thứ hai, nhưng bạn có thể sử dụng SDK phía máy chủ nếu cần.

Ứng dụng sẽ cần yêu cầu quyền manage_pagespublish_stream. Sau đó thực hiện cuộc gọi đến /{user-id}/accounts để trả lại tất cả các trang mà người dùng được ủy quyền quản lý và page access tokens tương ứng của họ.

Lưu trữ trong một biến mã truy cập trang được trả về cho trang bạn muốn đăng. Đặt ảnh bạn muốn tải lên làm thông số source (phải là cục bộ cho máy chủ đang chạy mã) và yêu cầu POST yêu cầu /{page_id}/photos bằng mã thông báo truy cập trang (KHÔNG phải mã thông báo truy cập ứng dụng!).

Vì vậy, nó sẽ là dọc theo dòng:

FB.api('/{page_id}/photos', 'post', { source: 'path/to/image.jpg', access_token: {page_access_token}, message: 'hey heres a photo' }, function(response) { 
    if (!response || response.error) { 
    alert('Error occured'); 
    } else { 
    alert('Post ID: ' + response.id); 
    } 
}); 

tôi tin rằng các ứng dụng cũng cần phải xác định fileUpload như đúng khi khởi tạo.

Tôi rất sẵn lòng chia sẻ mã PHP của tôi để thực hiện việc này nếu nó hữu ích cho bạn.

+0

ok cảm ơn, tôi sẽ cố gắng đó. Và có, tôi cũng sử dụng php cũng như vậy một đoạn mã php sẽ hữu ích. – ling

Các vấn đề liên quan