2013-11-25 16 views
8

enter image description herefacebook programmazione pubblicare su una pagina facebook con una grande foto

Ho creato un falso pagina di Facebook (page intrattenimento). A sinistra dell'immagine allegata, ho creato un primo post manualmente (quello sotto con la foto grande ) e uno a livello di programmazione (quello in alto con la foto piccola).

Il codice che ho usato per la piccola foto assomiglia a questo:

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>'; 
      } 
     } 
    ); 

ma non sono felice con lui: l'applicazione su cui sto lavorando fare un elenco di animali smarriti, così sarebbe molto più grande con le foto di grandi dimensioni.

Non ho visto alcun esempio di come farlo sulle pagine degli sviluppatori di Facebook. Credo sia possibile, ma non l'ho ancora scoperto. Avete già affrontato questo problema prima?

risposta

7

Infine, l'ho fatto! Sto postando la soluzione, grazie a cdbconcepts per avermi indicato nella giusta direzione. Dopo aver letto di nuovo il documento:

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

Si dice che: "È inoltre possibile pubblicare una foto, fornendo un parametro URL con l'URL della foto." L'url non deve essere sullo stesso server, come mostrato nell'esempio sotto, e funziona con js-sdk.

ecco il codice finale che funziona per me:

<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

Fantastico, felice di averti sentito! – chrisboustead

9

Ci sono due cose che devi fare per raggiungere questo obiettivo. Non sono sicuro al 100% se JS-SDK ti consentirà di eseguire il secondo passaggio, ma se necessario è possibile utilizzare un SDK server side.

L'applicazione dovrà richiedere l'autorizzazione manage_pages e publish_stream. Quindi effettuare una chiamata a /{user-id}/accounts che restituirà tutte le pagine gestite dall'utente autorizzato e le rispettive page access tokens.

Memorizza in una variabile il token di accesso alla pagina restituito per la pagina che desideri pubblicare. Imposta la foto che desideri caricare come parametro source (deve essere locale al server che esegue il codice) e creare una richiesta POST su /{page_id}/photos utilizzando il token di accesso alla pagina (NON il token di accesso dell'applicazione!).

Quindi sarebbe lungo le linee di:

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

Credo che l'applicazione deve anche specificare fileUpload come vero durante l'inizializzazione.

Sarei felice di condividere il mio codice PHP per farlo se fosse utile per voi.

+0

ok grazie, cercherò questo. E sì, uso anche php, quindi un frammento di php sarebbe utile. – ling

Problemi correlati