dejanstojanovic / facebook-album-browser Goto Github PK

Hello
If i put photos and videos on an album of my page, does your script read the videos ?
Thanks

Can i use the script to get the images from a group page? (public photo's and albums?).

Thank you for the great script. I have been searching high and low for something like this and this fits perfectly.

The script worked perfectly at first. It managed to display the albums on my facebook page. (http://babooth.com.sg/halloffame.html and www.fb.com/sg.babooth)
However, after i tried access it about an hour later it seemed not able to load. (see attached)

If i clicked on the logo in the page, i get and error from facebook and it pushes me to this page (https://www.facebook.com/undefined?_rdr=p)

I followed the instructions as per the page to get the album Id and access token. Is there something i'm doing wrong?

Hello,
I can't access my facebook albums. I changed natgeo to my fb name. The only thing that is displayed is my profil picture and my user name.
I read about the instruction to allow user_photos. However, I am not into app programming and have no idea what to do. I want to use your plug in from a html website, not from an app, so how am I supposed to grant rights to an app?

I increased the size of the fb-photo-thumb class in css to be 234x234 px. Now the thumbnail src image is still being scaled down to a smaller size, usually 130x130 px.

Even the demo file isn't working. It just display the loading animation forever. When clicking on the icon the link is "undefined"

can you add an option for displaying the comments @ a picture?
it would be nice if the popup can display the image and comments in 1 popup

Hi Dejan
the albumThumb are centered, but not photoThumb
Taking a look js code I see:

var marginWidth = 0;

                            if (prefWidth > 0) {
                                marginWidth = (prefWidth - albumImg.width) / 2;
                            }

var photoThumb = $("", { style: "margin-left:" + marginWidth + "px;display:none;", "data-id": $(result.data).get(a).id, class: "fb-photo-thumb", "data-src": albumImg.source, src: "" });

it doesn´t work: photoThumb appears alway from left to right.

Some help to center the thumb?
Thanks

There is a bug with the display of comments by the pictures.

On computer the dates are OK , on IPAD the dates @comments are 1 january 1970 or all null null null null null null null nul:null

I can't seem to get this working, even though my Page is public and I am using access tokens correctly.
The page remains blank, so I'm guessing that maybe the API call is failing ?
Any help would be much appreciated,
Thanks.

First of all, great job and thanks for sharing it.

About the 'user_photos permission', it is required only when creating a new app to get a proper access token, right? It seems to be a thing with the API version 2.4. Why? When using an access token of an old app (API version 2.0) that doesn't have the 'user_photos permission', the plugin works beautifully.

I would like to create a new app for the plugin, a proper one, but Facebook requirements for this item approval it's a herculean task =P

Thanks in advance for any comment or tip. Btw, sorry about my english ;)

Does anyone know why when enter into album there is only first 25 images loaded?

Hello,

I'm using the following code to select a pciture from an album:

$(document).ready(function () {
                            $(".fb-album-container").FacebookAlbumBrowser({
                                account: "me",
                                accessToken:$localStorage.accessTokenFacebook,
                                showImageText: false,
                                likeButton:false,
                                shareButton: false,
                                //photosCheckbox:false,
                                showAccountInfo: false,
                                lightbox:true,
                                showComments: false,
                                photosPageSize: 0,
                                thumbnailSize: 100,
                                photoSelected: function(photo) {
                alert('here'+JSON.stringify(photo)+'--'+$scope.profilePhotos.length)
                                    var imgurl = photo.url;
                                    $scope.profilePhotos[imgindx].photo = imgurl;
                                    $localStorage.profilePhotos = $scope.profilePhotos;

                                    toDataUrl(imgurl,1000,1000, function(base64Img){
                                        alert('imagetoparse')

                                        var name = "photo.jpg";
                                        var parseFile = new Parse.File(name, {base64:base64Img});
                                        var Photo = new Parse.Object("Photos");
                                        Photo.set("user", $localStorage.username);
                                        Photo.set("type", $localStorage.profilePhotos[imgindx].type);
                                        Photo.set("photos", parseFile);
                                        $localStorage.imgcount = ($localStorage.imgcount + 1)
                                        alert($localStorage.profilePhotos[imgindx].type+'--'+$localStorage.imgcount)
                                        Photo.save(
                                            {
                                            success: function(objUser) {              
                                                alert("OK");

                                              },
                                              error: function(error) {
                                                alert("error"+error);
                                              }

                                            }
                                        ).then(function() {
                                            alert('statego')
                                            $state.go("profile_edit")
                                            return
                                        })
                                    })  
                                }
                            })
                        })

the problem is that the selected picture keeps staying on my screen instead of closing down (both the album browser and the picture and return on my screen. Any idea? Thanks in advance.

@sanjinc images into lightbox is not showing itself in full resolution. Can you help me find the reason?

How to change link to photo? Cause it's not in full resolution. I opened photo via facebook account and link was [https://scontent.xx.fbcdn.net/hphotos-xfp1/t31.0-8/11894415_142201052791249_2462838957330698595_o.jpg] but plugin opens photo like that [https://fbcdn-photos-d-a.akamaihd.net/hphotos-ak-xfp1/t31.0-0/p480x480/11894415_142201052791249_2462838957330698595_o.jpg]. It is not the same resolution. Plugin thumb image link is [https://fbcdn-photos-d-a.akamaihd.net/hphotos-ak-xfl1/v/t1.0-0/p130x130/11959959_142201052791249_2462838957330698595_n.jpg?oh=4b3d65c20143300a78679da6e3ad9903&oe=56694DA0&gda=1450735549_4862cc3341cbcfd97d6cbee0f8c7f86c]. It is so tiny (130x130)... How can I change all plugin links (image-thumb, full image, album cover image and etc) to one link which will always direct to full resolution image? Like that [https://scontent.xx.fbcdn.net/hphotos-xfp1/t31.0-8/11894415_142201052791249_2462838957330698595_o.jpg]

I think you should add an option to set an images folder path.
In my case, I have an images folder for all the images in my projects, so I added to the defaults object a new property:

var defaults = {
            account: "",
            ...
            checkedPhotos: [],
            imagesPath: "src/"
        }

And then on lines : 178, 508, 509
I changed the src attr to:

src: settings.imagesPath + "whatever-image-needed.png"

BTW - your plugin is awesome!

Hi,
I have run into an issue, where I'm trying to load 3 different albums in 3 different areas for a single page website. The only thing is that it makes the initial load time very slow.

The amount of images is up to a 100 or so.

I was wondering if there would be a way to perhaps lazy-load the images, thus slowing down the initial page load time?
I'm sure you might be thinking well why do you need a 100 images but the reason is that I'm making a site for tattoo artists and they have quite a lot of images to show.

If anyone has a solution or any ideas. Even if someone could point me in the right direction, then perhaps I could find a solution myself. But having searched for quite a while I haven't come up with anything.

Cheers and best regards.

Like button for image does not show the proper number of likes. The issue is with the image URL which is returned by OpenGraph. Number of likes for image URL is always 0.
Tried with even URL of the follwoing format http://facebook.com/{account}/photos/{photoid} but count is still 0.

Hi, guys! First of all, great plugin. Nice job... I have encountered a minor setback and am going out of my mind trying to figure it out.

The thing is i installed the plugin on this beta page I'm making http://fiestadelaflor.com.ar/flor/

Now if i put any other fan page in the "account" field, the plugin works out fine. But if I put the one I need to put, (that is this one https://www.facebook.com/Fiesta.delaflor/) I get an undefined error.

I followed the access token instructions and don't really know why this isn't working. Any thoughts?

Thanx in advanced!

Hi, if you try to click on a photo if works... so light box opens. Then if you reclick on the same one it doesn't

Hi again :)
maybe the possibility to add a "like button" on each image opened (with on/off option)

Hello :)
i don't have test but if you have lot of albums is it possible to add a pagination (or something similare) to only show a number of albums each time (with a parameter)

When imagepopup shows the like button is out of the box.

The demo is not working .

I recently added this plugin to my website i2robotics.org and I look at it on my phone and discovered 2 issues. The first one being that when opening a gallery the first time a gallery is selected it slides up weirdly and then requires you to click again to open it, the second issue is that the images become weirdly sized when being accessed from a mobile device. Please advise me on how to continue. Thank you.

Hello!
maybe the possibility to add a "share menu" on each image opened (facebook, whatsapp, twitter, mail,..)? using the photochecked function perhaps?
help please!

Hello
I don't understand what the photosCheckbox do if it enabled
Thanks :)

Hello
I search a possibility to add on my website some albums , i have found your script but i don't uderstand how to use and configure, i have change the name of "account" but i don't see nothing
Thanks for you help :)
Edit : i think i have found, have to create an unique username of the fb page :)
Good job this is the first perfect script i found \o/, thanks

It's not working for me.
http://www.rtempo.com.br/Facebook-Album-Browser-master/samples/sample-all-albums.html

I have created the app and made it public.
Inserted the token as mentioned.
All I see is a loading icon.

Hello,
It might be my own misunderstanding or something else but let's say I am an admin of a tattoo page and I would want to get images from that page to a website, in that case do I need to get my app approved for it to work correctly or no?
Currently I have followed the instructions and got far enough to get the name and profile picture of that page to show but it wont load the images, the loader icon just keeps going and going. I don't see any errors as well.
Seeing as it does show the name and profile picture of the page, I am quessing that everything should be fine with my configuration and thus must be something else that keeps the images from loading, as in the app needs to be approved, right?
Or perhaps there is something wrong with my app permissions? I am not sure. :(

Apologies for the long post and my own misunderstanding. I can also post a link to the site if you think it is needed.
Thanks in advance.

Hello again,

I am trying to select a couple of albums only to show in a gallery is there an easy way to do this?

Thank you

Hello Dejan!
I still tying to share the images from lightbox....
I try to do it using addthis, but i can´t.
They tell me that I´ve to call the addthis.init(); and addthis.layers.refresh(); functions in the same function that loads the lightbox... No idea of how to do it, and not much help in google

Those are the codes they give me to put into the body of the html.

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50360b776f77c6a6" async="async"></script>

<div id ="botones" class="addthis_sharing_toolbox"></div>

Thank you

Looks like FB changed their privacy settings or something, this plugin doesnt seem to work anymore. I have checked all the demos online and offline as well. Albums are not visible, only accountinfo shows up. Is there a way around it?

Is it posible to add a fb comment box (leave a comment) to the picture popup?

Hi! When watching photo into lightbox it seems something wrong with share buttons because it's duplicates constantly, when I click NEXT or PREV arrows, it's always increases (+1) rows of share buttons. What should it be?

How do I change the size of the thumbnail image being requested from Facebook?

@sanjinc lightbox is not centred vertically. Can you please help with this when you find time?
Thanks

Hi

Is it possible to link to a specific facebook album?
Such as album.html#album=abc

Is something like this possible?

Thank you for your code, it's very useful but I have some question about it.

How to show album description? I create new facebook album and your code is work but it's not show album description, it show only album title and pictures. Please help me about this issue.

Thank you.

My issue is that I have a single page website but what I wanted to do is display 3 different albums in 3 different sections from the same page on the website.
When I try that, instead of getting 3 different albums in 3 different sections, they all merge only in 1 section.
You can check this at http://sander2.alimit.com/assets/index.html
I apologize the site is in Estonian. You have to scroll down to "Meeskond" and in the right side click on "Näita tehtud tööd". So there are 3 buttons like that but only the middle one works and it takes all the albums as one.
I'd like to mention that my coding isn't the best and I'm still a newbie when it comes to all this so I'm sure it's something obvious I did wrong. Certainly willing to learn more and understand how everything works.

Please, feel free to add URL where you are using this plugin.
It would mean a lot to me to know where it is used, to see how it works and maybe give me an idea what can be improved in order to better fit in to various websites.

Thank you all in advance

I want to make order picture newest first. Last post showing first. How can I do that?

Need to add one more condition before adding checkboxes to photo thumbs, otherwise code will throw an "undefined object" exception.

Hello :)
i have seen you have update the position of the arrows left and right, i think (it's my opinion) to have the arrows on the left/right position:0 it's not really easy to use, maybe with a little screen but not on 1920 with full screen of chrome, and you can't change image if you click on the image (working with old release)

Hello,

When i have include bootstrap css thumbnails are not aligning correctly. If you can check the below link, you can see what i meant.

http://www.grknstudios.com/scweb/galeri.php
Thanks

Can this application use the "User Token" rather than "App Token" as I am trying to test to see if I can get this application to work with a personal photo album.

I am getting the User Token via the : https://developers.facebook.com/tools/explorer/

Which access token should I use for getting a specific user albums?
I am trying to get the albums of a specific user (the user who connect to my app), but for some reason I cant.
I tried using the user access token returned from the getLoginStatus function:

FB.getLoginStatus(function (response) {
    accessToken = response.authResponse.accessToken);
});

and my app's access token which I retrieved like you said from:
https://graph.facebook.com/oauth/access_token?grant_type=client_credentials&client_id=APP_ID&client_secret=APP_SECRET

both doesn't work...
Am I missing something??
Thanx :)

Hi,
Which FB API level you related on while building the plugin?
I think there is a problem with the new API (2.4), which doe's not return the data objects you rely on...
I'll explain:
I have a problem with fetching the albums/photos with your plugin, so I did some testing using the Graph API Explorer.
When using the 2.4V API, a GET request to "albums" return an object with the following structure:

{
  "data": [
    {
      "name": "Timeline Photos",
      "created_time": "2011-06-13T23:31:19+0000",
      "id": "id_number"
    },
    {
      "name": "Profile Pictures",
      "created_time": "2010-10-07T15:56:34+0000",
      "id": "id_number"
    },
    ......
}

Which doesn't fit your code... and fails to retrieve the albums/photos...

When using the 2.2V API, (which you are using) a GET request to "albums" return an object with the following structure:

{
"data": [
    {
      "id": "10150205173893951",
      "from": {
        "name": "National Geographic",
        "category": "Media/News/Publishing",
        "id": "23497828950"
      },
      "name": "Timeline Photos",
      "link": "https://www.facebook.com/album.php?fbid=10150205173893951&id=23497828950&aid=320000",
      "cover_photo": "10151137816808951",
      "count": 508,
      "type": "wall",
      "created_time": "2011-06-13T23:31:19+0000",
      "updated_time": "2015-08-07T04:20:20+0000",
      "can_upload": false
    },
    ...
]
}

Is there something I am missing? or am I right?

hi any idea why the like and share buttons aren't showing?
i have them set as
likeButton: true,
shareButton: true,

i thought it was just on my page but your codepen doesn't seem to show it either. any way to fix this?

can we get direct album photo from this script no need to album list.