这个文字覆盖是使用Facebook Open Graph完成的吗？

Question

大家好，

我查看了此博客文章的源代码，而开放图形图片代码不包含我在屏幕截图中突出显示的文字。是否有一个特殊的开放图形标签来添加文字叠加？还是以不同的方式完成？

以下是博文的链接：http://www.barakabits.com/2014/04/meet-woman-behind-e-middle-east

提前致谢！ 瓦利德

Answer 1

看看这些api链接，看起来就是您所需要的。

https://developers.facebook.com/docs/marketing-api/reference/ad-creative-link-data-image-overlay-spec/ https://developers.facebook.com/docs/marketing-api/reference/ad-creative-link-data-image-layer-spec/

Answer 2

Facebook尚未提供此功能的选项。

您可以使用PHP GD Library函数来准备和使用带有覆盖层的开放图形图像。

要获得类似您提供的屏幕截图的输出，您需要一个源图像和一个透明的覆盖图像。然后将它们合并到最终的打开图形图像中。

为此，您需要imagecopy()函数。

<?php

$src = imagecreatefromjpg('source-image.jpg');
$overlay = imagecreatefrompng('transparent-overlay.png');
$overlay_x = 0; // The position of overlay in X axis
$overlay_y = 480; // The position of overlay in Y axis
$overlay_width = 1200;
$overlay_height = 630;


imagecopy($src, $addition, $addtion_x, $addition_y, 0, 0, $overlay_width, $overlay_height);

header('Content-Type: image/png');

imagepng($src);

// Free up the memory
imagedestroy($src);
imagedestroy($overlay);

?>

如果您想在WordPress网站（例如您提到的源网站）上使用此功能，则可以按照本教程进行操作。

https://itsmereal.com/automated-open-graph-image-overlay-for-wordpress

或从Github使用此插件

https://github.com/itsmereal/og-image-overlay