Hello all,
I checked the source code of this blog post and the open graph images tags do not include the text that I've highlighted in the screen shot. Is there a special open graph tag to add text overlays? Or is it done in a different way?
Here's the link to the blog post: http://www.barakabits.com/2014/04/meet-woman-behind-e-middle-east
Thanks in advance!
Waleed
Take a look at these api links, looks like it's what you need.
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/
Facebook does not provide an option for this feature yet.
You can use PHP GD Library functions to prepare and use open graph images with an overlay.
To get an output like the screenshot you provided, you need a source image and a transparent overlay image. Then merge them together to the final open graph image.
For that you need imagecopy() function.
<?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);
?>
If you want to use this feature on a WordPress website (like the source website you mentioned) you can follow this tutorial.
https://itsmereal.com/automated-open-graph-image-overlay-for-wordpress
or use this plugin from Github
https://github.com/itsmereal/og-image-overlay
Related
Links from Facebook to my Mediawiki-powered website show an ugly default image for links. (The squarish image which shows a truncated "Powered by Mediawiki") pointed to by the gray arrow.)
How do I override this? I'm looking for a single image which would be the same for all pages rather than a custom image for each page. I want to avoid adding extensions if possible!
Added: #wgLogo is set and the logo file thus set does appear on the individual pages, but not on the FB link.
It seems that the secret is to set <meta property='og:image'… on every page (https://developers.facebook.com/docs/sharing/webmasters/images/).
To do so without installing extensions, add to your LocalSettings.php:
$wgHooks ['BeforePageDisplay'] [] = function (OutputPage &$out, Skin &$skin): bool {
$out->addMeta ('og:image', '(path to your image)');
return true;
};
Further reading:
https://www.mediawiki.org/wiki/Manual:Hooks/BeforePageDisplay
https://doc.wikimedia.org/mediawiki-core/master/php/classOutputPage.html#a1d667167a39be62f9988e94256508489
The PageImages extension adds the most prominent image used on the page as the OpenGraph image. The WikiSEO extension lets you set it manually (per-page or sitewide).
Im working on a website using typo3 and the image handler being used is GraphicMagick. At an certain page im displaying an Latest view news item.
This news item contains an media pdf file.
So when I visit that page I will see an Thumb of that pdf since that is being created by GraphicMagick and stored in my typo3temp folder.
Now the real question is.. that this gif file, is like 10-15% transparent at the top.
I have no idea how this comes.. the settings in the installation tool look similar to the onces I use on a different website.
Did anybody see this before and knows how I might resolve this ?
I'm using the following versions:
Typo3: 6.2.11
imagehandler: Graphics Magick
[GFX][thumbnails_png] = 1
Solved it for me, gifs gave me a problem
This code is processed as goku image on FB chat:
[[236823566443944]][[236823583110609]][[236823586443942]][[236823596443941]][[236823609777273]]
[[236823629777271]][[236823636443937]][[236823649777269]][[236823663110601]][[236823673110600]]
[[236823683110599]][[236823686443932]][[236823696443931]][[236823699777264]][[236823709777263]]
[[236823716443929]][[236823733110594]][[236823736443927]][[236823749777259]][[236823753110592]]
[[236823756443925]][[236823759777258]][[236823769777257]][[236823779777256]][[236823783110589]]
[[236823789777255]][[236823793110588]][[236823796443921]][[236823806443920]][[236823809777253]]
How FB creates image from this? I found the code on symbols-n-emoticons in comments below, copied&pasted into FB chat and - black magic - the image was there.
So I took your example and did some testing. If yout right click on the image in chat and look at it URL, you can find following:
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/227547_236823636443937_1841629131_n.jpg
It's one tile from the goku image. The middle part of the URL corresponds to one value in you code. So this code are actually shortcuts to images stored on FB servers, and the chat window simply replaces the code with image.
I think it could be due to latest update in FB, which allows you to attach images directly to posts.
[EDIT]
I have tried several other images and it worked for all images hosted akamaihd.net aka Facebook hosting. Just grab the secod number and past it in chat in double brackets.
The image is always resized to 16x16px, hence the code for Goku is so long, it's actually made from tiles.
So I want to make a facebook profile photo its actual size:
https://sphotos-b.xx.fbcdn.net/hphotos-snc6/179672_10151462004583896_870987263_n.jpg
here's the photo.
I know that you can insert java script somewhere to make it this way, but I don't know what the javascript IS nor do I know where to put it on facebook.
Help
Thank you!
Do you mean on your webpage?
var Img = document.getElementById('ImgId');
if(Img && Img.style) {
Img.style.height = '200px';
Img.style.width = '100px';
}
If you just want to resize you can use paint, photoshop or online services like picresize and cutmypic!!
I'm using TinyMCE for the first time, and I love it, but is a bit closed.
I'd like to get images resized by default, this is, when adding an image, put it by default on 300px width, for example (then the user can make it bigger or smaller dragging).
I don't know where to touch! Is there a command within the lists of images (the js you can attach to make TinyMCE show a list of images)? Or I have to hack css? Or I have to dive into TinyMCE code?
Thank you in advance
Marc
If you are OK with changing code files then proceed as follows
Open tiny_mce/plugins/advimage/js/image.js
Locate insertAndClose : function()
Insert after
var ed = tinyMCEPopup.editor, ......;
if(f.width.value == ""){
f.width.value = 300;
}
Hope it helps!
There are several options. I would go the css way. Check out the tinycme init configuration setting content_css. Using an additioanl own css file enables you to setthe width of images to 300px easily.