Basically, I am making a website which has dynamic og:image property. I have added 100 images and changing the images by rand function in PHP.
The problem I am getting is that Facebook have cached my website and everytime user shares the URL, it shows the same image every time. I want Facebook to recrawl everytime the link is posted and shows random images.
Here is the code of the page I have developed:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="twitter:card" value="summary">
<meta property="fb:app_id" content="xxxxxxxxxxxxx10" />
<meta property="og:description" content="Like it? Share with friends... "/>
<meta property="og:title" content="Your future company is" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://justtodo.xyz/company/" />
<?php
$imageURL = 'http://justtodo.xyz/company/images/' . rand(1, 100) . '_260x135.jpg';
?>
<meta property="og:image" content="<?php echo($imageURL)?>" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-100487432-1', 'auto');
ga('send', 'pageview');
</script>
<script src="https://code.jquery.com/jquery-1.7.1.min.js" integrity="sha256-iBcUE/x23aI6syuqF7EeT/+JFBxjPs5zeFJEXxumwb0=" crossorigin="anonymous"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxx10',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.9'
});
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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.api('https://graph.facebook.com/', 'post', {
id: '<?php echo($imageURL)?>',
scrape: true
}, function(response) {
//console.log('rescrape!',response);
});
</script>
<title>Your future company...</title>
<META HTTP-EQUIV="REFRESH" CONTENT="0; URL=https://youtu.be/uqJNjb-zg3s">
<script>
setTimeout(function () {
window.location.href = "https://youtu.be/uqJNjb-zg3s";
},10);
</script>
</head>
<body>
<div style="text-align: center;font-size:2em;font-family:Consolas, Andale Mono, Lucida Console,Lucida Sans Typewriter, Monaco, Courier New, monospace">Loading your company...</div>
</body>
</html>
Do you only have 100 pictures? I already have over 500 and I also want to know how you do it. This "Facebook comments game" has already turned into a fever. Well, as far as I've researched, there are 3 ways to change the Facebook cache image.
1.) Every 24 hours Facebook searches for a new image automatically (this is not useful for us).
2.) Using https://developers.facebook.com/tools/debug/ (I think we could do with the "extract again" button is in infinite loop, but I do not know how to do this and besides this only works while we have the site open in the browser).
3.) You can request the update with this AJAX code:
Var fbxhr = new XMLHttpRequest ();
fbxhr.open ("POST", "https://graph.facebook.com", true);
fbxhr.setRequestHeader ("Content-type", "application / x-www-form-urlencoded");
fbxhr.send ("id = http: //you_site.com/&scrape=true");
This JavaScript code plus this tag:
<Meta http-equiv = "refresh" content = "0"/>
And with this PHP code:
<Meta property = "og: image" content = "<? Php echo 'http://your_site.com/'.mt_rand(1,100).'.jpg';?>"/>
This causes the page to be updated every 0 seconds and receive a new random image that can be named from "1.jpg" to "100.jpg".
Then request via AJAX that the image be updated.
You can also do the loop inside the Javascript itself, but you would have to make PHP out to be called inside the loop. I just have not tested it yet.
My problem is: this only works while I have my site open in the browser giving infinite refresh.
Edit: The response of this post was on 06/03/2017 the same day that this game began to appear. Only I do not understand anything about Python. Can you tell me how to put Python in my HTML?
Link: Dynamic Image for Facebook Opengraph og:image meta tag
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..
I've just added facebook meta tags to my news.php page. This file also dynamically generates article (urls) pages under it. But how am i to set the title for the fb meta tag in the head (ie. <meta property="og:title" content="<?php echo $data[0]['title']; ?>" />) when the $data is getting defined / populated lower down in the body?
How do so many sites do it?
Would be grateful for any guidance on this.
Below is the code for my page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<meta property="fb:app_id" content="6666666666666"/>
<meta property="og:title" content="<?php echo $data[0]['title']; ?>" />
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '66666666666666',
xfbml : true,
version : 'v2.5'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<header>
<div class="contentwrap">
<article>
<h1>- News- </h1>
<?php
if (isset($_REQUEST['id'])) {// user gets here by clicking on link with id
$id_raw = trim(htmlentities($_REQUEST["id"]));
$data = news_data_id($conn, $id_raw);
?>
<h2><?php echo $data[0]['title']; ?></h2>
<img src="<?php echo $data[0]['filepath'];?>" style="float: left; max-height: 5em; margin: 0.5em 0.5em 0.5em 0; -webkit-shape-outside: circle(50%); shape-outside: circle(50%);">
<p><?php echo $data[0]['body']; ?></p>
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="false">
</div>
<?php }
else {
(continues)
I guess the best option to switch your website to mvc structure here is detailed article whot is mvc pattern: http://www.sitepoint.com/the-mvc-pattern-and-php-1/
For now without major changes you can change yoru news.php structure so that it will retrieve all content php data at the top before html part, so in that case you will have your $news variable at all places of your html and can easily create mattes and show content in body
You'll have to use Output buffering control in your whole site to handle this.
Basically ob_start() on the first life of your file and ob_get_clean() to retrieve everything outputted during the execution.
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.
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">