I'm a bit stuck.
I have a Joomla site and I've got my app working to the point any app user can post the the video on certain pages to their wall using FBui - but what i reall want is the ability to post the video to anywhere, i looked into using og tags, i've added them but the video doesnt show up - im guessing ive got an issue or conflict somewhere. An example page:
Album page - http://fnoob.com/archives/P/34-alex-paterson/468-chewy-choosedays-vol-91-100
Here's the header part that's relevant ( i've taken out the links + appid - i know they work) :
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#"><meta property="fb:app_id" content="my_app_id">
<meta property="og:type" content="video.other" >
<meta property="og:url" content="path_to_swf" >
<meta property="og:image" content="path_to_image" >
further down we have the post to wall function which is working as:
<div id='fb-root'></div>
<script>
var APP_ID='137867843030139';
window.fbAsyncInit = initFacebook;
function initFacebook()
{
FB.init({
appId : APP_ID,
status : true, // check login status
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(onFacebookLoginStatus);
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
function facebookLogout()
{
FB.logout();
var loginButtonDiv=document.getElementById("fb-login-button-div");
loginButtonDiv.style.display="block";
var logoutButtonDiv=document.getElementById("fb-logout-button-div");
logoutButtonDiv.style.display="none";
var contentDiv=document.getElementById("user-is-authenticated-div");
contentDiv.style.display="none";
}
function facebookLogin()
{
var loginUrl='http://www.facebook.com/dialog/oauth/?'+
'scope=publish_stream,manage_pages&'+
'client_id='+APP_ID+'&'+
'redirect_uri='+document.location.href+'&'+
'response_type=token';
window.location=loginUrl;
}
/*
* Callback function for FB.login
*/
function onFacebookLoginStatus(response)
{
if (response.status=='connected' && response.authResponse)
{
var loginButtonDiv=document.getElementById("fb-login-button-div");
loginButtonDiv.style.display="none";
var logoutButtonDiv=document.getElementById("fb-logout-button-div");
logoutButtonDiv.style.display="none";
var contentDiv=document.getElementById("user-is-authenticated-div");
contentDiv.style.display="block";
}
else
{
var loginButtonDiv=document.getElementById("fb-login-button-div");
loginButtonDiv.style.display="block";
var contentDiv=document.getElementById("user-is-authenticated-div");
contentDiv.style.display="none";
}
}
function postToWallUsingFBUi()
{
var data=
{
method: 'feed',
message: '',
display: 'iframe',
caption: '<? echo $this->album->artist_name; ?> Click to Listen',
name: '<? echo $this->album->name; ?>',
picture: 'http://fnoob.com/images/albums/<? echo $this->album->image; ?>',
source: link_to_file',
link: '<? echo $album_link ?>', // Go here if user click the picture
description: 'By artist <? echo $this->album->artist_name; ?> on <? echo $this->album->format_name; ?> and powered by FNOOB.com ',
actions: [{ name: 'fnoob.com', link: '<? echo $album_link ?>' }],
}
FB.ui(data, onPostToWallCompleted);
}
function onPostToWallCompleted(response)
{
if (response)
{
//console.log(response);
if (response.error)
{
alert(response.error.message);
}
else
{
if (response.id)
alert('Posted.... carry on!');
else if (response.post_id)
alert('Posted.... carry on!');
else
alert('Crap... something went wrong');
}
}
// user cancelled
}
</script>
So what i want is basically every time this page is shared on facebook either ( page, feed, etc) that the image and video load and if clicked it plays and is linked to the page on the website. Any help really appreciated on this - been trying to figure it out for a day or so.
Add this tags
<meta property="og:video:width" content="640" />
<meta property="og:video:height" content="360" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video" content="DIRECT_VIDEO_FILE_URL" />
<meta property="og:video:secure_url" content="DIRECT_VIDEO_FILE_URL_SSL" />
<meta property="og:image" content="Image_you_want_to_use_as_thumbnail" />
<meta property="og:image:secure_url" content="Image_you_want_to_use_as_thumbnail_SSL" />
Video file will work in format mp4 and swf.
Important part here to get this to work is that you deliver file from an SSL / HTTPS source
The image will be the thumbnail behind the play button
Related
Background:
I already have a website en langage PHP and SQl (including Login and the main page);right now I want to connect with Office 365.
It is to say that I have two ways to login: one is from my own website,another is through the account Office 365.After login with office 365,I can get the name of the user and search the name in my database, according to their name I will give them different rights(read,write....)
I have the API code from office 365,but I don't know how to use it.Right now I just can sign in the account of office and jump in to the main Page.
Problem:
----- I don't konw how to stock the 'user.profile.name' in PHP?
When I jump in to another page, it doesn't keep the information of the Office 365.And I can not compare the name of the user with my data base.
----- And because the API code is in javascript, How to stock the parametre in PHP?
Office 365 API Code(this is the login page for office 365):
<html>
<head>
<!--META-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login Office</title>
<!--STYLESHEETS-->
<link href="css/stylelogin.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--SCRIPTS-->
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.12/js/adal.min.js"></script>
<script>
var ADAL = new AuthenticationContext({
instance: 'https://login.microsoftonline.com/',
tenant: 'common', //COMMON OR YOUR TENANT ID
clientId: 'XXXXXXX', //This is your client ID
redirectUri: 'XXXXXX', //This is your redirect URI
callback: userSignedIn,
popUp: true
});
function signIn() {
ADAL.login();
}
function userSignedIn(err, token) {
console.log('userSignedIn called');
if (!err) {
console.log("token: " + token);
showWelcomeMessage();
window.location.replace("main.php")
}
else {
console.error("error: " + err);
}
}
function showWelcomeMessage() {
var user = ADAL.getCachedUser();
var divWelcome = document.getElementById('WelcomeMessage');
divWelcome.innerHTML = "Welcome " + user.profile.name;
}
</script>
<link rel="shortcut icon" href=" images/favicon.ico" />
</head>
<body>
<button class="button" id="SignIn" onclick="signIn()">Sign In</button>
<h1 id="WelcomeMessage"></h1>
</body></html>
I have tried a lot of methods to stock the 'user.profile.name',
for example session,cookie,txt,post,but I didn't successed.
I hope someone can help me to solve this problem,Thanks.
I want to open the response that I get from my PHP server in the In App Browser in a new window.
I am creating an app using Ionic and using PHP as a back end. I have full control of the php server.
I am making the ajax call like so:
$(document).ready( function() {
$("#paybutton").click(function() {
var params = "projectpaymentoption=1197&id=",
usernamepay = window.localStorage.getItem("username"),
paymenturl = params + usernamepay;
$.ajax({
type: 'POST',
url: 'http://www.blabla.com/encode.php',
data: $.param({"paymenturl": paymenturl}),
success: function(output) {
window.open('output','_blank','location=no','closebuttoncaption=Zurück');
console.log(result);
}
});
});
});
Now I want to open the output in a new inappbrowser windows.
The output i am throwing out is as follows
<?php
ob_start();
include_once('includes/headers.php');
require_once('includes/connection.php');
require_once('includes/functions.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<?php
include($filePath);
?>
It is a dynamically generated php page. An not an url.
How can I show this page in the inappbrowser
How to include video recording and downloading in this code, My previous query in this question was solved successfully but now I need to have archiving feature in this solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="myPublisherDiv"></div>
<div id="subscriberBucket"></div>
<script src="https://static.opentok.com/webrtc/v2.2/js/opentok.min.js" ></script>
<script type="text/javascript">
var apiKey = "<YOUR API KEY>";
var sessionId = "<YOUR SESSION ID>";
var token = "<YOUR SESSION ID'S TOKEN>";
session = OT.initSession(apiKey, sessionId);
session.connect(token, function (err) {
if (!err) {
session.publish("myPublisherDiv", { mirror: false });
}
});
session.on({
"streamCreated": function (event) {
session.subscribe(event.stream, "subscriberBucket", { width: 600, height: 450 }, { insertMode: "append" });
}
});
</script>
</body>
</html>
And please mention in yur answer if anything is wrong or not in this line
session.on({
"streamCreated": function (event) {
session.subscribe(event.stream, "subscriberBucket", { width: 600, height: 450 }, { insertMode: "append" });
I tested on another OpenTok app and clicked on mute and sound icons but could not reproduce what you are seeing.
I then created a new very simple group video chat app, clicked on mute and sound icons and I also could not reproduce what you are seeing.
I will paste in my group video chat app, you can start from this and slowly add in your own code part by part. Then you will be able to see what is causing your session to disconnect. Here is my simple group video chat app:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="myPublisherDiv"></div>
<div id="subscriberBucket"></div>
<script src="https://static.opentok.com/webrtc/v2.2/js/opentok.min.js" ></script>
<script type="text/javascript">
var apiKey = "<YOUR API KEY>";
var sessionId = "<YOUR SESSION ID>";
var token = "<YOUR SESSION ID'S TOKEN>";
session = OT.initSession(apiKey, sessionId);
session.connect(token, function(err){
if( !err ){
session.publish("myPublisherDiv");
}
});
session.on({
"streamCreated": function(event){
session.subscribe( event.stream, "subscriberBucket", {insertMode: "append"} );
}
});
</script>
</body>
</html>
Using the facebook javascript sdk - I have made this function to post information to the wall of the current facebook user.
But I'm sure this is correct (obviously not) but cannot find the syntax error anywhere.
The error only appears when I click the the post to wall button. Can any one help me understand why the error is coming about?
Thanks
Josh
Please see my full tab app code below.
<?php
require 'facebook-php-sdk-master/src/facebook.php';
$fb_app_id = 'XXXXXXXXXXXXXXX';
$fb_secret = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
$fb_admins = 'XXXXXXXXX';
$fb_channel_url = '//myapp.co.uk';
$og_title = 'My App';
$og_description = 'This is my app';
$facebook = new Facebook(array(
'appId' => $fb_app_id,
'secret' => $fb_secret,
'cookie' => true
));
$signed_request = $facebook->getSignedRequest();
?>
<!DOCTYPE html>
<head>
<meta name="robots" content="noindex, nofollow">
<meta charset="utf-8">
<meta property="fb:app_id" content="<?php echo $fb_app_id; ?>">
<meta property="fb:admins" content="<?php echo $fb_admins; ?>">
</head>
<body>
Post to wall
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $fb_app_id; ?>', // App ID
channelUrl : '<?php echo $fb_channel_url; ?>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoGrow(true);
};
function fb_publish(link,title,image,description) {
var obj = {
method: 'feed',
link: link,
picture: image,
name: title,
caption: 'facebook.com/mypage',
description: description
};
function callback(response) {
}
FB.ui(obj, callback);
}
/***** load SDK *****/
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</body>
</html>
I kept on trying figure out my problem and in the I got the post wall function to work.
The reason for the unexpected identifier was because of my php string. Not escaping things properly.
I fixed the problem with some help here: How to echo php string safely in a java script onclick identifier
Also note when wanting to use the post to wall function, you need to allow the access to the domain using App Domains. (see all my setting below)
I am trying to test out an Open Graph Facebook action and am having trouble wrapping my head around how to do it. I used this video to get started: http://www.youtube.com/watch?v=8x6T7-WFSBg . It gives me an error when I try to run the code (which I've pasted below). I figured I'd just test out and see if I'm getting the correct response by going to http://graph.facebook.com/me/APP_NAME (with app_name of course being replaced with my apps namespace). I get this error though:
{
"error": {
"message": "An active access token must be used to query information about the current user.",
"type": "OAuthException",
"code": 2500
}
}
I'm assuming the reason I can't test my action is because there is no active access token? The problem I'm finding though is that I'm the administrator on the app so I'm assuming I should have that access either way.
Here's the code used (from that video) in order to just have an easy basic test for an Open Graph action. Be aware that I have substituted the app's info wherever the words are all caps. Thanks for your help in advance, I'm very new to the Open Graph and am just trying to dive in. Thank for your patience with me as well!
Here's the code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# APP_NAMESPACE: http://ogp.me/ns/fb/APP_NAMESPACE#">
<meta property="fb:app_id" content="APP_ID" />
<meta property="og:type" content="APP_NAMESPACE:ACTION" />
<meta property="og:url" content="Put your own URL to the object here" />
<meta property="og:title" content="Sample ACTION" />
<meta property="og:image" content="https://fbstatic-a.akamaihd.net/images/devsite/attachment_blank.png" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<input type="button" value="test" onclick="javascript:postAction('ACTION', 'OBJECT', 'URL OF THIS PAGE');" />
<script type="text/javascript">
function postAction( action, object_type, object_url ){
FB.api('/me/APP_NAMESPACE:' + action + '?' + object_type + '=' + object_url, 'post', function(response){
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>
</html>
You need to authenticate your user with the app
check here for more info: http://hayageek.com/facebook-dialog-oauth/ or via facebook dev http://developers.facebook.com/docs/concepts/login/