Add additional Social Media Icons to the JetPack WordPress plugin.

All – This article has been superceded by the latest JetPack release where you can add buttons through their interface. I recommend you upgrade JetPack. Article is remaining up just for posterity – Thanks.

I like using the WordPress Social Media plugin to add contact information for my blog. But I wanted it to be consistent for other contact methods not currently listed in the plugin. In my case I wanted to add Skype Chat and Email as contact methods and I added those icons and link capability to the plugin. You can do the same for any other service. You can see my social media contact info working in my About section of this blog.

Instructions follow

Preparation:

1. Determine the accounts you wish to add and find out the correct account name for each. In my case, I wanted to add my Skype account for chat and my email as a sendto:
2. Find your icons. The JetPack plugin uses Geniricons . Find the Geniricons you wish to use for new accounts (and to replace the current ones if you prefer a different icon). A full list is at http://genericons.com.  Highlight the icon you like and then select the Copy HTML Link. That will show you the name of your icon. e.g the Skype icon is called genericon-skype  and the email icon is called genericon-mail. you will need the names. You can do this for anything listed in Genericons.  (You can even change the icons and add other services, but that’s beyond the scope of this post.).
3. For purposes of this – I used/copied the vimeo account in each example below as it was the bottom one in the file below. Open/edit social-media-icons.php at ../wp-content/plugins/jetpack/modules/widgets
   • Search for $this->defaults = array(  and add whatever media accounts you like with the variables for your user name accounts in the following format: ‘account_username’ =>,
     • I added ‘skype_username’ => ”, and ’email_username’ => ”,
   • Search for do_action( ‘jetpack_social_media_icons_widget_list_before’ ); and copy and paste one of the full “if” statements for each social account you want. I used the vimeo one.
     • Replace every instance of the ‘account_username’ with the accounts you wish to add. This is in four places in the “if “statement.
     • Look for the ‘genericons genericons-account‘ and change the ‘account‘ to the genericon names you wish to use. Mine, as above were ‘genericons-skype’ and ‘genericons-mail’.
     • Change the name of the Capitalized service to the service you wish to add. This is for labeling. So I replaced ‘Vimeo’  with ‘Skype’ and ‘Email’. This is in two places in the “if “statement.
     • Look for the ‘esc_url’ statement. Replace the url like ‘https://vimeo.com/’ with the url of the service you are adding. in this case mine was ‘mailto:’
     • Note: Skype did not work this way, as it was not a URL. in a non-url format, you need to change ‘esc_url’ with another type of validation. For non-standard url validation or formats, you may need to play with this. change ‘esc_url’ to ‘esc_attr’ and the ‘ / ‘ in that string to ‘ ?chat’

     

   • Search for public function form( $instance ) { and copy one of the full <p> to </p> paragraphs.
     • Change the name of  ‘account_username’ to the one you are adding. This is in 4 places.
     • Change the name of ‘Account username‘ to the one you are adding, This is in 1 place.
   • Save your file in the Jetpack.  Save a backup somewhere for when you update the plugin.