0
Good afternoon, in my html project, I put a button that when I click it shares in Whatsapp with the title I put, I wanted it to share and appear my content, showing the title, the description... like the globe when sharing in Whatsapp, appears the title, description, image, link
You could do that?
code:
<div class="hidden-lg hidden-md">
<a data-action='share/whatsapp/share' href='"whatsapp://send?text=" + data:post.title + "-" + data:post.url'>compartilhar</a>
</div>
4
It seems to me these " are wrong, I do not know which framework is the one that used:
<a data-action='share/whatsapp/share' href='"whatsapp://send?text=" + data:post.title + "-" + data:post.url'>compartilhar</a>
A basic link should be something like:
<a href="whatsapp://send?text=Texto%20http%3A%2F%2FMEUSITE/MINHAPASTACAMINHO/">
Compartilhar no Whatsapp
</a>
Note that %20 represents space, I will explain after that
If you want to quote (") use after protocol (protocol is the prefix of urls, for example file:///, http://, whatsapp://), in your example you added " before whatsapp://, which doesn’t make much sense, unless it’s some front-end framework or wordpress plugin.
Links when enabled/clicked automatically encode the URL, but in possible situations it would be necessary to use things like javascript functions window.encodeURIcomponent (I’ll edit it later and put an example), however it is likely that it will not be necessary, note that the " is needed only when you use " (quotes), if using apostrophe is not necessary, then do so:
Note I tested both examples below on iPhone and worked, showed customized, minus the thumbnail photo because the link does not have.
<a href="whatsapp://send?text="Texto"%20http%3A%2F%2Fpt.stackoverflow.com/a/147442/3635">
Compartilhar no Whatsapp
</a>If you’re gonna use an apostrophe, just do it like this:
<a href='whatsapp://send?text="Texto"%20http%3A%2F%2Fpt.stackoverflow.com/a/147442/3635'>
Compartilhar no Whatsapp
</a>To do this it is necessary to use og meta-tags, add this to the headers:
<!DOCTYPE html>
<html>
<head>
<title>Titulo da página</title>
<meta property="og:site_name" content="Nome do site">
<meta property="og:title" content="Titulo da página">
<meta property="og:description" content="Descrição">
<meta property="og:image" itemprop="image" content="http://URL COMPLETA DA IMGEM/photo.jpg">
<meta property="og:type" content="website">
</head>
<body>
If the image comes from an HTTPS server, for example https://site/image.jpg, it may be necessary to use og:image_secure (documentation http://ogp.me/#Structured):
<!DOCTYPE html>
<html>
<head>
<title>Titulo da página</title>
<meta property="og:site_name" content="Nome do site">
<meta property="og:title" content="Titulo da página">
<meta property="og:description" content="Descrição">
<meta property="og:image:secure_url" itemprop="image" content="https://URL COMPLETA DA IMGEM/photo.jpg">
<meta property="og:type" content="website">
</head>
<body>
Note that it is possible to add more than one
og:image, but not all "customers" (like facebook, Whatsapp, etc.) will recognize more than one image.
Friend I managed to do here, thank you for your attention
Browser other questions tagged html whatsapp
You are not signed in. Login or sign up in order to post.
What framework is this? It’s javascript generating HTML?
– Guilherme Nascimento
In Whatsapp for iPhone/iOS does not appear, maybe it is something own from Whatsapp for android that detects the content alone
– Guilherme Nascimento
Ah... this framework is bootstrap 3
– Nathan
I’m not talking about HTML, I’m asking about the framework that generates uses these
data:. Bootstrap is just a visual framework, you must be using some add-on for bootstrap, as this ae is not pure HTML.– Guilherme Nascimento
So, I took from a site, copied and pasted do not know tell which is but was explaining how to put in wordpress, right here in the forum has explaining how to place to share, I wanted it share the current url.
– Nathan
I get it, but it still doesn’t make sense
data:post.title, is a wordpress plugin? Or copied so from somewhere randomly? I made an answer, see if help.– Guilherme Nascimento
Just to be aware " is = a "
– Marco Souza
Nathan updated the answer, I think he’s missing the meta-tags
og:– Guilherme Nascimento