How to make soundcloud oembed endpoint return an iframe with a height of 300? - soundcloud

I am using souncloud's oembed endpoint, and the default height is 400, which is too big.
I need to adjust it, i have tried this:
https://soundcloud.com/oembed?format=json&height=300&url=https://soundcloud.com/giorgiomartini
But that only changes the height of the artwork, notice height at the end of the html key (the iframe), on the json i get back:
{
"version": 1,
"type": "rich",
"provider_name": "SoundCloud",
"provider_url": "http://soundcloud.com",
"height": 450,
"width": "100%",
"title": "Giorgio Martini",
"description": null,
"thumbnail_url": "http://i1.sndcdn.com/avatars-000336450748-qnkjy0-t500x500.jpg",
"html": "<iframe width=\"100%\" height=\"450\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Fusers%2F1367858&show_artwork=true&height=300\"></iframe>",
"author_name": "Giorgio Martini",
"author_url": "https://soundcloud.com/giorgiomartini"
}
I do need however to change the height of the iframe itself... is there a waywith oembeed to do this?
Or do i have to do some kind of string manipulation on the response i get back to change the height from 400 to say 300?
Thanks

According to the documentation, there is an URL parameter called maxheight - simply set this to 300:
https://soundcloud.com/oembed?format=json&maxheight=300&url=https://soundcloud.com/giorgiomartini

I would recommend using CSS instead to make the video iframe responsive, so it always fills up its parent container no matter the size of the window, on any device. See Fluid Width Video and the VideoWrapper class.

Related

How to set the absolute width and height for outlook addin dialog?

I want to set the fix value for dialog width and height while using officeUI.displayDialogAsync,How can I achieve that?
officeUI.displayDialogAsync(link, { height: 768, width: 584, promptBeforeOpen: false, displayInIframe: true }, function (asyncResult) {
var dialogObj = asyncResult.value;
dialogObj.addEventHandler(Office.EventType.DialogEventReceived, function (dialogEvent) {
event.completed();
});
});
The width and height here is percentage value for current browser per documentation. Can I have a fix value height and width?
Currently this functionality is not part of the product. We track Outlook add-in feature requests on our user-voice page. Please vote for this feature here. Feature requests on user-voice are considered when we go through our planning process.

facebook messaging templates - text and background color

is there any option to set color of background or text in list messaging template. I have this element in payload:
{
"title":"priority #2: and this is clickable title",
"subtitle":"And here’s some text, makes no sense, but I need it here",
"default_action": {
"type": "web_url",
"url": "http://google.com",
"messenger_extensions": false,
"webview_height_ratio": "tall"
}
}
but unfortunely I wasn't able to find in docs the info how to set these colors. Maybe somebody have already done this, and could tell me what I have to add.
Nope, background and text color is not supported.

How to get a larger scraped feed picture?

I read the documentation, and the scraped feed picture is stored inside the picture tag.
Unfortunately, it returns a small version of the picture. I need a larger one.
How can I do it this Graph API? Seems that API/workarounds have been changed.
No way anymore? Can't find anything in the Facebook documentation.
This should work:
/post-id?fields=picture.type(large)
/post-id?fields=picture.width(100).height(100)
Source: https://developers.facebook.com/docs/graph-api/using-graph-api/v2.2?locale=en_US#fieldexpansion
Edit: Actually, it does not seem to work for the user feed, but there is an "object_id" in the result of /me/feed. You can do another request to that object_id:
/object-id
...resulting in all the available images sizes:
"images": [
{
"height": 526,
"source": "https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10444402_888067974538310_2165197996181662459_n.jpg?oh=4518cc6608a14a2108aeaf61bcb60d09&oe=5501E78D&__gda__=1426703335_d71feeeb9aa6d8fd58085cd6074101e3",
"width": 526
},
{
"height": 480,
"source": "https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/p480x480/10444402_888067974538310_2165197996181662459_n.jpg?oh=bc0736fc9f74b1a4d89727ae5526dd3b&oe=5517CD73&__gda__=1427230414_1197a9870346dbaaf300c2ea0e359402",
"width": 480
},
...
New way - /{post_id}?fields=full_picture

Can't control width and height of video in fancy box

I eventually want to create a photo gallery... clicking on a picture will launch a You Tube video. I am using fancybox 2.0.
I have the video opening up inline but I cannot control its dimensions. Could you please take a look at this page for me and see where I am fouling up.
http://www.bytebrothers.com/bb_tester/Video_lightbox_test.htm
Thank you,
darrell#bytebrothers.com
This is how your script looks like right now
$(document).ready(function() {
$('.fancyYouTube').fancybox({
width : 400,
height : 300,
autoSize : false,
type : 'swf'
})
and this is how it should look like
$(document).ready(function() {
$('.fancyYouTube').fancybox({
width : 400,
height : 300,
autoSize : false
});
});
you are missing some closing brackets.
On the other hand, if you are using fancybox-media, you don't need to specify type:'swf'
UPDATE: when targeting youtube videos in embed (youtube iframe mode) mode, add the class fancybox.iframe to your anchor so this
<a class="fancyYouTube" href="http://www.youtube.com/embed/dx6TZgUSquY">
should be this
<a class="fancyYouTube fancybox.iframe" href="http://www.youtube.com/embed/dx6TZgUSquY">

Facebook Graph API - How do you retrieve the different size photos from an album?

Ok, first off let me tell you I have no problems getting a user's photo album(s) and looping through the output to display all of the photos in the size I want.
However, if I want to call a photo like:
<img src="https://graph.facebook.com/<?=$this->session->page->photo_id?>/picture?access_token=<?=$this->session->member->facebook_access_token?>" />
I cannot figure out how to tell it the size I want it to show.
In this sample code from Facebook you will see that whey retrieving the album each photo in the array comes back with the different sizes in this sample array. I could just save the thumbnail url from this, but I don't want to store it, just retrieve when needed.
{
"id": "10150146071831729",
"from": {
"name": "Facebook",
"category": "Product/service",
"id": "20531316728"
},
"picture": "http://photos-g.ak.fbcdn.net/hphotos-ak-ash1/168119_10150146071831729_20531316728_7844072_5116892_s.jpg",
"source": "http://a7.sphotos.ak.fbcdn.net/hphotos-ak-ash1/168119_10150146071831729_20531316728_7844072_5116892_n.jpg",
"height": 483,
"width": 720,
"images": [
{
"height": 483,
"width": 720,
"source": "http://a7.sphotos.ak.fbcdn.net/hphotos-ak-ash1/168119_10150146071831729_20531316728_7844072_5116892_n.jpg"
},
{
"height": 120,
"width": 180,
"source": "http://photos-g.ak.fbcdn.net/hphotos-ak-ash1/168119_10150146071831729_20531316728_7844072_5116892_a.jpg"
},
{
"height": 87,
"width": 130,
"source": "http://photos-g.ak.fbcdn.net/hphotos-ak-ash1/168119_10150146071831729_20531316728_7844072_5116892_s.jpg"
},
{
"height": 50,
"width": 75,
"source": "http://photos-g.ak.fbcdn.net/hphotos-ak-ash1/168119_10150146071831729_20531316728_7844072_5116892_t.jpg"
}
],
....... continued...
}
There has to be a way to retrieve these different sizes.
Thanks.
Facebook provides a type option for the picture field, for example, you can specify something like:
<img src="https://graph.facebook.com/xxx/picture?access_token=yyy&type=normal />
where the type parameter can be one of square, small, normal, or large for profile pictures or thumbnail, normal, album for album pictures.
Source: http://developers.facebook.com/docs/reference/api/user/ (under Connections section)
Edit: Added different options for album pictures
Thought I'd share a little trick in getting larger image sizes from the Graph API. Facebook as a little convention with image URLs that's not very obvious. For instance, take the following URL:
https://fbcdn-photos-g-a.akamaihd.net/hphotos-ak-prn2/t1/1185356_10201176263222205_1153673992_s.jpg
Notice the _s.jpg at the end? That determines the size of the image. You can change this to _o.jpg to get the "original" full size version. In other words, update the image URL to:
https://fbcdn-photos-g-a.akamaihd.net/hphotos-ak-prn2/t1/1185356_10201176263222205_1153673992_o.jpg
Every Facebook image has an _o.jpg version. Worst case, you get something the same size as the thumbnail. If that's the case, you're no better off than you were before.
here src_big and src are different size image url source
function get_photos_by_album_id($album_id){
if($album_id)
$fql = 'SELECT pid,src_big,owner,link,position,created,caption,src FROM photo WHERE aid="'.$album_id.'" ORDER BY created DESC LIMIT 0,6';
$param = array(
'method' => 'fql.query',
'query' => $fql,
'callback' => ''
);
$fqlResult = $this->facebook->api($param);
return $fqlResult;
}