I have integrate all the code for facebook like button. But it does not work properly.
Suppose I am on my product detail page & I have given facebook like button to product image.
If user click on this like button count will be increment & this post will seen on user's profile page. My problem is that when I click on this like button count have increment proper but when I see on my facebook profile page it shares my domain link, title, description & image. Instead of that I want to show product URL, product title , product description & product image. I have done following code.
In the "head" tag I have written this code
<meta property="fb:app_id" content="123456789012345"/>
<meta property="og:title" content="Bliise"/>
<meta property="og:url" content="{$siteroot}/products/{$smarty.get.id1}/{$smarty.get.id2}/products"/>
<meta property="og:image" content="{$siteroot}/image.php?height=500&width=360&image=/product/{$prodDetails.product_image}"/>
<meta property="og:description" content="Bliise"/>
<meta property="og:site_name" content="Bliise"/>
<meta property="og:type" content="Brand"/>
In the "body" tag I written this code
<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>
& this is the code for my facebook like button
<fb:like href="{$siteroot}/products/{$smarty.get.id1}/{$smarty.get.id2}/products" layout="button_count" style="float:left; width:70px; margin:12px 0px 0px 12px;" show_faces="false" width="240" height="40" action="like" colorscheme="light"></fb:like>
This will helps you to find the problem
Also don't forget to add :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
Related
I want to share Image , Text and Url on Twitter through php.
I used "Summary Card with Large Image". For this added all meta tag, but not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Summary Card Implementation" />
<meta name="twitter:description" content="This describes about Twitter Summary Card" />
<meta name="twitter:image" content="https://cdn.pixabay.com/photo/2020/11/29/15/59/tower-5788197_960_720.jpg" />
<style>
body{background: #148c6b;color: #fff;font-family: calibri;font-size: 16px;}
a.tweet{color:#fff; padding:6px 20px; background:#ff6600;margin-top:40px;text-decoration:none; border-radius:5px;}
</style>
</head>
<body>
<h1>Twitter Summary Card</h1>
<p>Summary Card Implementaion on Web Page</p>
<div>
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet?url=http://www.example.com?sid=12">
Tweet
</a>
</div>
<script>
//Twitter widget script to render tweet button
window.twttr = (function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function (f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));</script>
</body>
</html>
Please help me with possible solution.
Thanks..
How can I share a profile page I created to Facebook when the page is dynamically loaded based on a id?
here is the head tags with the generated id -
$id = $_GET['id'];
<meta property="og:url" content="https://www.my_site.com/page.php?id=<?php echo $id;?>" />
<meta property="og:title" content="Profile Name" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://www.my_site.com/path/image.jpg" />
Heres the FB SDK -
<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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and finally the button itself -
<div class="fb-share-button" data-href="https://www.my_site.com/page.php?id=<?php echo $id;?>>" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.my_site.com%2Fpage.php%3Fid%3D%253C%253Fphp%2Becho%2B%2524id%253B%253F%253E&src=sdkpreparse">Share</a></div>
When I run it, it just shows the main website page my_site.com not the profile page.
I am having a blog page on my website there is an option to share the blog in social media like Facebook, Twitter, LinkedIn, and Google, but the problem is sharing the blog in social media not increasing the count for twitter and google. and unable to display the images and description while sharing the post on facebook.
Here is the code for that.
<p class="text41">
<div class="facebook2"><div class="fb-share-button" data-href="<?php echo base_url()?>blog/article/<?php echo $r ->blogtitle ;?>"data-layout="button_count"></div></div>
<div class="twitter2">Tweet<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></div>
<div class="linkedin2"><span class="linkedincount"><script type="IN/Share" data-url="<?php echo base_url()?>blog/article/<?php echo $r ->blog_id ;?>" data-counter="right"></script></span></div>
<div class="google2"><div class="g-plus" data-action="share" data-height="24" data-href="<?php echo base_url()?>blog/article/<?php echo $r ->blog_id ;?>"></div></div>
</p>
Script For that
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Added meta tags in my header file:
<meta property="og:url" content="www.yoursiteurl/page.com" />
<meta property="og:type" content="Website name" />
<meta property="og:title" content="Put the title here" />
<meta property="og:description" content="Give a long description here" />
<meta property="og:image" content="www.yoursite.com/urpicurl" />
But here how can i get the dynamic image and description from admin
I have two pages (case_1.html,blog_1.html) and onther two page containing facebook like it button for both page(case.html,blog.html) . When i like case_1.html then i get the title of like button is same as i like the blog_1.html.
I have also used open graph tag in case_1.html but i get the same title of blog_1.html.
Please help me.
my code for case_1.html is
<title>Case Study </title>
<meta property="og:title" content="Case Study " />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://mywebsites.com/case_1.html" />
<meta property="og:image" content="http://mywebsites.com/img/case_study/Arvind.JPG" />
<meta property="og:site_name" content="mywebsites.com" />
<meta property="fb:app_id" content="my_id" />
and i use following code for like it on case.html juse below tag
<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>
<div class="fb-like" data-href="http://mywebsites.com/case_1.html" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="arial"></div></div>
Maybe you made a copy of blog_1.html and entered the link on facebook before you updated the meta data? Facebook is caching the meta information a very long time. You can call the facebook debugger to test your data. Also the cache is cleared when you enter a url in the debugger. So after you entered the url and everything is correct, normal sharing should work, too.
I am the PHP developer for a website, and recently replaced the Sharer.php code with the newer code examples. The Like button displays properly, but when you click on it, the pop-up displays for only a second or two, then disappears. Also, the description isn't showing up in the pop-up - just the URL. The Like button code is contained within a DIV container that can be hidden by the user (using JQuery), and there is AJAX on the page to automatically query a table once a minute to refresh an on-screen counter.
Here are some code snippets in case they help, and any help is appreciated:
<meta property="og:title" content="FourFreedomsBlog - Romney/Ryan: Channeling the inner McCain" />
<meta property="og:description" content="The Romney/Ryan campaign is evoking an eerie recollection of the McCain campaign of 2008: trust us - you'll get the details AFTER we're elected." />
<meta property="og:url" content="http://www.fourfreedomsblog.com/Blog.php?Act=ViewBlogPost&BlogID=2090" />
<meta property="og:image" content="http://www.FourFreedomsBlog.com/images/4Fv3.0.gif" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="FourFreedoms Blog" />
<meta property="fb:admins" content="14194340826" />
<div class="ShareThisContainer">
<div class="FoldingMenu">
<h4><button id="showShareThis" class="ButtonHide" /></button><span name="" id="">Share This!</span></h4>
<div id="SharePane" class="TogPane ItemHide">
<table class="ShareThis">
<tr>
<td colspan=8>
<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>
<div class="fb-like" data-href="http%3A%2F%2Fwww.FourFreedomsBlog.com%2FBlog.php?Act=ViewBlogPost&BlogID=2090" data-send="true" data-width="320" data-show-faces="true"></div>
</td>
</tr>
</table>
</div><!-- id=SharePane -->
</div><!-- class=FoldingMenu -->
</div><!-- class=ShareThisContainer -->
<div class="fb-like" data-href="http%3A%2F%2Fwww.FourFreedomsBlog.com%2FBlog.php?Act=ViewBlogPost&BlogID=2090" …
First of all, do not URL-encode the value of the data-href parameter here.
Second of all, do not use upper-case letters in your domain name – the Facebook scraper fails on domain names with upper case letters – compare
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.FourFreedomsBlog.com%2FBlog.php%3FAct%3DViewBlogPost%26BlogID%3D2090
vs
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.fourfreedomsblog.com%2FBlog.php%3FAct%3DViewBlogPost%26BlogID%3D2090
And then, finally, fix the error the debug tool shows:
Object Invalid Value: Object at URL 'http://www.fourfreedomsblog.com/Blog.php?Act=ViewBlogPost&BlogID=2090' of type 'website' is invalid because the given value '14194340826' for property 'fb:admins' could not be parsed as type 'fbid'.
14194340826 is the id of a Facebook group – but groups can not be “administrators” of anything, just normal user accounts can be.