I have a websites displaying cars. if user clicks on each car, it will direct to each car info page. I want to share each car content(image,title,description,url).
For ex.if user clicks on car with id 1,share dialog will display content for that car id 1, and if user clicks on car with id 2,share will display content for car id 2. I have googled for solution but have not found it. Below is my code.
<head>
<meta property="og:url" content="<?php echo 'http://motorcarmyanmar.com';?>" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Buy,Sell,Rent,Or Lease Cars Or Car Accessories In Myanmar" />
<meta property="og:description" content="Car Sales,Car Rentals,Car Accessories Sales" />
<meta property="og:image" content="http://motorcarmyanmar.com/pictures/car1.png" />
<meta property="og:image:alt" content="car picture"/>
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="400" />
<meta property="fb:app_id" content="1538657022815637" />
</head>
In the beginning of body.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1538657022815637',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=1538657022815637";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
In the car info page.
<script>
document.getElementById('shareBtn').onclick = function() {
var title,description,image;
title=$('#title_fb').val();
description=$('#description_fb').val();
image=$('#image_fb').val();
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object: {
'og:url': window.location.href,
'og:title': title,
'og:description': description + ' Lakhs',
'og:image': image,
'og:image:width':'500',
'og:image:height':'400'
}
})
},
function (response) {
// Action after response
});
}
</script>
With the codes i have given, the dynamic share works. But i want the share image to be bigger not a thumbnail. I read that if share reaches 50 counts,og tags can not be edited. So is there another way to share or is this way right. I saw other website pages sharing dynamic content without creating objects.
Follow Facebookes best practices about pictures sizes: https://developers.facebook.com/docs/sharing/best-practices/#images
Also, you should use a separate URL with a separate og:url tag for each share and just method: 'share' without other parameters. That share_open_graph method is just a workaround.
For example:
<meta property="og:url" content="<?php echo 'http://motorcarmyanmar.com/?id=' . $_GET['id'];?>" />
Of course you need to check if the parameter even exists, but it´s just an example.
The url is
http://www.motorcarmyanmar.com/pages/car_details/ca36?ca36=Details&Details=ca36
<head>
<?php
$title_header="";
$description_header="";
$features_header="";
$image_header="";
if(isset($_GET['Details']))
{
$car_id=$_GET['Details'];
$car_details= //get from database width $car_id;
$title_header=$car_details['header'];
$description_header=$car_details['description'];
$image_header=$car_details['image'];
}
?>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="<?php echo 'http://motorcarmyanmar.com' . $_SERVER['REQUEST_URI'];?>" />
<meta property="og:type" content="website" />
<meta property="og:title" content="<?php echo (!empty($title_header)?$title_header:'Some Buy,Sell,Rent');?>" />
<meta property="og:description" content="<?php echo (!empty($description_header)?$description_header:'Car Sales,Car Rentals,Car Accessories Sales');?>" />
<meta property="og:image" content="<?php echo (!empty($image_header)?$image_header:'http://motorcarmyanmar.com/images/icons/car1.jpg');?>" />
<meta property="og:image:alt" content="car picture"/>
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="400" />
<meta property="fb:app_id" content="1538657022815637" />
</head>
this is what i did. With this code, some pages show right share content(title,description,image),some pages show default homepage share content. But only url is right for each page. Is the code in right direction?
Related
I am adding a Facebook Share button to my website. I am able to set it up to include a picture in the post, but I'd like it to include a video. How would I do this using the FB.ui feed parameters?
Here is my working code for adding a picture:
<!-- Facebook share script -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=*********";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="#{#project_url}" data-layout="icon">
<%= image_tag "facebook.png", :class=>"social_icon" %>
</div>
$('.fb-share-button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: "<%=#project.user.username%>",
link: '<%=#project_url%>',
picture: '<%=#project.images.first.image_file_url%>',
caption: ' ',
description: ' ',
message: ''
});
});
You need to specify the url to the video in the source parameter. You can read more here.
source: The URL of a media file (either SWF or MP3) attached to this
post. If SWF, you must also specify picture to provide a thumbnail for
the video.
Instead of using the FB feed method, I used share, and this drew from the metatags I included for my webpage. This ended up working!
For reference, this is what it looked like:
$('.fb-share-button').click(function(e){
e.preventDefault();
FB.ui({
method: 'share',
href: '<%=#project_url%>',
}, function(response){});
});
and my metatags:
<!-- Facebook tags -->
<meta property="fb:app_id" content="811332718952118"/>
<meta property="og:type" content="video.other"/>
<meta property="og:url" content="<%=#project_url%>" />
<meta property="og:title" content="<%=#project.user.username%>'s Spin" />
<meta property="og:description" content=" " />
<meta property="og:video" content="<%=#project.video.video_file_url%>" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="700"/>
<meta property="og:video:height" content="700"/>
<meta property="og:image" content="<%=#project.spins.first.images.order(:position).first.image_file_url%>" />
I am placing an iFrame (xx.com) at the client website (yy.com), the iFrame has a facebook share that should redirect to the client site (yy.com). The problem is with the og:image & og:title as I am placing them in xx.com bcz I have no access to yy.com. The share is not displaying the image and title I am placing in xx.com. Is there a way to do so?
the code in xx as follows:
<head>
<meta property="og:url" content="yy.com" />
<meta property="og:title" content="title" />
<meta property="og:image" content="image-path" />
</head>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ar_AR/all.js#xfbml=1&appId=xxapp-id";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="yy.com" data-type="button_count"></div>
The code in yy.com is as follows:
<iframe width="950" height="600" frameborder="0" src="http://xx.com/path-to-file"></iframe>
I found a workaround for this as follows:
I redirect the share button to xx.com instead of yy.com having the title and the image url as a parameters in the URL and then inside xx.com I set the og:title and og:image according to the parameters passed and I redirect the user to yy.com
The share button in xx is as follows:
<div class="fb-share-button" data-href="xx.com?share_url=yy.com&title=the_title&image=the_image" data-type="button_count"></div>
The code for redirecting in xx is as follows:
<?php
$share_url = $_REQUEST['share_url'];
if(isset($share_url) && $share_url!=''){
$video_title = $_REQUEST['title'];
$video_image = $_REQUEST['image'];
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:title" content="<?php echo $video_title ?>" />
<meta property="og:image" content="<?php echo $video_image ?>" />
<meta http-equiv="refresh" content="0; url=<?php echo $share_url ?>" />
</head>
<body>
</body>
</html>
<?php
}
?>
I have a facebook application where the user choose 4 of his friends and then it creates a video (swf) with the pictures of your friends in it (loaded via xml). So I need to share this video on the user timeline. Everything works fine but the video is not embedded in the post on his timeline, there is only a post with the link to the page in it.
The weird thing is, if I post the url directly on my timeline, the video is embedded, but not if the same link is posted via the application.
here is my code called by the share button in js :
function postToFeed() {
var obj = {
method: 'feed',
link: 'https://mysite.com/flash/share-page.php?id=22',
picture: 'https://mysite.com/images/video-preview.jpg',
name: 'Name',
caption: 'Caption',
description: 'Description'
};
function callback(response) {
//some code here
}
FB.ui(obj, callback);
}
and the code in my share-page.php
<?php
$id_inscription = $_GET['id'];
$video_url = 'https://mysite.com/flash/share-page.php?id=22';
$video_preview_image = 'https://mysite.com/images/video-preview.jpg';
?>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta property="og:video" content="<?php echo $video_url; ?>"/>
<!-- Open grah tags for Facebook -->
<meta property="og:title" content="Test video player" />
<meta property="og:description" content="A video player interface experiment." />
<meta property="og:type" content="video" />
<meta property="og:url" content="<?php echo $video_url; ?>"/>
<meta property="og:image" content="<?php echo $video_preview_image; ?>"/>
<meta property="og:site_name" content="Site name"/>
<!-- Video specific open graph tags -->
<meta property="og:video" content="<?php echo $video_url; ?>" />
<meta property="og:video:secure_url" content="<?php echo $video_url; ?>" /> <!-- Required for people on Facebook who have secure browsing enabled! -->
<meta property="og:video:width" content="325" />
<meta property="og:video:height" content="180" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<script src="js/swfobject.js"></script>
<script>
var flashvars = {
xmlUrl:"xml/data-<?php echo $id_inscription; ?>.xml",
policyFileUrl:"http://profile.ak.fbcdn.net/crossdomain.xml"
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "",
wmode: "opaque"
//wmode: "direct" // can cause issues with FP settings & webcam
};
var attributes = {
id:"content"
};
swfobject.embedSWF(
"app.swf",
"altContent", "480", "270", "10.0.0",
"expressInstall.swf",
flashvars, params, attributes);
</script>
</head>
<body>
<div id="altContent">
<p>Get Adobe Flash player</p>
</div>
</body>
</html>
Found it, in the javascript you have to add
source: 'https://mysite.com/flash/app.swf'
DOesnt work for me .
Also facebook says ,It is NOT supposed to work By Design .
https://developers.facebook.com/bugs/589975484398226?browse=external_tasks_search_results_526fc388b99e18881434478
Please share here your code snippet if you could make it work . I have the meta tags taking care for the secure video Url as well .
i used this tutorial https://developers.facebook.com/docs/opengraph/tutorial/ to make my first App but i want to use php variable for my og:title like this <meta property="og:title" content="<?php echo $title; ?>" /> . This php variable is changing constantly every time the page loads but when I post my action in the facebook appears with the old title!
Here's the code:
<?php
$title = ' Hello world';
// <---- This php variable is changing every time
the page loads but the title is not being recognised
?>
<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# fitnessgod: http://ogp.me/ns/fb/fitnessgod#">
<meta property="og:locale" content="en_US" />
<meta property="fb:app_id" content="My app Id" />
<meta property="og:type" content="fitnessgod:news" />
<meta property="og:url" content="https://www.fitness-god.com/share-facebook.php" />
<meta property="og:title" content="<?php echo $title; ?>" />
<meta property="og:description" content="let's do sport" />
<meta property="og:image" content="https://www.fitness-god.com/images/sport dinamic.png" />
<script type="text/javascript">
function postCook()
{
FB.api('/me/fitnessgod:share' +
'?news=https://www.fitness-god.com/share-facebook.php','post',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'My App id', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>
<font size="30" face="verdana" color="grey">
Stuffed Cookies
</font>
</h3>
<p>
<img title="Sports News"
src="https://www.fitness-god.com/images/sport dinamic.png"
width="550"/><br />
</p>
<form>
<input type="button" value="Share news" onClick="postCook()" />
</form>
<fb:activity actions="fitnessgod:share"></fb:activity>
</body>
</html>
You need to correct the meta tags definition. Use attribute name, not property:
E.g.:
<meta name="og:title" content="<?php echo $title; ?>" />
You can use the debugger to test your code:
http://developers.facebook.com/tools/debug
Also note that when you click share, the content of your page might be cached. But, the debugger, always gets the latest content.
It appears you are experiencing "freezing" of og:title that Facebook performs after a number of actions – 50 likes, shares and/or comments – were performed with that link.
One of the main reasons why Facebook does this, is to prevent many people sharing a seemingly safe link and then having the site owner replace the title with offensive content and have it display on people's timelines.
For additional information, see this link.
I have create a video link using Open Graph protocol. After clicking on like button that link comes on my wall post. Now I am going to share it but it's not sharing.
My code for generate video link something like this
`
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<title>Facebook Like Demo</title>
<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="xxxxxxxxxxx" />
<meta property="og:title" content="title.." />
<meta property="og:description" content=" some description..." />
<meta property="og:type" content="video" />
<meta property="og:image" content="image url" />
<meta property="og:video" content="video url" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />
<meta property="og:site_name" content="test_app" />
</head>
<body>
<div id="fb-root">
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=xxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like href="link url" send="true" width="450"
show_faces="true">
</fb:like>
</body>
</html>
`
I have a feeling that the URL is not being seen correctly by Facebook's servers when they call out to it. Run your URL thru the linter tool and fix any warnings and errors it tells you about. The linter is: https://developers.facebook.com/tools/lint