Link to FB profile picture remotely or store it locally? - facebook

I've built my own blog with Facebook login. Currently, I'm using the following to show my FB user's profile picture at the top of the blog, to show they are signed in:
<img src="https://graph.facebook.com/[profileID]/picture">
Now I want to add profile pictures to each and every comment left on a blog article, and there are 20 comments per page. This means there are 21 requests going to FB for profile pics. Is this a good idea or should I be grabbing the profile picture from FB (programatically of course) and storing it locally?
I know how to grab the picture if I need to, I just want to know if what I'm doing is right or wrong? Very occasionally, I notice a little lag just loading one profile picture from FB, I'm concerned about loading 20 different ones.

Pros of using FB:
You don't waste your space
You don't waste your traffic
You don't waste your webserver connections/CPU/IO
You always have actual userpics on your page
FB has better CDN than you do
Each browser limits simultaneous HTTP requests per domain. So having different hosts (at least your one and FB one) could potentially improve page loading speed.
Cons of using FB:
If your app is an intranet one - FB would consume your users' internet traffic

OK this question is purely about which approach is better. I will not advise you to locally save profile pictures as user may change picture on their profile and you will end up with added responsibility of updating them.
More over once the picture is loaded from FB then for next 20 pictures browser will be using the cached image rather then making fresh requests to FB Server.
Hope it make sense
Thanks
Kaushik

Related

Best way to retrieve facebook profile images using MVC5 OWIN

I am using OWIN in mvc5 to authenticate users, but I want to show their profile pictures as well. I have searched on strackoverflow and found the following way to get it done.
This is for facebook & Google plus :
https://plus.google.com/s2/photos/profile/[USERID]?sz=100
http://graph.facebook.com/[USERID]/picture?type=square
Is this the best way to retrieve the images? Should we store images onto our server and load locally or we call these links every time someone logs in ? I need a proper approach, e.g. If we store them locally then they won't be updated if user changes their profile picture on facebook but if we load them every time from facebook then it takes some loading time to do a 302 redirect to actual image url.
If you're just trying to display the images on a website, I would just store the link your given from Facebook/Google when someone logs in to your site in a local database and use the URL as the image src on the website. Facebook and Google will be storing these images on fast CDNs, you might as well take advantage.
This will off load the image storage and the need to serve up images from your own site, reducing load and storage requirements.
Then every time a user logs into your site retrieve their profile pic urls again and store them to make sure they are up to date.

Facebook iFrame App Will Not Display

I have searched through many pages on SO and cannot seem to find the answer I am looking for.
I have a website (created via CMS SiteCore) that I want to display via an iFrame on a Facebook page. however, due to some SSL issue (I still do not fully understand the issue, but I know it is related to SSL), Facebook will not display it.
I thought a possible solution would be dwonlaoding all of the content (HTML, CSS, Images, etc) and just recreate it in an HTML editor app for Facebook. Wrongo. The app does not let me upload images, and when I link to the images on my server, it hits this SSL issue again and will not display images.
I just want this page to display when clicking on the app. Here is the page:
http://www.pplweb.com/home/social/facebook/pplcareers/v2/careers_fb_v2_hj.ashx
Any help would be greatly appreciated. Thank you.
Yep you require a SSL Certificate can get them as low as $17 in Geotrust if need be or a dearer one in hostgator or godaddy as well and they will install it for if have them as a host... once attached to domain should show the site or webpage in FB within Iframes... Also as the previous poster need to have domains the same one using the iframes in FB as that is where you want it right displayed...
Hope helps
Rick Ling

How to setup Facebook Timeline Cover Photo auto upload in website?

I am new to Facebook API and app development. I am trying to build a facebook timeline cover website where users can auto upload and publish the cover to a new album created in the website/app name. Then they would be redirected to another page on my website with instructions on how to setup the cover on their profile timeline. Most profile cover websites are using the same method such as myfbcovers.com, facebookprofilecovers.com, profilephotocovers.com, facebook.coversdaddy.com, fbcoverlover.com and newfbcovers.com to name a few. I have been searching the facebook developer pages and several tutorials over the net. Some tutorials I checked are:
http://thinkdiff.net/facebook/graph-api-iframe-base-facebook-application-development/
http://daipratt.co.uk/facebook-api-upload-photo/
http://developers.facebook.com/blog/post/498/
And also several youtube videos.
But there are several confusions I have about the app. Sorry for the questions if they are too basic as I am a complete newbie who is willing to learn. One of the main problems is that most of the tutorials are outdated as the facebook app creation page etc. Now is different and there is no callback url etc. or canvas etc. in options now which are used in the tutorials. In the tutorials, it is mentioned that for creating a website app or facebook app for page, I need a callback URL which I cannot see now. Secondly, if it is mentioned in those tutorials that I need SSL in my website for an app but none of the facebook cover websites listed above have SSL it seems. I also do not have SSL on my server. So, not sure if that is needed and if an app is needed at all on my local server. And all the apps are doing things different such as I can see these URLs on clicking on some of the clickable links for uploading the cover button. Here are a few examples:
http://facebookprofilecovers.com/wp-content/themes/fbcovers/fb/?i=http%3A%2F%2Ffacebookprofilecovers.com%2Fwp-content%2Fuploads%2FHappily-Married-Facebook-Timeline-Cover.png
http://freetimelinecovers.net/facebook/?cov_img=/images/sports-covers/manchester-united.jpg
Some have direct link to the facebook app page such as:
http://apps.facebook.com/profilephotocovers/index.php?id=35 broken link
And only one website seems to have the publish_stream etc. in the url itself
https://facebook.com/dialog/oauth?client_id=162046520556852&redirect_uri=http%3A%2F%2Ffacebook.coversdaddy.com%2Fi-m-not-a-monster-1242.html&state=e4abcdc1d9288be8233a7ac4aa243997&scope=user_photos%2Cpublish_stream
On checking through Live HTTP header, it seems all websites are following a similar pattern which is directly used in the URL in the last website. For example, here are a few steps of the other websites I saw while checking with Live HTTP header.
https://graph.facebook.com/oauth/authorize?client_id=112308188876405&redirect_uri=http://www.myfbcovers.com/oauth/callback&scope=publish_stream,user_photos,email
https://facebook.com/dialog/oauth?client_id=237897089598589&redirect_uri=http%3A%2F%2Ffacebookprofilecovers.com%2Fwp-content%2Fthemes%2Ffbcovers%2Ffb%2Findex.php&state=0ca1581f006bdd80bd5da78e95179f3a&scope=publish_stream
And so on.
I could also notice that almost all websites were taking auth for only publish_stream and nothing else. Only myfbcovers.com is an exception which also asks for user_photos and email. Rest are not asking for the same and so perhaps publish_stream is the only permission needed.
So, to create the app is there any tutorial. And do I need to host the app on my own server in a sub directory of the website or does it make direct call to facebook. The reason I am asking is because it seems Facebook apps if hosted on local server needs SSL mandatory whereas none of the above websites have SSL/https. And if I do not need to host the app on my own server then how can I make the photo upload link to facebook and then return back to the website for the rest of the instructions. I am using Wordpress on my website like most of the other sites are doing and so, that should not be a problem I suppose. Any help would be highly appreciated. I am willing to learn properly and some good tutorials for creating the photo album and then uploading the photo to the user's album etc. would be fine too if not with the full code. Any help would be highly appreciated.
NOTE: I have removed the HTTP and WWW part in many of the above URLs as I can only post a maximum of two links being a new user. Please add them if needed in those where they are not present.
Ok, I did not install all the applications above to see exactly what they did. I think your question is long... but pretty straight forward. This is what I understand your question to be :
You would like to create a cover photo generator that will allow users to customize their cover photo by uploading files, maybe doing some editing to them. Also maybe using templates of cool ideas and in the end being able to update their cool new cover photo directly into their profile.
This is not very complicated to do although to this date there is no real documentation (by facebook) about how to dynamically update the cover photo. However there are ways of creating photo albums and uploading photos to there.
If you are planning to make your application run with in facebook - that means use the apps.facebook.com/your_app_name, and have canvas or tab URLS, then you will have to purchase an SSL certificate.
Finnaly, in order to get as close to the functionality your want, you might have to make some sacrifices (becuase changing the cover photo is not possible yet with the Graph API).
To locate the cover photo album you'll have to manually scan through all the users albums names - and for that you'll need the user_photos permission.
Once you have created the photo you want, you could possibly let the user upload it (publish_stream permission needed for this) to a different album, and then give the user some detailed instructions using screen shots and direct them exactly how to change their cover photo.
I recommend you read through the Authentication documentation decide what permissions you need (such as user_photos for the users photos and publish_stream for uploading a new picture or creating an album.)
In addition, there are many many tutorials on the Official Facebook Documentation Pages and their Developers Blog- check them out before going onto other sites that have written their own tutorials. Facebook does update their API quite a bit - but they also (recently) have been pretty good on updating their documentation to mirror the changes to the API...
As serious developers using a 3rd party API (
Graph API ), it is solely our responsibility to keep up to date with changes and to write code and applications that comply with their platform policies.

Why are my links to my site disappearing from feeds after 2-3 hours?

I have a web site that gets quite a bit of traffic from Facebook. I've never had any problems sharing links to it on my Facebook page, but starting this afternoon, whenever I post a link to my web site from my facebook page, the post disappears from all users' feeds after 2-3 hours. This has happened 3 times now and I can't understand why. At first I thought it was my page itself, but it seems to be my domain because when I share from a different page (the same domain), it also disappears.
It worked fine this morning but not now. What is going on? Is this a glitch or is it some kind of system FB has in place now? This is really hurting traffic and clicks out from FB to my site.
Thank you.
Edit: looking back, it seems this may have started happening around Tuesday. Is there some kind of system in place now to limit the amount of clicks out you can get from a post? I can't see any other reason it's happening...
There are several possible causes:
Links that you use is a dynamic link which at times can be changed, use the static link. Example your link like this: http://www.domain.com/page.php?var=xxxxxxxx, where the parameter xxxxxxxx values ​​on the links can change at any time may be due to activity updates. This will cause facebook can not find a link that has been logged.
Bandwidth & server connection you less stable.
If I may suggest, avoid links / URLs dynamically & use the SEO Friendly link/URL like this page URL http://stackoverflow.com/questions/8529022/why-are-my-links-to-my-site-disappearing-from-feeds-after-2-3-hours

Facebook connect/oath for a newbie

I am currently starting to research a project that wants to use Facebook instead of a log in system.
the brief needs to be able to allow users to have their own customisation settings in a user panel, and also be able to connect with facebook friends within the context of the site.
Am I barking up the wrong tree?
Also, how much of the elements we pull from facebook can be styles our way. My designers is starting concepts before I get to that point of development and I don't want to waste their time designing layouts that can not be achieved.
Facebook allows you to pull a wealth of information. The user has to OK the permission for you app to access his/her Facebook profile, but you can get friends lists and their thumbnail pictures too!
Take a look here for a start:
http://developers.facebook.com/docs/authentication/
Its a bit of work, but worth it. You can pull straight data and store it on your server. According to Facebook, you can only keep the data for 24 hours or so (If I remember correctly) so you will need to "refresh" the data every day or so.