Hello,
You've probably noticed that posting links on Facebook often fails to load a preview image, and worse, you probably gave up and posted images directly to Facebook; loosing the link back to your finely curated gallery.
There is a solution (and should really be added to Bootstrap, etc.)!
Steps:
1. Go to https://developers.facebook.com/tools/debug/ and load the same URL.
2. Go to Facebook and re-post the link.
3. Enjoy a beer.
There are plugins for Drupal, WordPress, etc., that actually automate this process. It seems important enough to me that it should be a stand alone extension on the image properties page, and the same functionality built-in to the components of the web site that use it, like @philb 's excellent Bootstrap.
Piwigo version: 2.9
PHP version: 5.6.25
Offline
Maybe they need to access debug tool to create a "preview image" only for URL's that do not specify an open graph meta ( http://ogp.me/ ) og:image in the head of the page? You should test that.
Last edited by eliz82 (2017-09-12 10:50:03)
Offline
Is anyone aware of a plugin that automates the process of getting the FB crawler to see a piwigo image from the first share?
Offline
I have been using the "Share This" plugin since I switched from Flickr to Piwigo in November 2018. My normal workflow is to post a photo on Piwigo, and then syndicate it to Tumblr and Facebook. Recently, the preview image is not showing up in Facebook.
It's possibly a change in Facebook, or a change in Piwigo. I suspect Piwigo, because I recently upgraded.
> Environment
> Piwigo 2.9.5
> Operating system: Linux
> PHP: 7.2.17 (Show info) [2019-04-25 17:52:54]
> MySQL: 10.2.23-MariaDB [2019-04-25 11:52:54]
> Graphics Library: External ImageMagick 6.7.8-9
Following the suggestion ...
> 1. Go to https://developers.facebook.com/tools/debug/ and load the same URL.
... the image preview doesn't show up there, as it did last week.
I'm mostly on the Elegant theme, and tried Bootstrap_Darkroom to see if there was different result. The Facebook debug hasn't shown anything different.
Can anyone suggest further diagnostics?
Offline
I found this thread and said, yes, this! What this guy posted, we need this. Then I realized, it was me...
Edit: This may have more to do with Bootstrap Darkroom. I don't know if it's possible to add programming logic to themes, but @teekay may have some knowledge of this.
#sadness
Last edited by gnurob (2019-07-23 04:17:04)
Offline
HI,
I try to add some info in my header for being understandable by Twitter. So I've adding both Twitter card informations mixed with Open Graphics informations as described in the get starting with twitter card page.
Here, what I have added in the personal template which is used instead of header.tpl
note this part does already exist in the default template :
{if isset($U_CANONICAL)} <link rel="canonical" href="{$U_CANONICAL}"> {/if}
You just need to replace the above code by this
{if isset($U_CANONICAL)} <link rel="canonical" href="{$U_CANONICAL}"> {if strpos($U_CANONICAL,'/')===0} <meta property="og:url" content="YOURGALLERYBASE_URL{$U_CANONICAL}" /> {else} <meta property="og:url" content="YOURGALLERYBASE_URL/{$U_CANONICAL}" /> {/if}{/if} <meta property="og:title" content="{if $PAGE_TITLE!=l10n('Home') && $PAGE_TITLE!=$GALLERY_TITLE}{$PAGE_TITLE} | {/if}{$GALLERY_TITLE}" /> {if isset ($current.selected_derivative)} <meta property="og:image" content="YOURGALLERYBASE_URL/{$current.selected_derivative->get_url()}" /> {/if} <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:creator" content="@YOURTWITTERACCOUNT" />
And replace this terms by your gallery informations:
@YOURTWITTERACCOUNT by your twitter account
YOURGALLERYBASE_URL by the base URL of your gallery (for me https://www.photolib.fr without last "/")
Last edited by photonoxx (2019-12-17 18:57:58)
Offline
Hi Photonoxx,
That is an excellent suggestion. If you're interested, Facebook has similar meta tag uses, called Open Graph. Here's a link: https://developers.facebook.com/docs/sh … ebmasters/
On my other web site, it looks like this:
<meta property="og:street-address" content="_____" />
<meta property="og:site_name" content="_____" />
<meta property="og:phone_number" content="_____" />
<meta property="og:email" content="_____" />
<meta property="og:country-name" content="Canada" />
<meta property="og:postal-code" content="_____" />
<meta property="og:region" content="Newfoundland and Labrador" />
<meta property="og:locality" content="St. John's" />
<meta property="og:longitude" content="-52.693448" />
<meta property="og:latitude" content="47.605193" />
<meta property="og:url" content="_____" />
<meta property="og:type" content="company" />
<meta property="og:image" content="_____here I use a company logo, but it could be per image_____" />
<meta property="og:description" content="_____" />
<meta property="og:title" content="_____" />
Offline
gnurob wrote:
Hi Photonoxx,
That is an excellent suggestion. If you're interested, Facebook has similar meta tag uses, called Open Graph. Here's a link: https://developers.facebook.com/docs/sh … ebmasters/
On my other web site, it looks like this:
<meta property="og:street-address" content="_____" />
<meta property="og:site_name" content="_____" />
<meta property="og:phone_number" content="_____" />
<meta property="og:email" content="_____" />
<meta property="og:country-name" content="Canada" />
<meta property="og:postal-code" content="_____" />
<meta property="og:region" content="Newfoundland and Labrador" />
<meta property="og:locality" content="St. John's" />
<meta property="og:longitude" content="-52.693448" />
<meta property="og:latitude" content="47.605193" />
<meta property="og:url" content="_____" />
<meta property="og:type" content="company" />
<meta property="og:image" content="_____here I use a company logo, but it could be per image_____" />
<meta property="og:description" content="_____" />
<meta property="og:title" content="_____" />
Hi,
Thanks for the additional og: tag, for the moment, I decide to use only essential og: tag but it's nice to know
Offline
Ah, I am now realizing they both use Open Graph. That's good to know; your suggestion will work for both.
Cheers
Offline
gnurob wrote:
Ah, I am now realizing they both use Open Graph. That's good to know; your suggestion will work for both.
Cheers
Yes, but Facebook now seems to work even without open graph tag (twitter not sure, except if it take a long time to display associated image to a web address), but it's probably better to have them.
Offline
Hi, sorry, I didn't understand, I'm not a developer. How can I fix this? For example I have to post this image on facebook, what is the correct link to get the correct preview and the link to the website? https://archiviocitterio.it/foto/pictur … ategory/82
thanks!
Last edited by colomba (2020-03-01 18:47:15)
Offline
in your theme ur using add this to the header.tpl
{if isset ($current.selected_derivative)}
<meta property="og:image" content="https://yoursebsite.com/{$current.selected_derivative->get_url()}" />
<meta property="og:image:secure_url" content="https://yoursebsite.com/{$current.selected_derivative->get_url()}" />
<meta property="og:url" content="https://yoursebsite.com/{$current.selected_derivative->get_url()}" />
{else}
<meta property="og:image" content="https://yoursebsite.com/selected-image-for-google.jpg" / >
<meta property="og:image:secure_url" content="https://yoursebsite.com/selected-image-for-google.jpg" />
<meta property="og:url" content="https://yoursebsite.com" />
{/if}
change the links yoursebsite.com/ to your website
and replace selected-image-for-google.jpg with your own image location
and it will post the correct image to probaly all twitter facebook etc
Offline
Additionally, a new plugins by ddtddt seems to try to manage this.
It's still in beta phase, but it could be tested too.
https://piwigo.org/ext/extension_view.php?eid=889
Offline
photonoxx wrote:
Additionally, a new plugins by ddtddt seems to try to manage this.
It's still in beta phase, but it could be tested too.
https://piwigo.org/ext/extension_view.php?eid=889
this looks very interesting ;)
Offline