Skip to content

Instantly share code, notes, and snippets.

@TwisterMc
Last active August 29, 2015 14:18
Show Gist options
  • Save TwisterMc/952a51d0815dfc60d754 to your computer and use it in GitHub Desktop.
Save TwisterMc/952a51d0815dfc60d754 to your computer and use it in GitHub Desktop.
Integrate Facebook Photos into WordPress' Media Manager
// 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' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment