Skip to content

Instantly share code, notes, and snippets.

@robincornett
Created March 4, 2019 22:58
Show Gist options
  • Save robincornett/81050a2172aca8837499c12149188043 to your computer and use it in GitHub Desktop.
Save robincornett/81050a2172aca8837499c12149188043 to your computer and use it in GitHub Desktop.
Use Simple Social Icons' SVG in Scriptless Social Sharing. Note: unless you are enqueueing the SSI CSS/JS independently, these will only work on pages where an instance of the SSI widget is being output.
<?php
add_filter( 'scriptlesssocialsharing_link_markup', 'prefix_modify_scriptless_link_markup', 10, 2 );
/**
* Add SVG icons to Scriptless sharing buttons.
*
* @param $output
*
* @param $button
*
* @return string
*/
function prefix_modify_scriptless_link_markup( $output, $button ) {
return sprintf( '<a class="button %s" target="_blank" href="%s" rel="noopener" %s>%s<span class="sss-name">%s</span></a>',
esc_attr( $button['name'] ),
esc_url( $button['url'] ),
$button['data'],
prefix_use_simple_social_icons( $button ),
$button['label']
);
}
/**
* Use the SVG markup from Simple Social Icons to output in Scriptless Social Sharing.
* @param $button
*
* @return string
*/
function prefix_use_simple_social_icons( $button ) {
$markup = '<svg role="img" class="social-' . $button['name'] . '" aria-labelledby="social-' . $button['name'] . '">';
$markup .= '<title id="social-' . $button['name'] . '">' . $button['label'] . '</title>';
$markup .= '<use xlink:href="' . esc_url( plugin_dir_url( __FILE__ ) . 'symbol-defs.svg#social-' . $button['name'] ) . '"></use>';
$markup .= '</svg>';
return sprintf( $markup );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment