share image content and url on whatsapp from web s

问题:

WhatsApp share a link, content and image this can be done by using og tags i.e. open graph tags

<meta property="og:title" content="title" />
<meta property="og:description" content="Description for image" />
<meta property="og:url" content="https://myurl.com" />
<meta property="og:image" content="https://myurl.com/imagepth" />

But this has limitation, we can share only one image

I want something as like of facebook sharer link which can share image content url

https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmyurl.com%2F

I am having multiple links with images content on one page I want set option for each block to be share on WhatsApp as like of facebook sharer

Using og tag we can share single image content from one page

but I need separate link for each block to be share as shown share button on reference image above

回答1:

One possible solution is to have separate "share" pages for each shareable entity. Each page can contain the og tags (especially an image) for the single box/button which links there.

Since the shared URL may then look like example.org/shared.php?id=1 it is also the URL the user will access if they click on the shared block on facebook/whatsapp. You have two possibilities to deal with this situation:

1. Provide a "detail" page for every of your shareable entities, but I guess there are no detail pages in your current setup and based on the size of your boxes you may not want them.
2. Redirect to your "list" page, if the useragent is nothing related to whatsapp/facebook. This case whatsapp/facebook "sees" the HTML containing the og tags and when real users enter the page they are redirected to the list page.

回答2:

I would go this way as I believe it is worth a try. I'll be writing in in PHP but you could translate this for any server interpreted language:

a) Provide an url encoded ID for each page to share, like 1, 2, 3 and so on:

<a href="whatsapp://send?text=http://mywebsite.com?page-id=1" data-action="share/whatsapp/share">Share via Whatsapp</a>

b) In PHP you check for page-name and print open graph tags accordingly, so that when watsapp will access your page it will believe it's for a certain sub-page you just shared:

So, right befoe closing HTML head tag, switch all cases of page-id to determine what was shared:

if (isset($_GET['page-id'])) {
   switch ($_GET['page-id']) {
      case 1:
        $og_tags = '<meta property="og:title" content="title1" />';
        $og_tags .= '<meta property="og:description" content="Description for image 1" />';
        ...
        break;
        // and so on for the rest of the pages
   }
}

echo $og_tags; ?>
</head>