How to Create Custom Social Bookmark Links Widget in Thesis Theme

In this tutorial I explain about how to create social bookmark links widget. You can use this widget in sidebar, footer, inside post and wherever you want in thesis theme by drag and drop in the widget box. This example I have created twitter, digg, rss and youtube links.

Once you created the social bookmark links widget it is available in wordpress admin. This widget is similar to recent posts, popular posts, text widget. Just drag and drop to sidebar and give your social media links and save it. Now this widget will appear in sidebar.


Create custom social bookmark widget

To create your new social bookmark widget copy and paste the below code in custom_functions.php file.

/*create social bookmark widget***********/

class my_subscribe_widget extends WP_Widget {
function my_subscribe_widget() {
$widget_ops = array('classname' => 'widget_bu_subscribe', 'description' => 'Add an RSS and twitter link' );
$this->WP_Widget('my_subscribe_widget', 'Social Bookmark Links', $widget_ops);
}

function widget($args, $instance) {
extract($args, EXTR_SKIP);
echo $before_widget;
$title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
$rss_link = empty($instance['rss_link']) ? ' ' : apply_filters('widget_rss_link', $instance['rss_link']);
$twitter_link = empty($instance['twitter_link']) ? ' ' : apply_filters('widget_twitter_link', $instance['twitter_link']);
$youtube_link = empty($instance['youtube_link']) ? ' ' : apply_filters('widget_youtube_link', $instance['youtube_link']);
$digg_link = empty($instance['digg_link']) ? ' ' : apply_filters('widget_digg_link', $instance['digg_link']);
if ( !empty( $title ) ) { echo $before_title . $title . $after_title; }; ?>
<ul>
<li><a title="Subscribe to the RSS Feed" href="<?php echo $rss_link; ?>" <img src="http://fourblogger.com/wp-content/uploads/2009/12/Feed1.png"
    border="0" alt="" />Subscribe to the RSS Feed</a></li>
<li><a title="Submit on Digg" href="<?php echo $digg_link; ?>" <img src="http://fourblogger.com/wp-content/uploads/2009/12/digg1.png"
    border="0" alt="" />Submit on Digg</a></li>
<li><a title="Follow on Twitter" href="http://www.twitter.com/<?php echo $twitter_link; ?>" <img src="http://fourblogger.com/wp-content/uploads/2009/12/Twitter1.png"
    border="0" alt="" />Follow us on Twitter</a></li>
<li><a title="Subscribe to the Youtube channel" href="<?php echo $youtube_link; ?>" <img src="http://fourblogger.com/wp-content/uploads/2009/12/Youtube-icon1.png"
    border="0" alt="" />Subscribe to the Youtube channel</a></li>
</ul>
<?php echo $after_widget;
}
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['rss_link'] = strip_tags($new_instance['rss_link']);
$instance['twitter_link'] = strip_tags($new_instance['twitter_link']);
$instance['youtube_link'] = strip_tags($new_instance['youtube_link']);
$instance['digg_link'] = strip_tags($new_instance['digg_link']);
return $instance;
}

function form($instance) {
$rss_default = get_bloginfo('rss2_url');
$instance = wp_parse_args( (array) $instance, array( 'title' => '', 'rss_link' => $rss_default, 'twitter_link' => '','youtube_link' => '','facebook_link' => '') );
$title = strip_tags($instance['title']);
$rss_link = strip_tags($instance['rss_link']);
$twitter_link = strip_tags($instance['twitter_link']);
$youtube_link = strip_tags($instance['youtube_link']);
$digg_link = strip_tags($instance['digg_link']);
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('rss_link'); ?>">RSS Feed Link: <input id="<?php echo $this->get_field_id('rss_link'); ?>" name="<?php echo $this->get_field_name('rss_link'); ?>" type="text" value="<?php echo attribute_escape($rss_link); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('twitter_link'); ?>">Twitter Username: <input id="<?php echo $this->get_field_id('twitter_link'); ?>" name="<?php echo $this->get_field_name('twitter_link'); ?>" type="text" value="<?php echo attribute_escape($twitter_link); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('youtube_link'); ?>">Youtube Link: <input id="<?php echo $this->get_field_id('youtube_link'); ?>" name="<?php echo $this->get_field_name('youtube_link'); ?>" type="text" value="<?php echo attribute_escape($youtube_link); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('digg_link'); ?>">Digg Link: <input id="<?php echo $this->get_field_id('digg_link'); ?>" name="<?php echo $this->get_field_name('digg_link'); ?>" type="text" value="<?php echo attribute_escape($digg_link); ?>" /></label></p>

<?php
}
}

register_widget('my_subscribe_widget');

The above code I have added only twitter, digg, rss and youtube links. If you don’t want any links just remove <li> to</li> of which link you don’t want and add your image uploaded path.

To paste the above code in custom_functions.php file use ftp which is the safest way.

The path is public_html/fourblogger.com/wp-content/themes/thesis_16/custom/custom_function.php.

Once you added the above code your social bookmark widget is created in wordpress admin to see this select widgets button under appearances tab in the left side bar of the wordpress dashboard.

Inside the widgets you have social bookmark links widget drag and drop into sidebar_1. Which is looks like the below image.

social bookmark links widget

If you want this in footer first you should widgetize your footer then add it. If you want bookmark links below the post add widget box below post then drag and drop the social bookmark links widget inside the post widget box.

This new widget you should fill the description field with your twitter username, digg, rss and youtube links and title also. Once you filled just save it. Now check your site sidebar you have your social bookmark links.

bookmarking links in sidebar

Share your experience in comment section. For more checkout our all Thesis theme tutorials..

{ 18 comments… add one }

Leave a Comment

  • Deepika January 10, 2010, 6:56 PM

    Nice tips friend. You have explained in a way that is understandable to everyone. I will share this post with my friends who use thesis theme

    Reply
  • Pascal January 10, 2010, 7:34 PM

    Thanks for sharing Deepika.

    Reply
  • aaslin January 11, 2010, 7:27 PM

    Thats fine pascal,I already know blogger to wordpress conversion with 301,im looking forward to create a tutorial

    Reply
  • Amandeep Singh January 11, 2010, 11:56 AM

    A really helpful post :)

    Book marked it… :)

    Reply
  • Pascal January 11, 2010, 11:57 AM

    Thanks amandeep

    Reply
  • aaslin January 11, 2010, 2:18 PM

    Hi,fourbloggers,its seems there is no working tutorial for blogger to wordpress conversion??why not you do it?i hope you could do it successfully

    Reply
  • Pascal January 11, 2010, 2:26 PM

    Go and see our service page..

    Reply
  • sachi January 11, 2010, 3:00 PM

    Hi guys,
    Thanks for helping me out..
    I applied most of your customizations to my blog.
    Today I’m facing a strange problem. The thesis sidebar, which is at the right, falls below the post area.

    I thought, it might be some error in custom.css. So I removed all the code from custom.css and custom_functions.php

    Still I’m facing the same problem.
    I have added the website address. Plz help me out

    Reply
  • Pascal January 11, 2010, 3:19 PM

    For this problem, we are already post tutorial click follow link. http://fourblogger.com/how-to-customize-teaser-box-in-thesis-theme-homepage/ . If you got any problem contact via contact form.

    Reply
  • sachi January 11, 2010, 4:00 PM

    Hi Pascal,
    I have added you on gtalk.

    My problem is that thesis sidebar is falling down below post area

    Reply
  • Pascal January 11, 2010, 6:31 PM

    Approved on gtalk.

    Reply
  • Chris February 13, 2010, 3:36 PM

    Hi
    Just added the social bookmarks code to my Thesis theme and everyting works fine except for the Twitter link! When you click on it in the sidebar you get page error as it seems to be adding the words “twitter@” to the link as you can see from the link below-
    http://twitter.com/twitter@gapinsureinfo
    Should just be http://twitter.com/gapinsureinfo

    Wondered if you can help!

    Bye the way, love th site here as your customization for Thesis is great!

    Thanks

    Chris

    Reply
  • Pascal February 13, 2010, 11:03 PM

    First you have to give your site name, then only we can rectify that error.

    Reply
  • Tony M February 17, 2010, 10:08 AM

    Im designing a new client blog and am really debating on whether to use this widget idea, or use the image map like I did on my own blog. The image map works really well and looks nice, Im torn :)

    Reply
  • Pascal February 17, 2010, 2:23 PM

    ya its looking nice.

    Reply
  • UAmin May 22, 2010, 9:56 PM

    excellent work and most helpful of all I’ve found so far for thesis.

    I am running thesis 1.7 and used/ modified the above code for social networking links in my sidebar. the links works fine in firefox but does not apprear in IE or any other browser..

    my code is as below:
    /*create social bookmark widget***********/

    class my_subscribe_widget extends WP_Widget {
    function my_subscribe_widget() {
    $widget_ops = array(‘classname’ => ‘widget_bu_subscribe’, ‘description’ => ‘Add an RSS and twitter link’ );
    $this->WP_Widget(‘my_subscribe_widget’, ‘Social Bookmark Links’, $widget_ops);
    }

    function widget($args, $instance) {
    extract($args, EXTR_SKIP);
    echo $before_widget;
    $title = empty($instance['title']) ? ‘ ’ : apply_filters(‘widget_title’, $instance['title']);
    $rss_link = empty($instance['rss_link']) ? ‘ ’ : apply_filters(‘widget_rss_link’, $instance['rss_link']);
    $twitter_link = empty($instance['twitter_link']) ? ‘ ’ : apply_filters(‘widget_twitter_link’, $instance['twitter_link']);
    $youtube_link = empty($instance['youtube_link']) ? ‘ ’ : apply_filters(‘widget_youtube_link’, $instance['youtube_link']);
    $facebook_link = empty($instance['facebook_link']) ? ‘ ’ : apply_filters(‘widget_facebook_link’, $instance['facebook_link']);
    $linkedin_link = empty($instance['linkedin_link']) ? ‘ ’ : apply_filters(‘widget_linkedin_link’, $instance['linkedin_link']);

    if ( !empty( $title ) ) { echo $before_title . $title . $after_title; }; ?>
    <a title="" href="” <a title="" href="” <a title="" href="http://www.twitter.com/” <a title="" href="” <a title="" href="”

    ”, ‘rss_link’ => $rss_default, ‘twitter_link’ => ”,’youtube_link’ => ”,’facebook_link’ => ”) );
    $title = strip_tags($instance['title']);
    $rss_link = strip_tags($instance['rss_link']);
    $twitter_link = strip_tags($instance['twitter_link']);
    $youtube_link = strip_tags($instance['youtube_link']);
    $facebook_link = strip_tags($instance['facebook_link']);
    $linkedin_link = strip_tags($instance['linkedin_link']);

    ?>
    <label for="get_field_id(‘title’); ?>”>Title: <input id="get_field_id(‘title’); ?>” name=”get_field_name(‘title’); ?>” type=”text” value=”" />
    <label for="get_field_id(‘rss_link’); ?>”>RSS Feed Link: <input id="get_field_id(‘rss_link’); ?>” name=”get_field_name(‘rss_link’); ?>” type=”text” value=”" />
    <label for="get_field_id(‘twitter_link’); ?>”>Twitter Username: <input id="get_field_id(‘twitter_link’); ?>” name=”get_field_name(‘twitter_link’); ?>” type=”text” value=”" />
    <label for="get_field_id(‘youtube_link’); ?>”>Youtube Link: <input id="get_field_id(‘youtube_link’); ?>” name=”get_field_name(‘youtube_link’); ?>” type=”text” value=”" />
    <label for="get_field_id(‘facebook_link’); ?>”>Facebook Link: <input id="get_field_id(‘facebook_link’); ?>” name=”get_field_name(‘facebook_link’); ?>” type=”text” value=”" />
    <label for="get_field_id(‘linkedin_link’); ?>”>Linkedin Link: <input id="get_field_id(‘linkedin_link’); ?>” name=”get_field_name(‘linkedin_link’); ?>” type=”text” value=”" />
    <?php
    }
    }

    register_widget('my_subscribe_widget');

    could you help pls??

    Reply
  • nina May 26, 2010, 6:47 AM

    Hi,

    I can only get text links on the sidebar – not the icons. Is there something I am missing?

    Reply
  • manu3l9816 September 5, 2010, 4:50 AM

    Is there any way to hide certain icon if the field is empty? for example if i don’t put my twitter username i don’t want to display the twitter icon.

    I hope you can help me with this.

    Reply