Holiday Tip: making fancy social media buttons

HI, folks
for many of you (including us), we wanted to use slightly different method for the social media buttons at bottom of the post in the theme, and for some reason with the default theme setup and using Yoast SEO plugin, the Pinterest image would never populate even with all the Pinterest-friendly code in the head of the theme.

So, starting playing with using the WP AddThis plugin, however its main flaw (and those folks are really dumb in not updating to include the async code which EVERYBODY has been requesting for the pat year – and which can be easily fixed).

Finally, I took look at plugin and sorted out how easy it is to “hack that” for your site. While there are many choices for plugins, or managing “on page” code, we’ve found over the past five years, that the AddThis plugin when used async mode, actually is very consistent and doesn’t adversely impact our pages. Your mileage may vary. Still, think about how many websites have those little orange [+] buttons for sharing and AddThis has big installed base.

So, here is how to do this – was going to post this in my blog, and will later, but redoing my website right now and well, I just hacked our Newspaper theme site to do this, so thought I’d pass it along.

This assumes you will
1) turn off the social media option in the control/customizer panel for the theme, on posts.
2) download the AddThis plugin v 3.5.6+ (the one from the AddThis company) and open file in the plugin folder to edit one line;
3) upload the modified plugin to your /wp-content/plugins/ folder via FTP
4) activate plugin
5) choose settings for plugin as to whether you want the pill buttons with balloons showing number of shares/likes, or the speedier share buttons without the “phone homes” to get read/share numbers (which slow down your website and pagespeed, btw).

So, once you have plugin:
in the folder, you’ll be editing this file:
addthis/includes/addthis_addjs.php

You can edit in notepad, simpletext, or whatever (I use the awesome TEXTPAD 5 on Windows7); do not edit in a word processor like Pages, or OpenOffice, MS Word, etc.

around about line 166-167 you will see this:

    function addWidgetToJs(){
        $this->jsToAdd .= '<script type="text/javascript" src="//s7.addthis.com/js/'.$this->atversion.'/addthis_widget.js#pubid='. urlencode( $this->pubid ).'"></script>';
    }

and you will simply change to: (YOURID is your publisher id you get when creating an AddThis account, which is free; includes tracking if you want that, zero cost, and no impact on SEO or link pollution). If you have no publisher ID, simply remove #pubid=YOURID — IMPORTANT, do *NOT* put in a publisher ID in the AddThis WP control panel as you’re manually over-riding the insert variable here.

    function addWidgetToJs(){
        $this->jsToAdd .= '<script type="text/javascript" src="//s7.addthis.com/js/'.$this->atversion.'/addthis_widget.js#pubid=YOURID#async=1"></script>';
    }

To see this in action:
http://ga-ga.com/1204/beginning-adventure-space-time-reveals-roots-doctor/

Using this hack as of 12.25.13, but if you’re reading this a year later, we might be doing something totally different (view ‘source code’ for page to see whassup).

Hope tha helped somebody.
Once I get our server moved, and my website updated for our main company, my wordpress blog will be back, and I’ll include link to that for more of my little tidbits of tips.

HAPPY HOLIDAYS!

And one caveat; some of your social media button “views/shares” numbers may change/reset or go out of sync doing this, but in most cases will “self correct” in a bit. So your FB likes might suddenly say “0” but then should catch up to actual likes later on. This is common with ANY change of the system connecting to the sites to ping the data, not a “theme bug” or anything 🙂

• This reply was modified 12 years by simchris.