I'm working on a webpage for a journal where people should be able to share the articles on Facebook. The sharing itself is working, but the problem is the content of the shared post.
What I know is that I have to provide the right meta for the Facebook api to work properly. So that's what I've done in PHP . It queries the database for the title, img source, description, etc... Then it fills those in <meta> tags. And I suppose the result is ok:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<meta name="app_id" property="fb:app_id" content="1056245557765877">
<meta name="ogtitle" property="og:title" content="اتفاقية تعاون لدعم طلاب الدكتوراه
بين مجلس البحوث واللبنانية الاميركية">
<meta name="ogtype" property="og:type" content="article">
<meta name="ogurl" property="og:url" content="http://alanwar.com/article.php?categoryID=6&articleID=296870">
<meta name="ogimage" property="og:image" content="http://alanwar.com/issues/2693/296870_55117_s.jpg ">
<!--meta name="ogimage" property="og:image" content="#"/ -->
<meta name="ogname" property="og:site_name" content="Alanwar">
<meta name="ogdesc" property="og:description" content="وقعت الجامعة اللبنانية الأميركية (LAU) والمجلس الوطني للبحوث العلمية اتفاقية تعاون، في إطار دعم بعض الطلاب المتفوقين لدرجة الدكتوراه، ويتم التعاون بين الطرفين من خلال مركز الدراسات العليا والأبحاث في ...">
This is online , and I made sure the meta is written before the body is loading. Also here is the output from Facebook debug tool found here
Meta Tag <meta property="fb:app_id" content="1056245557765877" />
Meta Tag <meta property="og:title" content="اتفاقية تعاون لدعم طلاب الد... See More
Meta Tag <meta property="og:type" content="article" />
Meta Tag <meta property="og:url" content="http://alanwar.com/article.php?categoryID=6&articleID=296870" />
Meta Tag <meta property="og:image" content="http://alanwar.com/issues/2693/296870_55117_s.jpg " />
Meta Tag <meta property="og:site_name" content="Alanwar" />
Meta Tag <meta property="og:description" content="وقعت الجامعة اللبنانية الأ... See More
(Content copied form the debug page)
And the shared post in the debugger is displaying just like I want it to.
Now when I click share on the webpage for a real test, it only shares a link, no title, no image ... Although I think I followed the proper procedure.
Any ideas ?
Related
Is there a way to get link information through a link (title, subtitle, detail, pictures)?
Like the telegram and LinkedIn in telegram or LinkedIn when you put some link for posting or sending to channel or group you can see some detail of that link.
How can I do this for php code?
The only way to get information about that link is to crawl the page and then extract the data from special meta tags (<meta property="og:...") in the header, then display it accordingly. Perhaps you need a ready-made package that can do this, or even with jQuery you should be able to parse it. Below is the example of the tages generated on the current page:
<meta property="og:type" content="website">
<meta property="og:url" content="https://stackoverflow.com/questions/58146161/ability-to-get-article-link-information/58146431">
<meta property="og:site_name" content="Stack Overflow">
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<meta name="twitter:card" content="summary">
<meta name="twitter:domain" content="stackoverflow.com">
<meta name="twitter:title" property="og:title" itemprop="name" content="Ability to get article link information">
<meta name="twitter:description" property="og:description" itemprop="description" content="The only way to get information about that link is to crawl the page and then extract the data from special meta tags (<meta property="og:...") in the header, then display it accordingly. Perha...">
<meta name="twitter:app:country" content="US">
<meta name="twitter:app:name:iphone" content="Stack Exchange iOS">
<meta name="twitter:app:id:iphone" content="871299723">
<meta name="twitter:app:url:iphone" content="se-zaphod://stackoverflow.com/questions/58146161/ability-to-get-article-link-information/58146431">
<meta name="twitter:app:name:ipad" content="Stack Exchange iOS">
<meta name="twitter:app:id:ipad" content="871299723">
<meta name="twitter:app:url:ipad" content="se-zaphod://stackoverflow.com/questions/58146161/ability-to-get-article-link-information/58146431">
<meta name="twitter:app:name:googleplay" content="Stack Exchange Android">
<meta name="twitter:app:url:googleplay" content="http://stackoverflow.com/questions/58146161/ability-to-get-article-link-information/58146431">
<meta name="twitter:app:id:googleplay" content="com.stackexchange.marvin">
I have problem with Facebook's OG meta tags.
First of all I am not working with them first time.
Actually during last time (which was first time) everything went pretty well.
Now I am using exactly the same code structure and it's not working and I have no idea why.
Here is part of a code in head
<meta property="og:title" content="<? echo $nazwa; ?>">
<meta property="og:site_name" content="Turborura">
<meta property="og:image:type" content="image/jpeg">
<?
echo '<meta property="og:image" content="http://www.turborura.pl/'.$miniatura.'">'
?>
<meta property="og:image:width" content="640">
<meta property="og:image:height" content="360">
<meta property="og:description" content="<? echo $opis; ?>">
I am checking how Facebook sees my content in Facebook debugger for developers. And it sees only
<meta property="og:title" content="">
<meta property="og:site_name" content="Turborura">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image" content="http://www.turborura.pl/">
<meta property="og:image:width" content="640">
<meta property="og:image:height" content="360">
<meta property="og:description" content="">
Variables are downloading phrases to display from data base.
What is interesting that if I type some random phrases manually instead of variables then Facebook debugger sees them correctly.
You can say that variables aren't downloading correct phrases from data base but I am using them on the same page below in body and they're displaying correctly on website.
Also phrases are downloaded from data base and saved to variables before head so variables in head should already know what to display.
I design my website using html and php and MySQL , i use Open graph Meta tag to share my website on Facebook
<meta property="og:title" content="" />
<meta property="og:type" content="" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="fb:admins" content="" />
I use this meta tag in all page like news and essay , my problem is for example i want to share one of website news on Facebook and i want share correct content , when i try to share , its share content i used in meta tag , i want share my news title, image and content..
my website work dynamically with MySQL and all of my website content like image and text saved in database .
My Question is how dynamically change share content of separate page using Open Graph Meta tag or another thing .
I don't understand what exacly you want from us.
This can vary depending on how your site script work.
You must set og meta content like how you show page content.
For example:
<meta property="og:title" content="<?=$page['title'];?>" />
<meta property="og:type" content="<?=$page['type'];?>" />
<meta property="og:image" content="<?=$page['image'];?>" />
<meta property="og:url" content="<?=$page['url'];?>" />
<meta property="fb:admins" content="<?=$page['admins'];?>" />
when i share my site post in facebook then not show that post featured image in facebook. show different default image. how i can solve this? my site link
i already use this open graph code.. but it's not work
<meta property="og:title" content="Bangladesh Time">
<meta property="og:type" content="website">
<meta property="og:url" content="http://bangladeshtime.com/">
<meta property="og:image" content="http://bangladeshtime.com/_files/mainlogo.png" />
<meta property="og:description" content="">
<meta property="og:site_name" content="Bangladesh Time">
Your image is to small. The minimum image size is 200*200px regarding to the documentation.
Edit: In your website's markup i can't find the open graph tags. In addition, your markup is invalid:
<center><img src='http://bangladeshtime.com/head-test-eng.jpg'></center>
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
...
I have a lot of products and want to share each one with different title and description in Google plus instead of page meta tags. How can i do that?
Google+
Will recognize:
<meta itemprop="name" content="The page Title for sharing">
<meta itemprop="description" content="The description less than 200 characters">
<meta itemprop="image" content="http://www.yoursite.com/image-200x200.jpg">
Facebook
Open Graph Tags (Other Social networks read it too):
<meta property="og:image" content="http://www.yoursite.com/the-page-thumb-200x200.jpg" />
<meta property="og:title" content="The page Title for sharing" />
<meta property="og:type" content="website" /> (or "article")
<meta property="og:url" content="http://www.yoursite.com/the-url-for-sharing" />
<meta property="og:description" content="The Description less than 200 characters" />
<meta property="og:site_name" content="Your Site name" />
<meta property="fb:app_id" content="your-facebook-app-id" />
<meta property="fb:admins" content="your-facebook-user-id" />
Get app-id
# https://developers.facebook.com/
Login with your FB credentials and then setup a facebook app.
Use the Debug tool
# https://developers.facebook.com/tools/debug
to see how your Data is seen.
Twitter Tags
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="#publisher_handle">
<meta name="twitter:title" content="The page Title for sharing">
<meta name="twitter:description" content="The description less than 200 characters">
<meta name="twitter:creator" content="#author_handle">
<meta name="twitter:image" content="http://www.yoursite.com/image-200x200.jpg">
instead of page meta tags
You cannot. Google+ will only fetch data about the page from the page. You cannot override it with URI parameters or though any JS API.