Meta property sharing link on whatsapp is not working - javascript

Until today I did not know how to show an image when sharink a link on whatsapp.
I have this site:
https://vivepuravida.com/propiedad/casa-escazu-41-apartamento-115k/
You can check I have this on the head tag:
<meta property="og:url" content="https://vivepuravida.com/propiedad/casa-escazu-41-apartamento-115k/">
<meta property="og:type" content="website">
<meta property="og:title" content="Testing sharing">
<meta property="og:image" itemprop="image" content="https://image.wasi.co/eyJidWNrZXQiOiJzdGF0aWN3Iiwia2V5IjoiaW5tdWVibGVzXC9ncjgwMjkyMDIxMDEwNjExNDgxNS5qcGciLCJlZGl0cyI6eyJub3JtYWxpc2UiOnRydWUsInJvdGF0ZSI6MCwicmVzaXplIjp7IndpZHRoIjo5NzksImhlaWdodCI6NzQzLCJmaXQiOiJjb250YWluIiwiYmFja2dyb3VuZCI6eyJyIjoyNTUsImciOjI1NSwiYiI6MjU1LCJhbHBoYSI6MX19fX0=">
As you can see the og:image is set with another picture took from another site.
But when sharing my website on whatsapp, it only displays my website icon.
Can anyone help me?
Thanks!

Try resizing the image to 400×400 and convert to .png or .jpg formats.

Related

How can i create Featured Image function in core php not in wordpress

There is a function for every page in wordpress so if we share link in other websites then it fetches title, description and featured image of that page / post, but i wanna make this functionality in core php not in wordpress, how can i make it so when i share link to other website then it fetches only that one featured image ? without featured image functionality it fetches only logo.
please could you help me?
If I understand correctly, all you need to do is add OpenGraph on your PHP/HTML header.
<meta property="og:title" content="Your desired title" />
<meta property="og:description" content="Some sentences here" />
<meta property="og:url" content="https://www.yourdomain.com/filename.php" />
<meta property="og:site_name" content="rumahweb.com" />
<meta property="og:image" content="https://www.yourdomain.com/featured-image.png" />
Insert above code (and adjust the value as necessary) inside your HEAD section of your HTML/PHP file.

Twitter card not working even after validation

I want to add a Twitter button on my website to share content, as well as a Twitter card. I've already added the meta tags.
Here is the code for my share button:
Tweet
This is the code for the meta tags I've added as well:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#nytimes">
<meta name="twitter:creator" content="#SarahMaslinNir">
<meta name="twitter:title" content="When Great Minds Don’t Think Alike">
<meta name="twitter:description" content="How much does culture influence creative thinking?">
<meta name="twitter:image" content="http://176.32.230.11/trialandtest.com/assets/images/profile-img.jpg">
Here is the link to my site:
http://176.32.230.11/trialandtest.com/
I'd be grateful if someone could assist me as to where I am going wrong, because I have my URL whitelisted on Twitter, but when I try to share something it does not share the content on the preview window and shares the old one.
Your share url should be dynamic. I think when you click on the share button it is taking your static url ie. http://176.32.230.11/trialandtest.com

google+ pick wrong image in dialog when I share

I am trying to make a button share google+ with title, description and image. Everything works fine but only image that google+ pick wrong.
Here my code:
<meta property="og:type" content="website" />
<meta property="og:title" content="{title}" />
<meta property="og:image" content="{image}" />
After that I test and know that Google+ will pick image with largest size in your page.
Do you have any solution?

How to change the image thumbnail dynamically by using Facebook web SDK

Facebook development newbie.
I have added the meta tags to the html file which I want to share to Facebook.
like:
<meta property="og:type" content="article"/>
<meta property="og:title" content="title"/>
<meta property="og:description" content="description"/>
<meta property="fb:app_id" content="23232323323232"/>
<meta property="og:image" content="https://fajfladjfaljafl.jpg/>
I want to make the image thumbnail in Facebook profile different for different people. For example, people can do a small test here then share the result to Facebook, the image thumbnail should be the test result of that person. So how can I do this.
Now I am thinking to generate a new webpage within specific meta property for that person every time. But this's so dump!
Can I change <meta property="og:image" content="https://fajfladjfaljafl.jpg/> automatically when people share it to Facebook? or any other ideas?
Thank you very much!!
Hi everyone:
I am doing this via feed dialog. As what #Mosh Feu and #CBroe said, it doesn't make sense to change meta data.
I am using feed share link
https://www.facebook.com/dialog/feed?app_id=APP_ID&link=URL&picture=THUMBNAIL_URL&name=NAME&description=DESCRIPTION&caption=CAPTION&redirect_uri=REDIRECT_URI
to define the parameters every time.

Facebook still shows small thumbnail with og meta tags in place

I have a page on my website that is located at domain.com/mypage.html
I would like to do a link share with this link so that the ad is displayed but the whole image is still a link to our actual web page. The problem is that Facebook will still display the image in a small thumbnail like before they added the new larger link shares last year.
I have added all the og meta tags for the image, I have made sure the image has an aspect ratio of 1.91:1 with an actual size of 1200x627. The titles and description tags all have very little text so they are within the character limit.
I have refreshed the Facebook crawler's copy of the page with the Facebook Debugger/Linter tool.
Nothing I do changes how Facebook will display this link-share. It will never display in the larger format.
Here are meta-tags in mypage.html:
<meta property="og:image" content="http://www.domain.com/images/fb_ad.jpg"/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:url" content="http://www.domain.com/mypage.html"/>
<meta property="og:title" content="My Title"/>
<meta property="og:description" content="My Description"/>

Categories

Resources