Social Icon Widget with Settings Page in Genesis Theme Settings

style.css

/** 
 *
 * Styles for Social Media Icons for Genesis
 *
 */

.sidebar ul.socials,
ul.socials {
  list-style-type: none;
  float: right;
  width:  auto;
  display: inline-block;
}
ul.socials li {
	float:left;
}
.sidebar ul.socials {
	display: inline;
	text-align: center;
	width: 100%;
}
.sidebar ul.socials li {
	float: none;
	display: inline;
}
.sidebar ul.socials a,
ul.socials a {
  padding: 10px 3px 0;
  display: inline-block;
	border: none;
}
.sidebar ul.socials a img {
  width: 40px;
  height: 40px;
	border-radius: 4px;	
}
ul.socials a img {
  width: 30px;
  height: 30px;
	border-radius: 3px;
}
.sidebar ul.socials a img {
	opacity: 0.7;
}
.sidebar ul.socials a:hover img {
	opacity: 1.0;
}
.sidebar ul.socials .twitter img,
ul.socials .twitter:hover img {
  background-color: #55ACEE;
	/*https://about.twitter.com/press/brand-assets*/
}
.sidebar ul.socials .facebook img,
ul.socials .facebook:hover img {
  background-color: #6588b4;
}
.sidebar ul.socials .linkedin img,
ul.socials .linkedin:hover img {
  background-color: #069;
}
.sidebar ul.socials .gplus img,
ul.socials .gplus:hover img {
  background-color: #dd4b39;
	/* https://developers.google.com/+/branding-guidelines */
}
.sidebar ul.socials .pinterest img,
ul.socials .pinterest:hover img {
  background-color: #cb2027;
}
.sidebar ul.socials .youtube img,
ul.socials .youtube:hover img {
  background-color: #FF3333;
}
.sidebar ul.socials .rss img,
ul.socials .rss:hover img {
  background-color: #FF6600;
}
.sidebar .widget.widget_socials {
  margin-bottom: 0;
}

widget-social-theme-settings.php

<?php
/**
 * Child Theme Social Media Icon Settings
 *
 * This file registers all of this child theme's specific Theme Settings, accessible from
 * Genesis > Child Theme Settings.
 * 
 */ 
class Child_Theme_Settings extends Genesis_Admin_Boxes {
	
	/**
	 * Create an admin menu item and settings page.
	 * @since 1.0.0
	 */
	function __construct() {
		
		// Specify a unique page ID. 
		$page_id = 'child';
		
		// Set it as a child to genesis, and define the menu and page titles
		$menu_ops = array(
			'submenu' => array(
				'parent_slug' => 'genesis',
				'page_title'  => 'Genesis - Child Theme Settings',
				'menu_title'  => 'Social Media Icons',
			)
		);		
		
		// Set up page options. These are optional, so only uncomment if you want to change the defaults
	     $page_ops = array(
         //        'screen_icon'       => 'options-general',
         //        'save_button_text'  => 'Save Settings',
         //        'reset_button_text' => 'Reset Settings',
         //        'save_notice_text'  => 'Settings saved.',
         //        'reset_notice_text' => 'Settings reset.',
         );
		
		// Give it a unique settings field. 
		// You'll access them from genesis_get_option( 'option_name', 'child-settings' );
		$settings_field = 'child-settings';
		
		// Set the default values
		$default_settings = array(
			'facebook' => '',
			'twitter' => '',
			'pinterest' => '',
			'gplus' => '',
			'linkedin' => '',
			'youtube' => '',
			'rss' => '',
		);
		
		// Create the Admin Page
		$this->create( $page_id, $menu_ops, $page_ops, $settings_field, $default_settings );

		// Initialize the Sanitization Filter
		add_action( 'genesis_settings_sanitizer_init', array( $this, 'sanitization_filters' ) );
			
	}

	/** 
	 * Set up Sanitization Filters
	 * @since 1.0.0
	 *
	 * See /lib/classes/sanitization.php for all available filters.
	 */	
	function sanitization_filters() {
			
		genesis_add_option_filter( 'no_html', $this->settings_field,
			array(
				'twitter',
				'facebook',
				'pinterest',
				'gplus',
				'linkedin',
				'youtube',
				'rss',
			) );
	}
	
	/**
	 * Register metaboxes on Child Theme Settings page
	 * @since 1.0.0
	 */
	function metaboxes() {

		add_meta_box('social_metabox', 'Social Media', array( $this, 'social_metabox' ), $this->pagehook, 'main', 'high');
		
	}
	
	/**
	 * Social Metabox
	 * @since 1.0.0
	 */
	function social_metabox() {
		
		echo '<p>These settings are for the menu display, if you do not wish to display a certain icon, leave that field blank.</p>';
		
		echo '<p>Twitter URL <em>(including http://)</em>: ';
		echo '<input type="text" name="' . $this->settings_field . '[twitter]" value="' . $this->get_field_value( 'twitter' ) . '" size="30" /> </p>';

		echo '<p>Facebook URL <em>(including http://)</em>: ';
		echo '<input type="text" name="' . $this->settings_field . '[facebook]" value="' . $this->get_field_value( 'facebook' ) . '" size="30" /> </p>';
		
		echo '<p>LinkedIn URL <em>(including http://)</em>: ';
		echo '<input type="text" name="' . $this->settings_field . '[linkedin]" value="' . $this->get_field_value( 'linkedin' ) . '" size="30" /> </p>';
		
		echo '<p>Pinterest URL <em>(including http://)</em>: ';
		echo '<input type="text" name="' . $this->settings_field . '[pinterest]" value="' . $this->get_field_value( 'pinterest' ) . '" size="30" /> </p>';
		
		echo '<p>Google Plus URL <em>(including http://)</em>: ';
		echo '<input type="text" name="' . $this->settings_field . '[gplus]" value="' . $this->get_field_value( 'gplus' ) . '" size="30" /> </p>';
		
		echo '<p>YouTube URL <em>(including http://)</em>: ';
		echo '<input type="text" name="' . $this->settings_field . '[youtube]" value="' . $this->get_field_value( 'youtube' ) . '" size="30" /> </p>';
		
		echo '<p>RSS Feed URL <em>(including http://)</em>: ';
		echo '<input type="text" name="' . $this->settings_field . '[rss]" value="' . $this->get_field_value( 'rss' ) . '" size="30" /> </p>';
		
	}	
}

/**
 * Add the Theme Settings Page
 * @since 1.0.0
 */
function jdn_add_child_theme_settings() {
	global $_child_theme_settings;
	$_child_theme_settings = new Child_Theme_Settings;	 	
}
add_action( 'genesis_admin_menu', 'jdn_add_child_theme_settings' );

widget-social.php

<?php
/**
 * Social Widget
 *
 * @package      Social Media Icon Widget
 * @author       Joshua David Nelson <josh@joshuadnelson.com>, Bill Erickson <billerickson.net>
 * @copyright    Copyright (c) 2013, Joshua David Nelson
 * @license      http://opensource.org/licenses/gpl-2.0.php GNU Public License
 *
 * Build off of Social widget by Bill Erickson, billerickson.net
 *
 */
class JDN_Social_Widget extends WP_Widget {
	
    /**
     * Constructor
     *
     * @return void
     **/
	function JDN_Social_Widget() {
		$widget_ops = array( 'classname' => 'widget_socials', 'description' => 'Social icon widget' );
		$this->WP_Widget( 'social-widget', 'Social Widget', $widget_ops );
	}

	/**
	 * Social Options 
	 *
	 */
	function social_options() {
		return array(
			'facebook'  => 'Facebook',
			'linkedin'  => 'LinkedIn',
			'twitter'   => 'Twitter',
			'gplus'     => 'Google Plus',
			'pinterest' => 'Pinterest',
			'youtube'   => 'YouTube',
			'rss'       => 'RSS Feed URL',
		);
	}

    /**
     * Outputs the HTML for this widget.
     *
     * @param array  An array of standard parameters for widgets in this theme 
     * @param array  An array of settings for this widget instance 
     * @return void Echoes it's output
     **/
	function widget( $args, $instance ) {
		extract( $args, EXTR_SKIP );
		echo $before_widget;
		
		if( $instance['title'] )
			echo $before_title . esc_attr( $instance['title'] ) . $after_title;
		
		$socials = $this->social_options();
		if( function_exists( 'jdn_build_social_bar'))	
			echo jdn_build_social_bar( $socials );

		echo $after_widget;
	}

    /**
     * Deals with the settings when they are saved by the admin. Here is
     * where any validation should be dealt with.
     *
     * @param array  An array of new settings as submitted by the admin
     * @param array  An array of the previous settings 
     * @return array The validated and (if necessary) amended settings
     **/
	function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
		
		$instance['title'] = esc_attr( $new_instance['title'] );

		return $instance;
	}
	
    /**
     * Displays the form for this widget on the Widgets page of the WP Admin area.
     *
     * @param array  An array of the current settings for this widget
     * @return void Echoes it's output
     **/
	function form( $instance ) {
	
		$socials = $this->social_options();
		$defaults = array( 'title' => '' );

		$instance = wp_parse_args( (array) $instance, $defaults ); 
		
		echo '<p><label for="' . $this->get_field_id( 'title' ) . '">Title: <input class="widefat" id="' . $this->get_field_id( 'title' ) .'" name="' . $this->get_field_name( 'title' ) . '" value="' . esc_attr( $instance['title'] ) . '" /></label></p>';
		
		echo '<p>Social Media links are taken from your theme settings</p>';
		
	}
}

// Build Social Bar
function jdn_build_social_bar( $socials = array(), $wrap = 'ul' ) {
	if( empty( $socials ) ) {
		$socials = array(
			'facebook'  => 'Facebook',
			'linkedin'  => 'LinkedIn',
			'twitter'   => 'Twitter',
			'gplus'     => 'Google Plus',
			'pinterest' => 'Pinterest',
			'youtube'   => 'YouTube',
			'rss'       => 'RSS Feed URL',
		);
	}
	$follow = '';
	if( $wrap == 'ul' ) {
		$follow .= '<ul class="socials">';
		
		foreach( $socials as $key => $label ) {
			if( '' != genesis_get_option( $key , 'child-settings' ) )
				$follow .= '<li class="social-icon ' . $key . '"><a href="' . genesis_get_option( $key , 'child-settings' ) . '"><img src="'. get_stylesheet_directory_uri() . '/images/' . $key . '.png" alt="' . $label . '" /></a></li> ';
		}
		
		$follow .= '</ul>';
	} elseif( $wrap == 'li' ) {
		$follow .= '<li class="socials">';
		
		foreach( $socials as $key => $label ) {
			if( '' != genesis_get_option( $key , 'child-settings' ) )
				$follow .= '<a href="' . genesis_get_option( $key , 'child-settings' ) . '" class="social-icon ' . $key . '"><img src="'. get_stylesheet_directory_uri() . '/images/' . $key . '.png" alt="' . $label . '" alt="' . $key . '" /></a>';
		}
		
		$follow .= '</li>';
	}

	return $follow;
}

function jdn_register_social_widget() {
	register_widget('JDN_Social_Widget');
}
add_action( 'widgets_init', 'jdn_register_social_widget' );