Skip to content

Instantly share code, notes, and snippets.

@robincornett
Last active January 31, 2018 19:30
Show Gist options
  • Save robincornett/650fd8c3d22a832c5cc84a16c9a22e3e to your computer and use it in GitHub Desktop.
Save robincornett/650fd8c3d22a832c5cc84a16c9a22e3e to your computer and use it in GitHub Desktop.
Example for adding Scriptless Social Sharing buttons to an AMP page (requires the Automattic AMP plugin).
<?php
add_action( 'pre_amp_render_post', 'prefix_add_scriptless_amp' );
/**
* Add Scriptless Social Sharing buttons to AMP posts
* (using the Automattic AMP plugin: https://wordpress.org/plugins/amp/).
*/
function prefix_add_scriptless_amp() {
if ( ! function_exists( 'scriptlesssocialsharing_do_buttons' ) ) {
return;
}
add_filter( 'the_content', 'prefix_do_scriptless_buttons_amp', 99 );
add_action( 'amp_post_template_css', 'prefix_add_scriptless_amp_style' );
}
/**
* Append the Scriptless Social Sharing buttons to the content.
* @param $content
*
* @return string
*/
function prefix_do_scriptless_buttons_amp( $content ) {
return $content . scriptlesssocialsharing_do_buttons();
}
/**
* Add the Scriptless Social Sharing styles to AMP. Has to be done inline.
* https://github.com/Automattic/amp-wp/wiki/Customization-and-Templating
*
* @param $amp_template
*/
function prefix_add_scriptless_amp_style( $amp_template ) {
$output = '';
foreach ( array( 'style', 'fontawesome' ) as $file ) {
$response = wp_remote_get( plugins_url() . "/scriptless-social-sharing/includes/css/scriptlesssocialsharing-{$file}.css" );
if ( ! is_wp_error( $response ) ) {
$output .= $response['body'];
}
}
$enqueue = new ScriptlessSocialSharingEnqueue( scriptlesssocialsharing_get_setting(), array() );
$output .= $enqueue->get_inline_style();
echo sanitize_text_field( $output );
}
@robincornett
Copy link
Author

To show buttons before the content, change line 23 to:

return scriptlesssocialsharing_do_buttons() . $content;

To show buttons both before and after the content, change it to:

return scriptlesssocialsharing_do_buttons() . $content . scriptlesssocialsharing_do_buttons();

@robincornett
Copy link
Author

If your server won't allow you to pull the contents of the stylesheets for the plugin, you can replace the prefix_add_scriptless_amp_style plugin with this instead:

function prefix_add_scriptless_amp_style( $amp_template ) {
	$output  = '.scriptlesssocialsharing{box-sizing:border-box;margin:18px auto}.scriptlesssocialsharing-buttons{border-collapse:separate;border-spacing:3px;display:table;table-layout:fixed}.scriptlesssocialsharing-buttons a.button{border:none;border-radius:0;color:white;display:table-cell;text-align:center;text-decoration:none}.scriptlesssocialsharing-buttons a.button:hover{color:#fff}.scriptlesssocialsharing-buttons .sss-name{position:absolute;clip:rect(1px, 1px, 1px, 1px);height:1px;width:1px;border:0;overflow:hidden}.scriptlesssocialsharing-buttons .button.email{background-color:#333;background-color:rgba(51,51,51,0.8)}.scriptlesssocialsharing-buttons .button.email:hover{background-color:#333}.scriptlesssocialsharing-buttons .button.twitter{background-color:#55acee;background-color:rgba(85,172,238,0.8)}.scriptlesssocialsharing-buttons .button.twitter:hover{background-color:#55acee}.scriptlesssocialsharing-buttons .button.facebook{background-color:#3b5998;background-color:rgba(59,89,152,0.8)}.scriptlesssocialsharing-buttons .button.facebook:hover{background-color:#3b5998}.scriptlesssocialsharing-buttons .button.linkedin{background-color:#0077b5;background-color:rgba(0,119,181,0.8)}.scriptlesssocialsharing-buttons .button.linkedin:hover{background-color:#0077b5}.scriptlesssocialsharing-buttons .button.pinterest{background-color:#bd081c;background-color:rgba(189,8,28,0.8)}.scriptlesssocialsharing-buttons .button.pinterest:hover{background-color:#bd081c}.scriptlesssocialsharing-buttons .button.google{background-color:#dc4e41;background-color:rgba(220,78,65,0.8)}.scriptlesssocialsharing-buttons .button.google:hover{background-color:#dc4e41}.scriptlesssocialsharing-buttons .button.reddit{background-color:#ff4500;background-color:rgba(255,69,0,0.8)}.scriptlesssocialsharing-buttons .button.reddit:hover{background-color:#ff4500}';
	$output .= '.scriptlesssocialsharing-buttons .button .sss-name{margin-left:8px}.scriptlesssocialsharing-buttons .button:before{display:inline-block;font:normal normal normal 20px FontAwesome;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-transform:translate(0, 0);-ms-transform:translate(0, 0);transform:translate(0, 0);vertical-align:middle}.scriptlesssocialsharing-buttons .twitter:before{content:\'\f099\'}.scriptlesssocialsharing-buttons .facebook:before{content:\'\f09a\'}.scriptlesssocialsharing-buttons .google:before{content:\'\f0d5\'}.scriptlesssocialsharing-buttons .pinterest:before{content:\'\f0d2\'}.scriptlesssocialsharing-buttons .linkedin:before{content:\'\f0e1\'}.scriptlesssocialsharing-buttons .email:before{content:\'\f0e0\'}.scriptlesssocialsharing-buttons .reddit:before{content:\'\f281\'}';
	$enqueue = new ScriptlessSocialSharingEnqueue( scriptlesssocialsharing_get_setting(), array() );
	$output .= $enqueue->get_inline_style();
	echo sanitize_text_field( $output );
}

This is the CSS copied/pasted directly from the plugin's two stylesheets.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment