Hi I am making a facebook photo album GUI for my website.
Now I already got it woriking in the way that I have my list of albums and can select one and show the photos of it.
But now I have the problem that I cant import the title of the album.
The script I use:
<?php
//Get Albumdata
$naamDataRuw = file_get_contents('https://graph.facebook.com/'.$_GET['album_id']);
//Decode data
$naamData = json_decode($naamDataRuw);
//Useable data
foreach ($naamData->data as $data)
{
//Show description or album name as title DOES NOT WORK
echo '<h2>'.$data->description.'</h2>';
}
?>
Any ideas on how to handle this?
Thanks in advance!
Related
im quite new to angular.js and firebase, so im starting to edit some code from an open source script to expens my knowledge ... i used a chat script with a facebook login.
i decided to go change the facebook login to a twitter login. (firebase lets you use logins pretty easy)
function onLoginButtonClicked() {
auth.login("Twitter");
}
the code also automaticly gets the user image from facebook with
<div id="comments">
<script id="template" type="text/template">
<img class="pic" src="https://graph.facebook.com/{{userid}}/picture">
<span><b>{{name}}</b><br/>{{body}}</span>
</script>
But now i changed it to an twitter app i wonder how i can get the twitter user icons instead?
--edit--
whats wrong with the question?
If you check out the user info returned from the login process, you'll see that it contains a an object called thirdPartyUserData. It contains all of the information provided by twitter during login; this is their purview and could change when their API or policies change in the future, but has (for as long as I've been familiar with the Twitter API) contained URLs for user's avatars:
var ref = new Firebase(URL);
var auth = new FirebaseSimpleLogin(ref, function(err, user) {
if( err ) console.error(err);
console.log('avatar is ', user && user.thirdPartyData.profile_image_url);
});
$('button').click(function() {
console.log('clicked it');
auth.login('twitter');
});
(Side note: the login provider is twitter vs Twitter)
There is another way to get the Twitter avatar which works better since getting it from the login user object is only for the logged in user and so would require that the URLs be saved which would then be a problem if the user ever changed their twitter avatar since the URL would then be missing. After some searching around I found that the twitter avatar (or facebook) avatar can be reached from the firebase user id as follows:
var info = userId.split(':');
var provider = info[0];
var id = info[1];
if ( provider === 'facebook' ) {
return 'https://graph.facebook.com/' + id + '/picture?type=square';
} else if ( provider === 'twitter' ) {
return 'http://twitter.com/api/users/profile_image/' + id + '?size=normal';
}
I not able to get user friends photos not profile picture. I can easily get profile picture
but not able to get user friend photos
I wrote this code but it is not working for me
FB.api('me/friends?fields=albums', function(response) {
for (var i=0; i<response.data.length; i++) {
var album = response.data[i];
FB.api('/'+album.id+'/photos', function(photos){
if (photos && photos.data && photos.data.length){
for (var j=0; j<photos.data.length; j++){
var photo = photos.data[j];
// photo.picture contain the link to picture
var image = document.createElement('img');
image.src = photo.picture;
document.body.appendChild(image);
}
}
});
}
});
Given all the required permission friends_photos,publish_stream
But still no luck .
Please help
Your graph url is off. To get a specific users photo album list you need:
{user_id}/albums?fields={list_of_album_fields}
In conjunction with
user_photos and/or friends_photos permissions
The Facebook graph explorer is an excellent tool for getting your graph url's right before coding. Try it out to verify this solution.
If you're looking to get all albums for all friends in a single pass you'll need to formulate this as either FQL or a batch request.
I've been playing around with the FB SDK and some examples that exist for displaying FB photo albums, but the examples are much more complex than what I want to do. All I want to do is set the album id for a single album and pull in the contents. That's it, I can style everything after that, I just need to be able to view the contents of one album and pull in the caption for each photo.
I'm trying to create a WordPress album that does this; I can easily create the base of the widget, but I'm lost when it comes to API's.
Are there any examples out there that I've overlooked?
Does anyone know how to accomplish this?
hopefully this gives you a hint ;)
<?
if (empty($_GET['album'])) {
//get all albums of page
$graph_url = "https://graph.facebook.com/PressPlayPrague/albums? fields=id,link,name,cover_photo&limit=500";
$albums = json_decode(file_get_contents($graph_url));
$counted = sizeof ($albums->data); // get the number of albums for later use
//output all albums of given page
for($c=0; $c<$counted; $c++){
echo ("<div class='wrapper' <a href='?album=".$albums->data[$c]->id."'><div class='stack'><div style='width:180px; height:120px; display:inline-block; background-image:url(https://graph.facebook.com/".$albums->data[$c]->id."/picture?width=300&height=200); background-repeat:no-repeat;'> </div></div><div class='caption'>".$albums->data[$c]->name."</div></a></div>");
};
}else{
//get the album pictures replace the $_GET[album] with specific ID and remove the if clause to get only one album
$pic_url = "https://graph.facebook.com/".$_GET[album]."/photos?fields=picture&limit=500";
$pictures = json_decode(file_get_contents($pic_url));
$countpic= sizeof ($pictures->data); // get the number of pics for later use
for($p=0; $p<$countpic; $p++){
echo ("<img style='width:250px; max-height:167px;' src='https://graph.facebook.com/".$pictures->data[$p]->id."/picture' alt='".$pictures->data[$p]->id."'>");
};
}
?>
How can I display the right image, title and link for a Facebook Like button in a list of products?
I do implement sucessfully the like button but it is when you navigate to the product details, you see only one product.
I ask how can i do it in the list of products, for now the image displayed on my facebook page is a generic image from the site and not the specific image of the product, the link is right.
Must the tag <meta property="og:image" content="some value"/> only be inside the head tag? I cannot use it inside the body tag?
The meta tags for the news story don't need to be on the page that is displaying the Like button. The news story will be generated from the meta tags on the page listed in the URL parameter of the Like button.
Here is an example. -
This Repeater will dynamically generate a list of products from a database with customized Like buttons:
<asp:Repeater ID="_RPT_Product" runat="server">
<HeaderTemplate><h3>Products</h3><ul class="bulleted-list"></HeaderTemplate>
<ItemTemplate><li><%# Utilities.ScrubText(((Product)Container.DataItem).ProductName) %>
</li>
<div style="padding-top:10px;">
<iframe
src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.yourdomainname.com/Product.aspx%3FID%3D<%#((Product)Container.DataItem).ProductID %>%26x%3D1&send=false&layout=button_count&width=88&show_faces=false&action=like&colorscheme=light&font&height=23"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:88px; height:23px;"
allowTransparency="true">
</iframe></div><br />
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>
This would be the code-behind on a separate Product page that dynamically renders meta tags from a product database:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// Get the product meta content from the ID URL parameter.
string productName = "";
string productImageURL = "";
string productDescription = "";
int productID = 0;
if (Request.QueryString["ID"] != null)
{
productID = Convert.ToInt32(Request.QueryString["ID"]);
}
if (Request.QueryString["ID"] != null)
{
using (ProductDatabaseDataContext db = new ProductDatabaseDataContext(Config.ConnectionStrings.ProductDatabase))
{
Product select = new Product();
select = db.Products.FirstOrDefault(p =>
p.ProductID == Convert.ToInt32(Request.QueryString["ID"]));
productName = select.ProductName;
productImageURL = select.ProductImageURL;
productDescription = select.ProductDescription;
}
}
// Dynamically generate Open Graph Meta Tags for each Product:
HtmlMeta _metaTitle = new HtmlMeta();
_metaTitle.Name = "og:title";
_metaTitle.Content = "Product: " + productName;
this.Header.Controls.Add(_metaTitle);
HtmlMeta _metaURL = new HtmlMeta();
_metaURL.Name = "og:url";
_metaURL.Content = "http://www.yourdomainname.com/Product.aspx?ID=" + Convert.ToString(productID);
this.Header.Controls.Add(_metaURL);
HtmlMeta _metaImage = new HtmlMeta();
_metaImage.Name = "og:image";
_metaImage.Content = Convert.ToString(productImageURL);
this.Header.Controls.Add(_metaImage);
HtmlMeta _metaDescription = new HtmlMeta();
_metaDescription.Name = "og:description";
_metaDescription.Content = Convert.ToString(productDescription);
this.Header.Controls.Add(_metaDescription);
}
}
Note that every Like button must have a unique URL parameter, because only one set of meta content attributes can be tied to a single URL. This can be accomplished by having a unique ID parameter on your separate Product.aspx page. The "og:url" meta tag for each of your products can be the same if you just want all of the product news stories to link back to one master list page.
The Like button likes a specific URL and if it's a product the user is liking, that link really should bring users back to a description of that product and not to a completely different set of content.
What you display on that propduct page itself isn't really important (it could be the full product list if you really wanted) provided that that URL returns the same meta tags to the Facebook crawler each time
What you're trying to do could be achieved by setting up a script which serves the meta tags for each product based on URL parameters (making sure to keep the og:url tags pointing to the correct URL to generate the same tags again.
Serve those tags to the Facebook crawler and redirect other browsers wherever you want.
Is there anyway to get the full-size profile picture using any facebook api?
http://graph.facebook.com/{ID}/picture?type=large is way to small.
Thanks :)
Set either the width or height to some arbitrarily large number:
https://graph.facebook.com/username_or_id/picture?width=9999
If the width and height are the same number, the photo is cropped to a square.
I think I use the simplest method to get the full profile picture. You can get full profile picture or you can set the profile picture dimension yourself:
$facebook->api(me?fields=picture.width(800).height(800))
You can set width and height as per your need. Though Facebook doesn't return the exact size asked for, It returns the closest dimension picture available with them.
found a way:
$albums = $facebook->api('/' . $user_id . '/albums');
foreach($albums['data'] as $album){
if ($album['name'] == "Profile Pictures"){
$photos = $facebook->api('/' . $album['id'] . '/photos');
$profile_pic = $photos['data'][0]['source'];
break;
}
}
As noted above, it appears that the cover photo of the profile album is a hi-res profile picture. I would check for the album type of "profile" rather than the name though, as the name may not be consistent across different languages, but the type should be.
To reduce the number of requests / parsing, you can use this fql:
"select cover_object_id from album where type='profile' and owner = user_id"
And then you can construct the image url with:
"https://graph.facebook.com/" + cover_object_id + "/picture&type=normal&access_token=" + access_token
Looks like there is no "large" type for this image, but the "normal" one is still quite large.
As noted above, this photo may be less accessible than the public profile picture. You need the user_photos or friend_photos permission to access it.
With Javascript you can get full size profile images like this
pass your accessToken to the getface() function from your FB.init call
function getface(accessToken){
FB.api('/me/friends', function (response) {
for (id in response.data) {
var homie=response.data[id].id
FB.api(homie+'/albums?access_token='+accessToken, function (aresponse) {
for (album in aresponse.data) {
if (aresponse.data[album].name == "Profile Pictures") {
FB.api(aresponse.data[album].id + "/photos", function(aresponse) {
console.log(aresponse.data[0].images[0].source);
});
}
}
});
}
});
}
For Angular:
getUserPicture(userId) {
FB.api('/' + userId, {fields: 'picture.width(800).height(800)'}, function(response) {
console.log('getUserPicture',response);
});
}
Profile pictures are scaled down to 125x125 on the facebook sever when they're uploaded, so as far as I know you can't get pictures bigger than that. How big is the picture you're getting?