how to add Facebook, Google+ and twitter like/share button on my website, to sharing details of my website. because, i tried the following code in my website for google+. But, it's only sharing my website pic not the description and title of my website
<meta itemprop="name" content="MySMSBuddy">
<meta itemprop="description" content="Description of my webpage">
<meta itemprop="image" content="http://eravikant.com/images/image.png">
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Any help and idea will be appreciated !!!
Those sites use the title tag for page title, and meta name="description" for description (not itemprop="description".
<title>Title of your page</tile>
<meta name="description" content="Description of your page" />
For Facebook, you can also use open graph meta tags:
<meta property="og:title" content="Title"/>
<meta property="og:description" content="Description"/>
Related
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?
In twitter, you can tell what hashtags to be included when pressing the tweet button, and that's done using the hashtags parameter.
Is there anything similar while sharing to Google+? I've read the Share documentation but found nothing like that (I care most about the Share Link method of sharing).
Do you know any ways of accomplishing that?
If your main interest is to be able to search your posts by hashtag, you can add hashtags to the snippet description. The hashtag will not be rendered differently from the rest of the text and will not be clickable though.
<html itemscope itemtype="http://schema.org/Organization">
<head>
<meta itemprop="name" content="Example">
<meta itemprop="description" content="
An #example of how to add #hashtags to the snippet description.">
<meta itemprop="image"
content="https://www.google.com/images/srpr/logo3w.png">
</head>
<body>
<div class="g-plus" data-action="share"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>
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 have the following elements in my page:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
...
<meta property="og:title" content="testitle"/>
<meta property="og:url" content="http://www.hoteljo.de"/>
<meta property="og:image" content="http://www.hoteljo.de/images/button-60.png"/>
<meta property="og:type" content="website"/>
<meta property="og:site_name" content="site name"/>
<meta property="fb:app_id" content="id"/>
<meta property="fb:admins" content="1160534546"/>
<meta property="og:description" content="description"/>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'id',
status: true,
cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/de_DE/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:like href='http://www.hoteljo.de' send='false' layout='button_count'
show_faces='false' font='verdana'></fb:like>
I inserted the open graph description in the head and included the Facebook like button inside the body element.
But still on https://developers.facebook.com/tools/debug I get error. What do I have to change?
The problem here is that the page http://www.hoteljo.de redirect to http://www.hoteljo.de/signup via a 302 HTTP code. So Facebook can't parse OpenGraphs from the home page http://www.hoteljo.de !
You should try to remove that redirection or to set it up with javascript (as this is a temporary redirection).
You have a circular redirection path error:
see https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.site.de
Your original URL (http://www.site.de/) links to another URL (https://www.office-site.de/) which links back to your original URL (http://www.site.de/) through the rel="canonical" link in your and so on.
Decide what your canonical URL is, and stick to that.
Im trying to add a facebook like button to a website im working on, but none of the meta attributes i add show up.
I have the following in my html, (irrelevant parts not included)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
...
<meta property="og:site_name" content="My Site" />
<meta property="og:title" content="Some Product"/>
...
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MYAPIKEY',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
...
...
<fb:like layout="button_count"></fb:like>
...
Any pointers on what im doing wrong would be much appreciated.
I realised, the problem was that i was testing the machine on my local computer. It started working once i put the website online.
Believing the Facebook page
http://developers.facebook.com/docs/guides/web
it should look like this :
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
You're missing a number of the required open graph tags. They're defined here. At a minimum you're looking for -
<meta property="og:title" content="Title of page"/>
<meta property="og:type" content="CONTENT TYPE"/>
<meta property="og:url" content="URL of PAGE"/>
<meta property="og:image" content="URL of IMAGE"/>
<meta property="og:site_name" content="SITE NAME"/>
<meta property="fb:admins" content="USER_ID"/>