• View
• Edit
• History
• Attach
• Print
• Backlinks

ShareButtons-Talk

Use case

At Virtour.fr - Visites Virtuelles (a virtual tours platform in France) I use this in the main website and documentation, but also in individual virtual tours.

The main skin is a slightly customized version of Skins:PmWiki-responsive so the (:share:) buttons markup is in the page Site.SkinElements in the section [[#skinheader]]. I want to set the title, and also I want the home page buttons to share the root URL https://virtour.fr/ without "Main/HomePage". Here is the conditional I use (simplified):

(:if name Main.HomePage:)
%rfloat% (:share url=https://virtour.fr/ title="Virtour.fr - visites virtuelles":) %%
(:else:)
%rfloat% (:share page="{*$FullName}" title="{*$Title} | Virtour.fr - visites virtuelles":)
(:if:)

The buttons appear floating right above/before the main heading and any breadcrumbs.

a.sharebuttons {
  display: inline-block;
  margin: 6px 0;
}

In individual tours, I have custom styles in a dialog box that opens when a visitor clicks on the "share" icon:

And I only use a subset of the buttons. --Petko January 27, 2020, at 01:30 PM

ShareButtons and B3 RSS feed

Perhaps this issue belongs to the SharingButtons page, but you might want to address it in B3. I use the SeaMonkey browser, which has built-in RSS feed rendering (Opera 12 had one too, I don't know about it now). So when I click the RSS feed link I don't see text but rendered HTML. Here's the issue. Markup (:share:) renders each button at 1000+ px size in black fill. The page looks really ugly and uninviting. Perhaps it's the same with other feed reader applications, I didn't try. It would be easy to fix this specific case in ShareButtons by adding width="24" after viewBox="0 0 24 24" for each sharing button SVG. However, doing so would fix the button size to 24px in all cases, so buttons wouldn't scale up anymore for all other uses. For the time being, I disabled loading ShareButtons on action "rss3b", just like you documented for Mini's LightBox but I'd prefer some way to keep the sharing links inside the feed, with reasonably-sized buttons. SteP January 24, 2020, at 09:30 PM

Thanks for your report. There were 2 more omissions. The automatic $B3['ShareMarkup'] = '            '; didn't work in RSS feeds. The button wrapping template is hardcoded and used <div> tags which rendered with a line break in RSS readers. This has been fixed in the latest version. The template and CSS were completely rewritten (to make the buttons nicer in a RSS reader without CSS) so you may check any custom CSS that may need updating. --Petko January 25, 2020

Thank you, Petko, I tested the new version and it works well for my needs. --SteP January 27, 2020, at 06:36 AM

Search

Thanks for this recipe.
I have a peculiar case, I have some important pages that cannot be opened (too much data, equal to hundreds of pages each one), but they can be partially displayed with extract and everything works well.
I saw in sharebuttons.php the use of {$PageUrl}. If it is feasible, may I ask to add something to share the full search link (e.g. https://...?n=Cookbook.ShareButtons&action=search&q=word)? Maybe with a conditional string (if search) and a new PV (e.g. {$FullUrl}) in the php to retrieve the complete url?
Thank you. -- Frank September 05, 2019, at 03:32 PM

  $RequestUrl = "$UrlScheme://{$_SERVER['SERVER_NAME']}{$_SERVER['REQUEST_URI']}";
  $FmtPV['$RequestUrl'] = '$GLOBALS["RequestUrl"]';

  $ShareButtons['DefaultShareUrl'] = '$RequestUrl';
  include_once("$FarmD/cookbook/sharebuttons.php");

Thank you very much, it works perfectly. -- Frank September 05, 2019, at 09:36 PM

Print

How don't print the sharebuttons with action=print ? Thanks

  if ($action != 'print') # ADD line
    include_once("$FarmD/cookbook/sharebuttons.php");

  @media print {
    .resp-sharing-button__link {display: none; }
  }

FidelioEspoir : Thanks ! and one more : (:if !equal "{$Action}" "print":)(:share:) in a page script

Dimensions / bug

First I tried putting the markup in my footer, using the pmwiki-responsive skin. Since the icons were a bit large for my page and I couldn't see how to reduce them, I tried putting the markup in my sidebar instead.

There the icons occupied the full width in a vertical column. I tried to shrink them by putting the markup inside a table with width=25pct; that sort of works.

Is there a better way to control their presentation size and arrangement? -- RandyB August 29, 2019, at 09:12 PM

I've updated the recipe and the documentation. The problem with large icons in the sidebar or footer came from the fact that the recipe only injected the CSS after a (:share:) directive is encountered, but when the sidebar or footer is processed, the CSS has already been output to the browser. On my development wiki I had a (:share:) directive in both the page and the sidebar, and I didn't experience the bug at first, only when I edited another page (as I also had a forced preview while editing so the styles worked when editing the same page, but not another one). It now always injects the CSS into the page, in case someone installs the directive in a sidebar, header or footer. --Petko September 01, 2019, at 09:22 AM