Forum | Appery.io

Hello

Facebook API: How can I get a user's Facebook profile picture that is in a shape of circular ?

Please help me

Hi Halimz,

We need to clarify this point with our developers.

Hi Halimz.

You can do it with background image and some other styles for the container.

Please use following solution:

1 Add HTML component on the page.

2 Set dimensions for this component as "100px" and "100px" http://prntscr.com/3vipe5/direct

3 Create CSS Asset and fill it with following code: http://prntscr.com/3virea/direct

pre

.yourHtmlComponent{
/* here you should set your goal url */
background-image: url(../../../../files/views/assets/image/phone.png);

 background-size: cover; 

 /* this value should be half of the dimension(200/2 = 100) */ 
 border-radius: 100px; 

}

/pre

4 When your image is dynamic you can set this background property with following code:

pre

//Note you should replace "yourHTMLComponentName" with your one.
Apperyio("yourHTMLComponentName").css("background-image", "http://www.aneco.ru/images/stories/bengalskiitigr08032011.jpg");

/pre

Regards.

Thank you Yurii Orishchuk
One more thing how can i mapping it?

Halimz,

If you use this tutorial:
http://devcenter.appery.io/documentat...
You should do the following:
add image component on the page Facebook_Me: http://www.screencast.com/t/1Zgju7d6Y
add mapping of parameter id in asset for this image: http://www.screencast.com/t/ieyRPOJ01D4R
and to add such JS: http://www.screencast.com/t/zsc8ZYCn

codereturn "https://graph.facebook.com/" +value+ "/picture&quot/code

Hi Evgene

I am sorry about that, but where I add this JS script?

I puted it in sucess event from Facebook_MeService, BUT the image can ́t appear.

See the print.

Thank you

Hello Rafael,

You should add this code in the mapping, not on success event.

Evgene Thank you for your reply and I am sorry, I am new in App yo, I can't understand where I should put the code....If you can help me.
Thank you

Eugene Thank you for your reply now I got It!! Thank you so much

Yurii, I am sorry about that but I have a doubt.

I did a simple login page and the response returns the URL of picture user profile.

I save the json return with the URL of the image profile in a storage location.

How can I assign the value of the storage location (which is a URL for the image) to the example you wrote above HTML component?

I tried to use the example but the image does not appear, only appears when I put straight in css (background-image: url (http: //imagem.jpg);)

Thank you