Skip to main content

Social Icon Widget

Published on
We all want to show off our social networks on our blog or website, especially our clients. Businesses need to have a profile on all major services in modern markets, and it is not hard recreating this multiple times; but, it can be annoying. Here is some quick and dirty code you can use to make a WordPress widget.  The widget works by inputting the social network URLs, full URLs mind you not just the handle. If the URL is present it will pull an icon from the specified location. In the case of this code it is from a WordPress theme that the widget is part of. Don't know how to build a WordPress widget? Google it, it is real simple based off of the WP_Widget class, or just go to wp-includes/default-widgets.php. You'll need to construct the widget, place this code in the constructor function, for example I use the __construct() method.
    parent::__construct(
      'your-social-widget', 'Social Icons',
      array('description' => __('Social Icon Links', 'text_domain'))
    );
The next part of the widget involves the form you see from the widget menu. Your widget's data is stored as $instance throughout the class. Place this code in the form() function
    $instance = wp_parse_args( (array) $instance, array( 'facebook' => '', 'twitter' => '', 'linkedin' => '', 'youtube' => '',
'pinterest' => '', 'foursquare' => '', 'gplus' => '') );
    $fb = $instance['facebook'];
$tw = $instance['twitter'];
$li = $instance['linkedin'];
$yt = $instance['youtube'];
$pi = $instance['pinterest'];
$fs = $instance['foursqaure'];
$gp = $instance['gplus'];

?>
<div class="dooley-social-links">
  <p><label for="<?php echo $this->get_field_id('facebook'); ?>">Facebook: <input class="widefat" id="<?php echo $this->get_field_id('facebook'); ?>" name="<?php echo $this->get_field_name('facebook'); ?>" type="text" value="<?php echo attribute_escape($fb); ?>" /></label></p>
   <p><label for="<?php echo $this->get_field_id('twitter'); ?>">Twitter: <input class="widefat" id="<?php echo $this->get_field_id('twitter'); ?>" name="<?php echo $this->get_field_name('twitter'); ?>" type="text" value="<?php echo attribute_escape($tw); ?>" /></label></p>
    <p><label for="<?php echo $this->get_field_id('linkedin'); ?>">LinkedIn: <input class="widefat" id="<?php echo $this->get_field_id('linkedin'); ?>" name="<?php echo $this->get_field_name('linkedin'); ?>" type="text" value="<?php echo attribute_escape($li); ?>" /></label></p>
     <p><label for="<?php echo $this->get_field_id('youtube'); ?>">YouTube: <input class="widefat" id="<?php echo $this->get_field_id('youtube'); ?>" name="<?php echo $this->get_field_name('youtube'); ?>" type="text" value="<?php echo attribute_escape($yt); ?>" /></label></p>
      <p><label for="<?php echo $this->get_field_id('pinterest'); ?>">Pinterest: <input class="widefat" id="<?php echo $this->get_field_id('pinterest'); ?>" name="<?php echo $this->get_field_name('pinterest'); ?>" type="text" value="<?php echo attribute_escape($pi); ?>" /></label></p>
       <p><label for="<?php echo $this->get_field_id('foursqaure'); ?>">Foursquare: <input class="widefat" id="<?php echo $this->get_field_id('foursqaure'); ?>" name="<?php echo $this->get_field_name('foursqaure'); ?>" type="text" value="<?php echo attribute_escape($fs); ?>" /></label></p>
        <p><label for="<?php echo $this->get_field_id('gplus'); ?>">Google+: <input class="widefat" id="<?php echo $this->get_field_id('gplus'); ?>" name="<?php echo $this->get_field_name('gplus'); ?>" type="text" value="<?php echo attribute_escape($gp); ?>" /></label></p>
</div>
<?php
And if you've developed with WordPress before, you know there is an update hook where you need to process updates. This code goes in the update() function
    $instance = $old_instance;
    $instance['facebook'] = $new_instance['facebook'];
$instance['twitter'] = $new_instance['twitter'];
$instance['linkedin'] = $new_instance['linkedin'];
$instance['youtube'] = $new_instance['youtube'];
$instance['pinterest'] = $new_instance['pinterest'];
$instance['foursquare'] = $new_instance['foursquare'];
$instance['gplus'] = $new_instance['gplus'];
    return $instance;
Finally, the frontend of it all. Like I said, this is based off of a widget built into a theme, specifically a theme framework I am developing. This rough draft doesn't support the option to choose an icon size, so I just placed 64x64 in my images folder and defined the width and height until I implement that feature. Place this code in the widget() function.
if($instance['facebook']) {
?>
<a href="<?php echo $instance['facebook']; ?>" title="Check out our Facebook page" rel="" target="_blank"><img src="<?php dooley_images(); ?>/facebook.png" alt="Facebook" width="24" height="24" /></a>
<?php
}
if($instance['twitter']) {
?>
<a href="<?php echo $instance['twitter']; ?>" title="Read our tweets!" rel="" target="_blank"><img src="<?php dooley_images(); ?>/twitter.png" alt="Twitter" width="24" height="24" /></a>
<?php
}
if($instance['linkedin']) {
?>
<a href="<?php echo $instance['linkedin']; ?>" title="Find us on LinkedIn" rel="" target="_blank"><img src="<?php dooley_images(); ?>/linkedin.png" alt="LinkedIn" width="24" height="24" /></a>
<?php
}
if($instance['youtube']) {
?>
<a href="<?php echo $instance['youtube']; ?>" title="Check out our YouTube channel" rel="" target="_blank"><img src="<?php dooley_images(); ?>/youtube.png" alt="YouTube" width="24" height="24" /></a>
<?php
}
if($instance['pinterest']) {
?>
<a href="<?php echo $instance['pinterest']; ?>" title="Check out our Pinterest page" rel="" target="_blank"><img src="<?php dooley_images(); ?>/pinterest.png" alt="Pinterest" width="24" height="24" /></a>
<?php
}
if($instance['foursquare']) {
?>
<a href="<?php echo $instance['foursquare']; ?>" title="Check out our Foursquare page" rel="" target="_blank"><img src="<?php dooley_images(); ?>/foursquare.png" alt="Foursquare" width="24" height="24" /></a>
<?php
}
if($instance['gplus']) {
?>
<a href="<?php echo $instance['gplus']; ?>" title="Check out our Google+ page" rel="" target="_blank"><img src="<?php dooley_images(); ?>/gplus.png" alt="Google+" width="24" height="24" /></a>
<?php
}
Building widgets for WordPress is simple, hopefully this quick snippet is the boost some of you need to develop functionality for your WordPress themes or plugins. Like I said, this was quickly thrown together. I think the Foursquare field isn't saving, and I am sure the code could be simplified. But it is just a small piece of my WordPress theme framework I wanted to share.  

I'm available for one-on-one consulting calls – click here to book a meeting with me 🗓️