SocialSharePrivacy and WordPress

As I mentioned previously (“Your (the Reader’s) Privacy“), I’ve set up this blog with the SocialSharePrivacy toolkit to allow these posts to have convenient “share” buttons, but without allowing those services to track your movements involuntarily.

And, as I mentioned, using that toolkit isn’t entirely friendly yet.

This is what I did to get it working properly:

I downloaded the toolkit and placed it in the “js” subdirectory of the child theme I’m using to customize the standard “twentyfourteen” theme.

Directory structure:

/path/to/wordpress/wp-content/themes/twentyfourteenchild/js/socialshareprivacy

In that directory are the files for the toolkit:

.../socialshareprivacy/css/jquery.socialshareprivacy.min.css
.../socialshareprivacy/images/[whole bunch of images here]
.../socialshareprivacy/jquery.socialshareprivacy.min.js

I then updated my theme’s functions.php file to load the toolkit:

add_action( 'wp_enqueue_scripts', 'social_share_privacy' );
function social_share_privacy() {
        wp_register_script(
                'social-share-privacy',
                get_stylesheet_directory_uri() . '/js/socialshareprivacy/jquery.socialshareprivacy.min.js',
                array('jquery'),
                '14.02.04',
                true
        );
        wp_enqueue_script('social-share-privacy');

        wp_register_script(
                'social-share-privacy-init',
                get_stylesheet_directory_uri() . '/js/socialshareprivacy/socialshareprivacy-init.js',
                array('jquery', 'social-share-privacy'),
                '14.02.04',
                true
        );
        wp_enqueue_script('social-share-privacy-init');
        wp_localize_script('social-share-privacy-init', 'socialshareprivacyinit', array(
                'title' => wp_title("", false),
                'image' => site_url() . '/apple-touch-icon-114x114-precomposed.png',
                'path_prefix' => get_stylesheet_directory_uri() . '/js/socialshareprivacy/',
                'css_path' => 'css/jquery.socialshareprivacy.min.css'
        ));
}

This enqueues two scripts to load: ‘social-share-privacy’ and ‘social-share-privacy-init’ both of which depend on jQuery already being loaded.  I use dates for version numbers because it’s easy to keep track of how old things are.

After enqueuing the scripts I also make a call to “wp_localize_script” for the ‘social-share-privacy-init’ script.  This allows me to pass in data that needs to be calculated by WordPress to function properly (things like the directory location of the socialshareprivacy files [“path_prefix” and “css_path”]).

Now we need to actually create that ‘social-share-privacy-init’ script which lives at:

.../socialshareprivacy/socialshareprivacy-init.js

I wasn’t able to get the documented global settings variable (combined with auto-wiring) to work correctly so instead I did things manually:

jQuery(document).ready(function($) {
        socialshareprivacyinit.info_link_target = '_blank';
        socialshareprivacyinit.order = ['gplus', 'facebook', 'pinterest', 'mail'];
  socialshareprivacyinit.services = {
                gplus:{status:true},
                facebook:{status:true},
                mail:{status:true, body:function(options, uri, settings){return "Thought you might find this interesting: " + uri;}},
                pinterest:{status:true},
                twitter:{status:false},
                buffer:{status:false},
                delicious:{status:false},
                disqus:{status:false},
                flattr:{status:false},
                hackernews:{status:false},
                linkedin:{status:false},
                reddit:{status:false},
                stumbleupon:{status:false},
                tumblr:{status:false},
                xing:{status:false},
                fbshare:{status:false}
        };
        $('div.share').socialSharePrivacy(socialshareprivacyinit);
});

Notice that I only configure gplus, facebook, pinterest, and mail.  Also, notice that I’m assigning to an assumed existing javascript variable called “socialshareprivacyinit” this is the variable that WordPress will create and populate from the wp_localize_script call we made and will be available before socialshareprivacy-init.js is executed.

We just finish populating the object and then wire up the share divs.

It appears that you have to manually set every service you don’t want to “false” as the default seems to be “true” (which I think should be switched).

The final piece is to actually put divs on the page that will get wired up; in this case, divs that will match the $(‘div.share’) selector.

In each of the layout pages you use (content.php, content-image.php, content-gallery.php, content-video.php…) add the following code just after the closing tag for the <div class=”entry-meta”> div, so it’s still inside the <header></header> tags:

</div><!-- .entry-meta -->
                <div class="share" data-uri="<?php echo esc_attr(get_permalink()); ?>" data-title="<?php echo esc_attr(the_title(false))?>"></div>
        </header><!-- .entry-header -->

In that tag I use the “data-*” attributes to pass useful information to the socialSharePrivacy code.  I set “data-uri” to the post’s permalink and I set “data-title” to the post’s title.  SocialSharePrivacy will use these values when a user clicks a “share” button to pre-populate that share.

I believe that was everything.  So you should be all set at this point.