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..
Related Tutorials:
- How to Add Social Bookmark Button Links inside Posts in Thesis
- How to add Social Bookmark Icons at Right Side of the Post in Thesis Theme
- How to add your social bookmark icon into Thesis theme
- How to Add Floating Feedback Social Bookmarking Icons in Thesis Theme
- How to Add Social Bookmarking Icons in widgetized Header of Thesis Theme
{ 18 comments… read them below or add one }
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
Thanks for sharing Deepika.
Thats fine pascal,I already know blogger to wordpress conversion with 301,im looking forward to create a tutorial
A really helpful post
Book marked it…
Thanks amandeep
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
Go and see our service page..
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
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.
Hi Pascal,
I have added you on gtalk.
My problem is that thesis sidebar is falling down below post area
Approved on gtalk.
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
First you have to give your site name, then only we can rectify that error.
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
ya its looking nice.
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??
Hi,
I can only get text links on the sidebar – not the icons. Is there something I am missing?
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.