Integrate Facebook Photos into WordPress' Media Manager

FacebookMedia

// Proof of Concept only.
// Incomplete Code

function facebook_media_upload_tab_name( $tabs ) {
    $newtab = array( 'tab_slug' => 'Insert from Facebook' );
    return array_merge( $tabs, $newtab );
}

add_filter( 'media_upload_tabs', 'facebook_media_upload_tab_name' );

function facebook_media_upload_tab_content() { ?>
<script>
    var NERD = NERD || {};

      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'APP_ID',
          xfbml      : true,
          version    : 'v2.3'
        });
      };

      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/en_US/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
       
       function FacebookStuff() {
           FB.getLoginStatus(function(response) {
              if (response.status === 'connected') {
                NERD.FacebookAlbumChooser.init(response);
                console.log('Logged in.');
              }
              else {
                FB.login();
              }
            });
            FB.login(function(){}, {scope: 'email, user_photos'});
            /* ---------------------------------------------------------------------
             Facebook Photo Chooser
             Author: Thomas McMahon http://www.twistermc.com
             Loading a users Facebook albums and photos.
             ------------------------------------------------------------------------ */

            NERD.FacebookAlbumChooser = {
                init: function(response) {
                var fbaccesstoken = response.authResponse.accessToken;
                    FB.api(
                        "/me/albums",
                        function (response) {
                          if (response && !response.error) {
                            for (albumsCount=0; albumsCount < response.data.length; albumsCount++) {
                                if (response.data[albumsCount].cover_photo==undefined) {
                                    var $albumCoverPhoto = 'images/gallery-placeholder.png'; // default image if no cover photo set
                                } else {
                                    var $albumCoverPhoto = 'https://graph.facebook.com/'+response.data[albumsCount].cover_photo+'/picture?type=normal&access_token='+fbaccesstoken+'';
                                }
                            
                                var photosDiv = document.getElementById('photos');
                                photosDiv.innerHTML = photosDiv.innerHTML + '<div class="grid size1of3 facebook-grid"><a href="#" onClick="NERD.FacebookLoadAlbumPhotos.init('+response.data[albumsCount].id+')" class="album-photo album-link" title="'+response.data[albumsCount].name+'"><div class="frame-overflow"><img src="'+$albumCoverPhoto+'" class="facebook-img" height="100" width="100" /></div></a><div class="album-title">'+response.data[albumsCount].name+'</div></div>';

                            }
                          }
                        }
                    );

                },

            }; // NERD.FacebookAlbumChooser
            
            NERD.FacebookLoadAlbumPhotos = {
                init: function(albumID) {

                FB.api("/" + albumID + "/photos", function(response) {
                    var photosDiv = document.getElementById('photos');
                    photosDiv.innerHTML = "";
                    
                    console.log(response);

                    for (photosCount=0; photosCount < response.data.length; photosCount++) {
                        photosDiv.innerHTML = photosDiv.innerHTML + '<div class="grid size1of3 facebook-grid"><a href="'+response.data[photosCount].images[0].source+'" class="facebook-image album-link"><div class="frame-overflow"><img src="'+response.data[photosCount].picture+'" class="facebook-img" /></div></a></div>';

                    }
                    if ( response.paging && typeof response.paging.next != 'undefined' ) {
                        var nextURL = response.paging.next.replace("https://graph.facebook.com/", "");
                        self.loadAlbumPhotos(nextURL);
                    }
                });
            }
        } // NERD.FacebookLoadAlbumPhotos
        }

    </script>
    <a href="#" onClick="FacebookStuff();">Connect to Facebook</a>
    <div class="facebook-photos">
    <div class="facebook-headline border-tlr bd-grey">Choose From Photos</div>
    <div class="photo-contain border-rbl">
        <div id="title-contain">

        </div>
        <div id="photos" class="albums">

        </div>
        <div class="opts-bar border-top bd-lt-grey">
            <a href="#" title="Cancel" class="facebook-btn border-full">Cancel</a>
        </div>
    </div>
</div>

<div class="overlay"></div>
<?php }
add_action( 'media_upload_tab_slug', 'facebook_media_upload_tab_content' );