Share the content [closed]

Navigation
0

Good afternoon, in my html project, I put a button that when it clicks it shares in whatsapp with the title that I put, I wanted it to share and it would appear my content, showing the title, the description ... equal to globe when you share in whatsapp, the title, description, image appears in the link

Would you be able to do this?

code: 

<div class="hidden-lg hidden-md">
   <a data-action='share/whatsapp/share' href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url'>compartilhar</a>
</div>
    
asked by anonymous 16.08.2016 / 19:58

1 answer

4

As it seems to me these &quot; are wrong, I do not know what framework this is that used: 

<a data-action='share/whatsapp/share' href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url'>compartilhar</a>

A basic link should look something like: 

 <a href="whatsapp://send?text=Texto%20http%3A%2F%2FMEUSITE/MINHAPASTACAMINHO/">
     Compartilhar no Whatsapp
 </a>
  

Note that% 20 represents the space, I will explain after that

If you want to use quotation marks ( &quot; ) use after the protocol (protocol are url prefixes, for example file:/// , http:// , whatsapp:// ), in your example you added &quot; whatsapp:// , which does not make much sense, unless it is some front-end framework or plugin for wordpress.

Links when activated / clicked automatically encode the URL, but in some situations it would be necessary to use things like javascript window.encodeURIcomponent functions (I'll edit later and put an example), however not necessary, note that &quot; is only needed when using " (quotes), if you use apostrophe is not necessary, then do this:

  

Note I tested both examples below on the iPhone and worked, showed custom, minus the thumbnail because the link does not have it. 

<a href="whatsapp://send?text=&quot;Texto&quot;%20http%3A%2F%2Fpt.stackoverflow.com/a/147442/3635">
    Compartilhar no Whatsapp
</a>

If you use apostrofo, just do it: 

<a href='whatsapp://send?text="Texto"%20http%3A%2F%2Fpt.stackoverflow.com/a/147442/3635'>
    Compartilhar no Whatsapp
</a>

How to display a preview of content in WhatsApp:

To do this you need to use the 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 , you may need to use og:image_secure (documentation link ) : 

<!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 "clients" (such as facebook, whatsapp, etc.) will recognize more than one image.

    
16.08.2016 / 20:26
Choose which fragment will be shown in the activity how to call stored procedure with linq