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..
Related
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.
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
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 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">