Adding facebook fan count to your website or blog may be a best way to promote your blog and to show off your quality to visitors and making them to join as a fan.Facebook has various uses and now it has also come out as an commercial spot for making money and driving more visitors to blogs.Hence this tutorial of adding a facebook fan count text widget in your wordpress blog will be useful for this cause to enable fast loading text fan count.

How to add facebook fan count in text in wordpress blog?

There are three steps that you need to complete enabling facebook fancount in text.This can be used in wordpress or any php powered website.This uses the Facebook api key to display the fan count in text.

STEP 1:

1.Getting your facebook api key,application secret and page id:
You have to sign into facebook first and then click on developers link on the side bar.If you have not signed up for developer in facebook do it here.

2.Now after you click developer option then go to “setup new application” and enter any name and create a application.we are not creating a real application but we need that for getting facebook api keys and application secret.

3.After you click “create application” you will see the api key,application id and secret in the next page.Make a note of it.

4.Visit your facebook fan page and check the url bar to get your fan page id.If you have changed the url to short then goto facebook pages and edit the required page and then see the url bar to get your page id.
http://www.facebook.com/pages/edit/?id=XXXXXXX

STEP 2:

Get the facebook.php file from here.It is the Facebook API PHP SDK file .Then place it in the root  of your website.

STEP 3:

This is the final step showing the fan count as text in your website.You have to place the below in code in your php file.In custom_functions.php for thesis wordpress theme.Be sure to edit the following details before you paste the code and save.
Line 4 – Replace app_id with your Facebook Application ID.
Line 5 – Replace secret_key with application Secret.
Line 10 – Replace the last page_id with your Facebook Fanpage ID.

Now the code is

<?php
require_once('facebook.php');
$facebook = new Facebook(array(
'appId'  => 'app_id',
'secret' => 'secret_key',
'cookie' => true,
));
$result = $facebook->api(array(
'method' => 'fql.query',
'query' => 'select fan_count from page where page_id = page_id;'
));
$fb_fans = $result[0]['fan_count'];
?>

After you are done,save it and now to display the fan count text widget use this code

<?php echo $fb_fans; ?>

Now you have successfully added facebook fancount in text in your blog or website.

Related posts:

1. How to make money from facebook.com
2. How to display recent searches in wordpress blog sidebar
3. Thesis-how to place ads Above the post title in thesis wordpress theme

Image hover effects makes your blog looks pretty and also improves performance of affiliate images and social bookmarking icons.It is easy to imply these image hover effects in wordpress and blogger.I have also explained how to add it in thesis wordpress theme.So check below to add a hover effect or mouse over effect tutorial.

HOW TO ADD IMAGE HOVER EFFECT:

FOR THESIS AND WORDPRESS THEMES:

1.Goto Custom file editor in wp-dashboard and click edit Custom.css and at the end paste the css code (given at the end of this post)for the required hover effect.

2.Now when adding a image add the required tag (for eg “Fadein”)into the image code as shown below.

FOR BLOGGER BLOGS-IMAGE HOVER EFFECT:

1. Go to Blogger > Layout > Edit HTML
2. Search for ]]></b:skin>
3. And now paste any of your preferred CSS: code just above ]]></b:skin>
   
4. save it

Now whenever you write a post add the required tag for hover effect as below.

LIST OF HOVER EFFECTS AND CSS CODES,TAGS:

HOVER EFFECT 1:

CLASS=simple1

CSS CODE:

.simple1 {
padding:5px;
border:1px solid #ccc;
}
.simple1:hover {
padding:5px;
background-color:#ccc;
}

HOVER EFFECT 2:

CLASS=simple2

CSS CODE:

.simple2 {
padding:5px;
background-color:#ccc;
border:1px solid #ddd;
}
.simple2:hover {
padding:5px;
background-color:#eee;
border:1px solid #666;
}

HOVER EFFECT 3:

CLASS=black-white

CSS CODE:
.black-white {
padding:5px;
border:1px solid #ccc;
}
.black-white:hover {
padding:5px;
background-color:#fff;
border:10px solid #000;
}

HOVER EFFECT 4:

CLASS=dashed

CSS CODE:
.dashed {
padding:5px;
border:1px solid #ccc;
}
.dashed:hover {
padding:5px;
background-color:#fff;
border:2px dashed #000;
}

HOVER EFFECT 5:

CLASS=top-bottom

CSS CODE:
.top-bottom {
padding-top:5px;
padding-bottom:5px;
border-top:3px solid #ddd;
border-bottom:3px solid #ddd;
}
.top-bottom:hover {
background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
}

HOVER EFFECT 6:

CLASS=curtain
CSS CODE:
.curtain {
padding-top:10px;
padding-bottom:10px;
border-top:2px solid #ddd;
background-color:#000;
border-bottom:2px solid #ddd;
}
.curtain:hover {
background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
}

HOVER EFFECT 7:

CLASS=red
CSS CODE:
.red {
padding:5px;
border:1px solid #ccc;
}
.red:hover {
padding:5px;
background-color:#E71305;
border:10px solid #ddd;
}

HOVER EFFECT 8:

CLASS=Fadein
CSS CODE:
.Fadein{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}

HOVER EFFECT 9:

CLASS=Fadein2
CSS CODE:
.Fadein2{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:2px solid #000;

}
.Fadein2:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:2px solid #000;
}

HOVER EFFECT 10:

Image Description here

For this effect you have to use the coding as below for images.Add the same image url in both the fields below.Add a image description.

IMAGE CODING:

<a><img src=”Add Image URL Here” border=”0px” alt=”" width=”100px” height=”100px” /><span><img src=”Add Image URL Here” alt=”" />
Image Description here </span></a>

CSS CODE:

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #7AA1C3;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: white;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 5px;
}

Now you will be able to add image hover effects to bloggers,thesis and other wordpress themes.Be sure to subscribe to our updates to get more blogger,wordpress tutorials to your email.

Related posts:

1. How to add stylish page navigation in thesis using wp-pagenavi
2. How to add page navigation in thesis without openhook plugin
3. How to add author profile box below posts in wordpress themes

Adding Back to top button in your wordpress theme might help your visitors especially if your blog posts are lengthy and users have to scroll up when trying to go to top.In such cases adding an back to top button might help them an easy browsing of your wordpress blog.

How to add back to top button in Thesis:

Create a image button or icon that you want to place as the top button.

upload the image to your image library and get the link.

Now go to thesis options in your wordpress dashboard and click header scripts and add the below code and click the big ass save button.

Note:Be sure to replace the image link to your icon link.

/* paste the code in header scripts*/
<a style="display:scroll;position:fixed;bottom:5px;right:5px;

" href="#" title="Go to Top">

<img src="http://www.sensehow.com/wp-content/uploads/up.png" /></a> <br/>

Now check your site,you would have an amazing floating “back to top” button in your thesis wordpress theme.

Using another wordpress theme?check my newer tutorials for “adding top icon”.

Post a comment if you have any difficulties?

Related posts:

1. How to add retweet button into teaser and posts of thesis wordpress theme
2. How to add clickable header banner in thesis wordpress theme
3. how to use thesis openhook wordpress plugin

Adding retweet button into posts and the homepage teasers of thesis is quite important if you consider providing your readers more sharing option for twitter.You can add retweet button widget into posts by using the Tweetmeme wordpress plugin.But if you consider “adding plugins might slow down your wordpress blog load time” then you can try this way without any plugins.It is very simple that adding a code into the custom_functions.php can solve it.

How to add Retweet into teaser box at homepage:

To add the retweet option by tweetmeme inside the teaser box you have to add this code into the custom_functions.php from you thesis custom file editor.Be sure to change your username from “sensehow” to yours.

/* TWITTER BUTTON INSIDE TEASER BOX   */

function tweet_button_left() {
?>
<div id='twittley_button' style='float:left;margin-right:10px;'>
<script type="text/javascript">
tweetmeme_source = 'sensehow';
tweetmeme_url = '<?php echo get_permalink($postid); ?>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<?php }

add_action('thesis_hook_before_teaser', 'tweet_button_left');

You can change the location to right by changing

style='float:right;margin-left:10px;'>

How to add retweet into posts without plugin:

To add the retweet button into posts add the below code into the custom_functions.php file using the default thesis file editor.

/* TWITTER BUTTON INSIDE POST BOX   */

function tweet_button_left1() {
if(!is_page()){
?>
<div id='twittley_button1' style='float:right;margin-left:10px;'>
<script type="text/javascript">
tweetmeme_source = 'sensehow';
tweetmeme_url = '<?php echo get_permalink($postid); ?>';
</script>
<script type="text/javascript"  src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<?php } }

add_action('thesis_hook_before_post', 'tweet_button_left1');

I hope now you could have successfully added the tweetmeme retweet button into thesis teaser and inside posts without any plugin.

ANY PROBLEMS? DO POST A COMMENT.

Related posts:

1. How to add retweet button in your wordpress theme
2. How to add floating back to top button in thesis wordpress theme
3. How to add featured posts in custom feature box in thesis wordpress theme

Thesis does not have an default page navigation option.But page navigation can be added to thesis by various plugins.But unless customizing these plugins,they wont look appealing to your visitors and also will not attract their attention.Page navigation is also very important to reduce the bounce rate of blogs.So let me explain how to add page navigation in thesis and how to customize it to look stylish.

1.Install wp-pagenavi wordpress plugin from your wordpress dashboard and activate it.

2.And then install thesis open hook wordpress plugin and activate it.

3.Go to the “Thesis open hook” menu and add the below code  to “After content Box” and Check “execute php” and save it.

<div align="left">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
<br />
</div>

4.Now page navigation will be visible in your wordpress thesis blog.

5.To customize the page navigation add the below code to the custom.css from your thesis custom file editor.

/* css code for page navigation menu
-------- wp-pagenavi----------------------------------- */
.wp-pagenavi { margin: 15px 0px 15px 0px; }
.wp-pagenavi a, .wp-pagenavi a:link { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #413f36; background-color: #eeeeee; }
.wp-pagenavi a:visited { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #413f36; background-color: #eeeeee; }
.wp-pagenavi a:hover { font-size:14px; border: 1px solid #608e7a; color: #FFF; background-color: #75040b; }
.wp-pagenavi a:active { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #413f36; background-color: #eeeeee; }
.wp-pagenavi span.pages { font-size:14px; padding: 5px 9px; margin: 2px 2px 2px 2px; color: #000000; border: 1px solid #e1e1c8; color: #413f36; background-color: #eeeeee; }
.wp-pagenavi span.current { font-size:14px; padding: 5px 9px; margin: 2px; font-weight: bold; border: 1px solid #608e7a; color: #FFF; background-color: #75040b; }
.wp-pagenavi span.extend { font-size:14px; padding: 5px 9px; margin: 2px; border: 1px solid #608e7a; color: #FFF; background-color: #75040b; }

You can change the hover,background and other colors of the page navigation bar by changing it in the above code.

Check your website you will have a stylish page navigation bar below the content area in thesis wordpress theme.
Have difficulties?post a comment

Related posts:

1. How to add page navigation in thesis without openhook plugin
2. How to add stylish asnio 3 column footer to thesis wordpress theme
3. How to add a widgetized 3 column footer in thesis wordpress theme

Do you like the widgetized footer that we use here at sensehow in thesis theme?It is the asnio footer that makes it look so good.Do you know how can you add this footer to your thesis theme? Asnio footer was developed by asnio,an young blogger who writes at asnio.com.This thesis three column footer makes you 3 ready made widgets for footer and an copyright section for your thesis wordpress theme.

It is very easy to install this thesis widgetized three column footer.

STEPS TO INSTALL ASNIO 3 COLUMN THESIS FOOTER:

1.Download Asnio footer from here

2.Unzip it and you will find 2 files footer_function.php and footer_css.

3.Paste the footer_function in custom_functions.php in your thesis file editor in wordpress dashboard.

function asnioFooter() { ?>
<div id="container">
<div id="foot">
<h5>Blog Categories</h5>
<span>Information Covered on the Blog</span>
<ul id="cats">
<?php wp_list_cats('sort_column=id&hide_empty=0&optioncount=0&hierarchical=0'); ?>
</ul>

<div>
<ul>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ){    ?>
<li>
<div>
<h3><?php _e('Footer Widget 1', 'thesis'); ?></h3>
<p>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</p>
</div>
</li>
<? } ?>
</ul>
</div>

<div>
<ul>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) { ?>
<li>
<div>
<h3><?php _e('Footer Widget 2', 'thesis'); ?></h3>
<p>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</p>
</div>
</li>
<? } ?>
</ul>
</div>

<div>
<ul>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) { ?>
<li>
<div>
<h3><?php _e('Footer Widget 3', 'thesis'); ?></h3>                                                                <p>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</p>
</div>
</li>
<? } ?>
</ul>
</div>

<div id="copyright">
<ul>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Copyright') ) { ?>
<li>
<div>
<h3><?php _e('Copyright', 'thesis'); ?></h3>                                                                <p>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</p>
</div>
</li>
<? } ?>
</ul>
<!-- Please do not remove these lines. If you have a developers license, you may remove the thesis copyright, but do not remove the Asnio copyright unless you have paid the $5 fee. Feel free to remove these comment lines however -->
<p>Get smart with the <a href="http://diythemes.com/thesis/">Thesis WordPress Theme</a> from DIYthemes.</p>
<p>Footer by <a href="http://asnio.com/">Asnio</a>.</p>
</div>
</div>
</div>
<? }
add_action('thesis_hook_after_html', 'asnioFooter');
remove_action('thesis_hook_footer', 'thesis_attribution');
remove_action('thesis_hook_footer', 'thesis_admin_link');

register_sidebar(array('name'=>'Footer 1', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));
register_sidebar(array('name'=>'Footer 2', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));
register_sidebar(array('name'=>'Footer 3', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));
register_sidebar(array('name'=>'Footer Copyright', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));

Click the big ass save button.

4.Now copy the code in footer_css from the file or below and paste it in the custom.css from your thesis editor.

#foot {
background: #2B2A2A;
border: 0.6em solid #212020;
color: #DBEDF9;
font-size: 12px;
margin: 20px auto;
overflow: hidden;
padding: 1.5em;
}

#foot a { color: #DBEDF9; border-bottom: 1px dashed #DBEDF9; text-decoration: none; }

#foot a:hover { background: #DBEDF9; color: #3D3C3C; }

#foot span.cat, #foot h3 { /* controls all blue headings */
color: #23A2D7; font-size: 16px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }

#foot h5 { font-size: 23px; }

#foot ul li ul { list-style-type: square; margin-left: 10px; }

#foot ul.sidebar_list { padding: 1.8em 30px 0 0; }

#foot li.widget .widget_box { background: none; border: 0; }

#foot .textwidget p { line-height: 22px; margin-bottom: 11px; }

#foot .col { float: left; list-style: none; width: 33.3%; }

#cats {
background: #3D3C3C;
list-style-type: none;
margin-top: 13px;
overflow: hidden;
padding: 10px 0 7px 20px;
}

#cats li {
float: left;
font-size: 1.2em;
line-height: 1.8em;
margin: 0 2px 5px 0;
width: 165px;
}

#copyright {
border-top: 1px dashed #3D3C3C;
clear: both;
font-size: 13px;
letter-spacing: 1.3px;
line-height: 21px;
padding-top: 10px;
}

#copyright p { font-size: 13px; }

#copyright ul.sidebar_list, #copyright .textwidget, #copyright li.widget .widget_box, #copyright li.widget { margin: 0; padding: 0; }

5.Now save it and go to the widgets section and you will find three footer widgets section.Add some widgets to those footer 1,2 and 3 and visit your site.you can see the 3 column widgetized asnio footer as above,

Hope you have successfully added the 3 column asnio widgetized footer to your thesis wordpress theme.If you have any doubts then post a comment here.

Related posts:

1. How to add a widgetized 3 column footer in thesis wordpress theme
2. Thesis-how to place ads Above the post title in thesis wordpress theme
3. How to add stylish page navigation in thesis using wp-pagenavi