I am trying to embed Facebook video using the code below:
<object width="400" height="224" >
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://www.facebook.com/v/115316011865684" />
<embed src="http://www.facebook.com/v/115316011865684" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="224">
</embed>
</object>
It's working fine, but is there any similar way to show video thumbnail from video id?
For example: http://www.facebook.com/thumbnail/115316011865684
or something else?
You can get the thumbnail picture from the video id by going to this Graph API URL -
https://graph.facebook.com/VIDEO_ID/picture, e.g. https://graph.facebook.com/115316011865684/picture
https://graph.facebook.com/VIDEO_ID will give you a lot more info, including bigger thumbnails to pick from. (You can get a list of the available info at
https://developers.facebook.com/docs/graph-api/reference/video.)
Here's some PHP code to dig up the biggest thumbnail:
$data = file_get_contents("https://graph.facebook.com/$video_id?fields=format");
if ($data !== FALSE)
{
$result=json_decode($data);
$count=count($result->format)-1;
$thumbnail=$result->format[$count]->picture;
}
Update: The code above has been updated since Facebook changed their API on July 10, 2017. Here is some additional PHP code to get a big thumbnail for a video in case Facebook changes things again:
$data = file_get_contents("https://graph.facebook.com/$video_id/thumbnails?access_token=$facebook_access_token");
if ($data !== FALSE)
{
$result=json_decode($data);
$thumbnail=$result->data[0]->uri;
}
This second solution requires a Facebook access token. Here are some instructions on how to get a Facebook access token: https://smashballoon.com/custom-facebook-feed/access-token/
Update: Facebook is making it more and more difficult to even get access tokens with the necessary permissions for such a simple task. Here is how to get the info from the raw HTML:
$data = `curl -s -A 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0' -L 'https://www.facebook.com/1706818892661729/'`;
if (preg_match('#<video [^>]+></video>\s*<div [^>]+><img [^>]+src="([^"]+)#s',$data,$matches))
{
$image = $matches[1]; $image = str_replace('&','&',$image);
if (strpos($image,'&')) {print "Answer: $image\n";}
}
Note that if you download the page, Facebook also provides the meta property twitter:image but that image is only 200x200. If Facebook wasn't such a pain in the butt, they would also provide the meta property og:image with a decent size image but they don't.
I just get it:
https://graph.facebook.com/VIDEO_ID?fields=format,source
This will get you an array of available formats with thumbnail URL and HTML for embeding.
Also source attribute get .mp4 url of video.
Try: https://graph.facebook.com/1706818892661729?fields=format,source
i created a php function to answer your question without you having to go through reading the boring documentation about facebook graph.
All you will need is just to insert your video link,facebook and youtube, but you can modify to add other sources.
simply copy the youtube video link in the addres bar and for for facebook, right click on the video and click on show video url, then copy that.
//get video thumbnail for facebook and youtube
function get_vid_thumbnail($link){
$thumbnail='';
//check if video link is facebook
if (strpos($link, 'facebook') !== false) {
$thumbnail=fb_thumb($link);
//$thumbnail='fb';
}
//check if video link is youtube
if (strpos($link, 'youtube.com') !== false) {
$thumbnail=youtube_thumb($link);
//$thumbnail='youtube';
}
return $thumbnail;
}
//supporting functions
//get youtube thumbnail
function youtube_thumb($link){
$new=str_replace('https://www.youtube.com/watch?v=','', $link);
$vv='https://img.youtube.com/vi/'.$new.'/0.jpg';
return $vv;
}
//clean the facebook link
function fb_video_id($url) {
//split the url
$main=parse_url($url);
//get the pathe and split to get the video id
$main=$main['path'];
$main=explode('/',$main);
$main=$main[3];
return $main;
}
//get the thumbnail
function fb_thumb($link) {
$img = 'https://graph.facebook.com/'.fb_video_id($link).'/picture';
return $img;
}
//get video thumbnail for fb and youtube ends
//get embed url for facebook and youtube to be used as video source
function get_vid_embed_url($link){
$embed_url='sss';
//check if video link is facebook
if (strpos($link, 'facebook') !== false) {
# code...
$embed_url=fb_embed_link($link);
//$thumbnail='fb';
}
//check if video link is youtube
if (strpos($link, 'youtube.com') !== false) {
# code...
$embed_url=youtube_embed_link($link);
//$thumbnail='youtube';
}
return $embed_url;
}
//get youtube embed link
function youtube_embed_link($link){
$new=str_replace('https://www.youtube.com/watch?v=','', $link);
$link='https://www.youtube.com/embed/'.$new;
return $link;
}
//get facebook embed link
function fb_embed_link($link) {
$link = 'https://www.facebook.com/plugins/video.php?href='.$link.'&show_text=0&width=560';
return $link;
}
Related
I've read that you can make a Google Apps Script that shows a Facebook Feed, and then embed this in a Google Site, but I can't find any more information on how to do it and I can't figure it out myself.
When I try to make an Apps Script web app with a Facebook feed I get errors like:
Uncaught DOMException: Failed to set the 'domain' property on 'Document': Assignment is forbidden for sandboxed iframes.
This is from copying the "Facebook Javascript SDK" and "Page Feed" from Facebook Developers into an HTML file and deploying it as a web app. I gather it has something to do with how Apps Script sandboxes your code but I don't know what I have to do here.
For that matter, even if I try to make a simpler Apps Script with some static HTML, when I try to embed it from Drive into the site I get an error "Some of the selected items could not be embedded".
The New Google Sites doesn't support Google Apps Script.
Related question: Google App Scripts For New Google Sites Release
The new Google Sites does now support embedding apps script (make sure to deploy the apps script as a web app, set the right permissions, and use the /exec url and not your /dev one to embed).
I found I couldn't use the facebook SDK for videos because of the sandboxing. I used an iframe solution instead for videos, but maybe you could try something like this for the feed (I'm assuming you've registered your app in fb so you can get generate tokens):
In apps script, create a .gs file and an html file, roughly along the lines below (I haven't actually worked with returning feeds, so check the returned data structure and adjust accordingly)
//**feed.gs**
function doGet(e) {
return HtmlService
.createTemplateFromFile('my-html-file')
.evaluate();
}
function getToken() { //use your fb app info here (and make sure this script is protected / runs as you
var url = 'https://graph.facebook.com'
+ '/oauth/access_token'
+ '?client_id=0000000000000000'
+ '&client_secret=0x0x0x0x0x0x0x0x0x0x0x0x'
+ '&grant_type=client_credentials';
var response = UrlFetchApp.fetch(url, {'muteHttpExceptions': true});
var json = response.getContentText();
var jsondata = JSON.parse(json);
return jsondata.access_token;
}
function getFeed() {
var url = 'https://graph.facebook.com'
+ '/your-page/feed'
+ '?access_token=' + encodeURIComponent(getToken());
var response = UrlFetchApp.fetch(url, {'muteHttpExceptions': true});
var json = response.getContentText();
var jsondata = JSON.parse(json);
//Logger.log(jsondata); //check this and adjust following for loop and html showFeed function accordingly
var posts = {};
for (var i in jsondata) {
posts[i] = {"post":jsondata[i].message};
}
return posts;
}
<!--**my-html-file.html**-->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// The code in this function runs when the page is loaded (asynchronous).
$(function() {
google.script.run
.withSuccessHandler(showFeed)
.withFailureHandler(onFailure)
.getFeed(); //this function is back in .gs file and must return an array or object which gets auto-passed to the showFeed function below
});
function showFeed(posts) { //parameter name must match array or object returned by getFeed in gs file
var html = '';
for (var p in posts) {
html += '<p>' + posts[p].post + '</p>'; //instead of a string, you can build an array for speed
}
$('#feed').empty().append(html); //if you used an array for the html, you'd split it here
}
function onFailure(error) {
$('#feed').empty().append("Unable to retrieve feed: " + error.message); ;
}
</script>
</head>
<body>
<div id="feed">
Loading...
</div>
</body>
</html>
http://developers.soundcloud.com/docs/api
When I look at the API docs, I see
SC.stream("/tracks/293", function(sound){
sound.play();
});
When I look at the track I uploaded, it only provides me the permalink. How do I get the track ID from the website? Do I always have to do a /resolve to get the ID?
This is probably more manual steps than /resolve, but it is "from the website." The sound id also appears in the embed code when you go to the sound and click "Share".
For example, if you go to a sound page, e.g.:
https://soundcloud.com/lowcountrykingdom/another-ordinary-day
Then click "Share", which brings up a pop up. Click "Embed" to switch to the embed tab, and copy the Embed code, which will look something like:
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/47580057&color=ff6600&auto_play=false&show_artwork=true"></iframe>
Note the ID in the value of the url query parameter:
url=https%3A//api.soundcloud.com/tracks/47580057
I'd use jquery ajax call to grab the data from Soundcloud. Say you save your variables permalink_url and client_id:
$.get('http://api.soundcloud.com/resolve.json?url='+
permalink_url+'/tracks&client_id='+client_id , function (result) {
console.log(result);
});
This should log an array of the songs. Check out this bin for reference http://jsbin.com/viviza/4/edit
Update: This answer is pretty old.
Soundclick docs https://developers.soundcloud.com/docs/api#uploading
The SC object now allows for getting the id's directly
SC.connect().then(function(){
return SC.get('/me/tracks');
}).then(function(tracks){
return tracks.map(function(track){
console.log("you can log the id here too: " + track.id")
return track.id
})
})
You could also get all the tracks from a given user id. Then use $.map() to place each of the tracks into an array. Call SC.stream() with song[i].id to play a random song from the array from the array of tracks.
SC.get('/users/123456/tracks/', function(tracks) {
// get an array of tracks
var song = $.map(tracks, function(i){
return i;
});
var i = Math.floor(Math.random() * song.length) // get a random value between 0 & the of songs in SC account -1
SC.stream(song[i].id, function(sound){
sound.play();
});
});
Using JavaScript to find the track data from a soundcloud song url:
let trackUrl = 'https://soundcloud.com/user-869590724/talk-to-animals-sentra-remix'
let client_id = '<your-client-id>'
let resolveUrl = `http://api.soundcloud.com/resolve.json?url=${trackUrl}/tracks&client_id=${client_id}`
fetch(resolveUrl, {
method: 'get'
}).then((response) => {
return response.json()
}).then((result) => {
/* now you have the track */
console.log(result)
})
I am uploading videos to Facebook Timeline successfully. But I need url for the Post. Using Video ID I can get only file url, but I need to get the Post URL so that I can also see any comments or Description attached to Video? Is it possible to get the URL of the Video Post? I am using facebook-android-sdk.
Thanks
I don't know if this point to the file or to the page.
in "response" i get the id of the video.
I simply concact it with this String "https://www.facebook.com/photo.php?v=" and it's the full path of the video
Code:
#Override
public void onComplete(String response, Object state) {
// TODO Auto-generated method stub
mDialog.cancel();
String[] temp;
String UrlVideo = null;
temp = response.split("\""); //the response string is like "id":"404030"} or {"error":"type of error..."}
if( temp[1].equalsIgnoreCase("id")){
//Video caricato e quindi anche trovato
UrlVideo = "https://www.facebook.com/photo.php?v="+temp[3];
System.out.println(UrlVideo);
//qui provvedo ad inoltrarlo al backend
}
}
i hope this help
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."'>");
};
}
?>
I would like my Tumblr homepage to show a single Question/Answer post that is selected by a 'featured' tag, or rather by being the most recent Question/Answer post tagged 'featured'. I don't see any built in Tumblr tags that will do this.
I am using jQuery to get the featured post (n number of them) from a category 'featured' by default. I have implemented this solution to my theme - Purely
Here is a screen-shot (displaying three featured posts)
Add this line 's meta section
<meta name='text:Featured Tag' content='featured' />
Add jQuery library in
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
Add these lines in where you want to display the featured post
{block:IndexPage}
{block:IfFeaturedTag}
<h1 class="featured-subhead">
Featured Posts +
</h1>
{/block:IfFeaturedTag}
{/block:IndexPage}
Add these lines just before the closing tag
{block:IndexPage}{block:IfFeaturedTag}
<script>
var rssurl = '/tagged/{text:Featured Tag}/rss';
$.get(rssurl, function(data) {
$('.featured-subhead').append('<div class="featured-posts">');
var $xml = $(data);
var vari = 0;
$xml.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text()
}
vari = vari +1;
if(vari <4){
$('.featured-subhead').append('<div class="featured-post" style="overflow:hidden;"><h2 class="featured-title">' + item.title + '</h2><div class="featured-post-description' + vari + '">' + item.description + '</div><div class="featured-post-link">Read More</div></div>');
//Do something with item here...
}
});
$('.featured-subhead').append('</div>');
});
{/block:IndexPage}{/block:IfFeaturedTag}
You can change if(vari <4){ line according to the numbers of posts you want to display as featured. For example, to display a single post, it would be if(vari <2){ .
I have also added few CSS classes to design the output. This can be declared in segment in
h1.featured-subhead
{
/* Heading of featured post */
}
.featured-posts
{
/* Outer box of all featured posts */
}
.featured-post
{
/* Inner box of each featured post */
}
h2.featured-title
{
/* Heading of each featured post */
}
.featured-post-description
{
/* Description or body of each featured post */
}
.featured-post-link
{
/* Link to Permalink page of each featured post */
}
Here only featured-subhead class is necessary. This must be added to the heading of featured post. jQuery will add the featured posts after that.
How does it work?
No surprises here. Tumblr generates a tag RSS page for each page. By using javascript, I am fetching that specific tag page and displaying 'n' number of elements from the XML elements. Sometimes, Tumblr takes a little more time (I don't know why) to generate the RSS page of newly added tags. Be patient and try to browse your-blog.tumblr.com/tagged/featured/rss page to check it is generated or not.
What you're asking is not a native setting to tumblr, in other words there's no preference setting you can simply check.
In order to do what you describes above, you will either need to edit your current theme code, or code a new theme from scratch.
In order to only show 1 question post, at the top, with a tag of featured, you will need to work with the jQuery/Javascript and the Tumblr API.
It's pretty complex coding, but if you're up for it, head on over to the Tumblr API Codex.
This is a little late, but in case it's of any help: Our free Single A theme has the sticky post feature built in. It's the first (and only) tumblr theme to have it. You can get it here: http://www.tumblr.com/theme/28638 or learn more about it here: http://singleatheme.tumblr.com/. Hope this helps!