时间戳

首页 > 解决方案 > LPMetadataProvider/LinkPresentation：如何在 Slack/WhatsApp 上使用自定义图像/图标，...？

swift - LPMetadataProvider/LinkPresentation：如何在 Slack/WhatsApp 上使用自定义图像/图标，...？

问题描述

我按照这里的教程（https://richkolasa.netlify.app/posts/2019/07/composing-rich-link-previews-using-linkpresentation-in-swift/） - 我尝试与自定义预览图像共享一个 URL .

它可以在共享表预览中显示“我的”图像，当与 iMessage 共享时，一切都可以正常工作。但是例如 WhatsApp 和 Slack 不起作用，它们显示“默认”预览图像。

这对我来说很有意义，因为他们应该如何了解 Apple 特定的东西；不过，我很好奇是否有办法为 3rd 方应用程序更改它，并且这种方式让用户感到困惑：预览显示的内容与最终共享的不同。

完整的 ViewController 代码：

import LinkPresentation
import UIKit

class ViewController: UIViewController, UIActivityItemSource {
    var metadata: LPLinkMetadata?

    // The placeholder the share sheet will use while metadata loads
    func activityViewControllerPlaceholderItem(_ activityViewController: UIActivityViewController) -> Any {
        return "Giant Panda!!!!!!"
    }

    // The item we want the user to act on.
    // In this case, it's the URL to the Wikipedia page
    func activityViewController(_ activityViewController: UIActivityViewController, itemForActivityType activityType: UIActivity.ActivityType?) -> Any? {
        return self.metadata?.url
    }

    // The metadata we want the system to represent as a rich link
    func activityViewControllerLinkMetadata(_ activityViewController: UIActivityViewController) -> LPLinkMetadata? {
        return self.metadata
    }

    @IBAction func shareTapped(_ sender: Any) {
        let url = URL(string: "https://en.wikipedia.org/wiki/Giant_panda")!
        LPMetadataProvider().startFetchingMetadata(for: url) { linkMetadata, _ in
            DispatchQueue.main.async {
                LPMetadataProvider().startFetchingMetadata(for: URL(string: "https://upload.wikimedia.org/wikipedia/commons/8/8d/Lightmatter_panda.jpg")!) { imageMetadata, _ in
                    linkMetadata?.imageProvider = imageMetadata?.imageProvider
                    linkMetadata?.iconProvider = imageMetadata?.imageProvider
                    self.metadata = linkMetadata
                    let activityVc = UIActivityViewController(activityItems: [self], applicationActivities: nil)
                    DispatchQueue.main.async {
                        self.present(activityVc, animated: true)
                    }
                }
            }
        }
    }
}

标签： swift

解决方案

您需要了解 Open Graph 元数据。WhatsApp、Facebook 等所有应用程序都尊重它并相应地呈现链接。

使用 LinkPresentation 框架，您可以执行以下操作：

  1. 获取任何链接的打开图元数据，并在您的应用程序中丰富地呈现链接。
  2. 将元数据传递到本机共享屏幕以立即呈现元数据而无需获取。

如果您不是链接的所有者并且它没有元数据，则您无法添加自己。

如果您是链接的所有者，您应该做的第一件事是添加元数据。它将自动在 whatsapp 等应用程序中呈现。

在此处附加示例元数据。

<HTML>
<head>
<meta property="og:site_name" content="Colby Fayock" />
<meta property=“og:title” content=“Anyone Can Map! Inspiration and an introduction to the world of mapping - Colby Fayock" />
<meta property="og:description" content="Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply them to the world of…&quot; />
<meta property="og:url" content="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/" />
<meta property="og:type" content="article" />
<meta property="article:publisher" content="https://www.colbyfayock.com" />
<meta property="article:section" content="Coding" />
<meta property="article:tag" content="Coding" />
<meta property="og:image" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="og:image:secure_url" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="twitter:site" content="@colbyfayock" />
</head>
</HTML>

推荐阅读