https://developers.facebook.com/docs/plugins/like-button
<html>
<head>
<title>Your Website Title</title>
<!-- You can use open graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your like button code -->
<div class="fb-like"
data-href="http://www.your-domain.com/your-page.html"
data-layout="standard"
data-action="like"
data-show-faces="true">
</div>
</body>
</html>
In our case a page has a list of products and each product should have its own Like button.
Product 1: Like Share
Product 2: Like Share
Product 3: Like Share
Product 4: Like Share
Product 5: Like Share
Product 6: Like Share
How to achieve this? If a page has one product, we can use meta og:xxx.
When user clicks Like button for a product, is there a way to assign the meta properties dynamically? Thanks.
Related
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
}
?>
Hello i have problem with facebook comments on my page.
Posts which make visitors are not visible. Posts are visible but only which i will make and then when i logout it will disappear.
/*part of header.php*/
<meta property="fb:admins" content="{hereisadminid}" />
<meta property="fb:app_id" content="{hereisappid}" />
<meta property="og:title" content="<?= $row['title']; ?> | Yrrej" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?= $row['title_uri']; ?>" />
<meta property="og:description" content="<?= $row['title']; ?>" />
<meta property="og:image" content="http://www.something.sk/og_something.png" />
<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/sk_SK/all.js#xfbml=1&appId=hereisappid";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Then in body of my website, under each article is this
<div class="fb-comments" data-href="http://www.yrrej.eu/<?= $_GET['id'] ?>" data- numposts="10" data-colorscheme="light"></div>
Can you help me someone, what is wrong when i cant see all comments? Thanks for tips and help :( Here is my website www.yrrej.eu
I checked your source code, you've written ID's in meta tags with {***}, pls remove the { and }
Second thing, please check that your app is not in the development mode. If it is, you can change the status to live in the settings in "Status & Review"
i have a problem with like button: if clicked, it shows on timeline this post:
{name user} liked index of/ on {app name} with correct description and thumbnail
i put these metatag
<meta name="description" content="Ho appena creato la mia storia con ''Lettere d'amore'' di Goldenpoint. Fallo anche tu e avrai subito un buono sconto del 10% da utilizzare in tutti i negozi goldenpoint e sullo shop on line" />
<meta property="og:image" content="<?php echo $urlThumb; ?>" />
<meta property="og:title" content="Goldenpoint Lettere d'amore" />
<meta property="og:type" content="game" />
<meta property="og:url" content="<?php echo "https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";?>" />
<meta property="og:site_name" content="Goldenpoint Lettere d'amore" />
<meta property="fb:admins" content="xxxxxxxxxxxxxx" />
and like button is:
<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/it_IT/all.js#xfbml=1&appId=404791622949241";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://apps.facebook.com/lettereamore/" data- send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
with debugger i see a weird thing: if i type the website url, everything is perfect, but if i do a test by using the url of the facebook app, it returns index of
how i can fix this?
thank you
I have the typical HTML5 implementation of the Facebook recommend button:
<div id="fb-root"></div>
<script type="javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
<? if ( $current_language == 'en' ): ?>
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
<? else: ?>
js.src = "//connect.facebook.net/fr_CA/all.js#xfbml=1";
<? endif; ?>
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
<div class="share_button facebook" id="facebook">
<div class="fb-like" data-send="false" data-layout="button_count" data-width="80" data-show-faces="false" data-action="recommend"></div>
</div>
The first time I click it, the popup preview box does not display the Title or Description. I have the following info at the top of the page:
Test
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta name="description" content="Test website." />
<meta name="keywords" content="test whatever" />
<meta property="og:title" name="Show this!" content="Show this!" />
If I leave the page, unrecommend the page from Facebook and return to the same page and press Recommend again, the title and description then appear. The page shows one of thousands of db entries so the problem needs to be fixed. I have tried putting the js function in jQuery(document).ready(function() - no luck. I tried moving it to the bottom of the page - no luck. Can someone help me?
From the example you gave, you are missing some required OG tags such as URL and image. Also, do you have the prefix info on your head tag?
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# myspecialapp: http://ogp.me/ns/fb/myspecialapp#">
Just a few days ago the Facebook Like and Send buttons disappeared from my site products pages. The code is still in place and has work for months before they disappeared. A link to one of the product pages is http://www.finesgas.com/details/gas_grill_brands/broilmaster_brands/popular_models/p3sx
The is the code that I have in place right now.
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<meta property="og:title" content=" Broilmaster P3SX Grill With Portable Cart" />
<meta property="og:type" content="product" />
<meta property="og:description" content="Broilmaster P3SX gas Grill With Portable Cart Base " />
<meta property="og:site_name" content="FinesGas" />
<meta property="fb:admins" content="1222761017" />
<meta property="og:image" content="http://www.finesgas.com/images/broilmaster-p3sx-loaded.jpg" />
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like send="true" layout="button_count" width="250" show_faces="false" action="Like" font="tahoma"></fb:like>
<div style="padding:5px;"></div>
Add the following to your html tag...
xmlns:fb="http://ogp.me/ns/fb#"