Adding Stylish Share Buttons to Your Blogger/Wordpress Blog's Post

Share buttons is very important for your blog as it helps in traffic and also makes your blog look more advanced. Are you looking for share buttons for your blog? Here's the spot.Before you continue, you can read one of my post of how you can add floating share buttons to your blog sidebar.

As you can see on the picture above the share button includes:

• Facebook share button
• Facebook like buttton
• Tweet button
• Pinterest button
• Digg button
• Stumbleupon button

Well this share button was gotten from sharethis.com but you may not like the way it appears whenever you use their Worpress plugin or their blogger gadget. Adding it manually gives you more flexibility because you can choose how and where you want the widget to appear.
You can also add more share buttons or customised it's look and feel by editing it's CSS. But let's get this done first.

Adding the share buttons to Bloggger / Blogspot
1. Log in to your Blogger account
2. Go to Template > Edit HTML
3. Click the box labelled “Expand Widget Template”
4. Search for this:

</head>

5. Paste this code above it:

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-47c9cca-cf33-f245-f3f6-43ed7a58f34f"}); </script> 

6. Now search for this:
 

<data:post.body/>

Note that you will have more than one of this if you’re using a magazine style template. You should keep trying them one after the other and check you blog each time you implement the code to know when it works.
7. Copy this code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.tripozia-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#FFFFFF;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center' class='tripozia-share-buttons'>
<span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_plusone_hcount' displayText='Google +1'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_pinterest_hcount' displayText='Pinterest'/>
<span class='st_digg_hcount' displayText='Digg'/>
<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
<span class='st_fblike_hcount' displayText='Facebook Like'/>
</p>
</b:if>

If you want the buttons to appear above your posts, paste the code above <data:post.body/>.
If you prefer to have the share buttons just below your content, paste the code after <data:post.body/>.
You can as well put the code in both positions if you like.

Did you see the colored part of the code? That’s how the buttons are arranged. You can remove the ones you don’t like or change the arrangement.

Adding the share buttons to WordPress without a plugin
I’ll be explaining how to add these buttons to your blog’s regular theme and mobile version (Mobilepress precisely). The first part of the code goes into the head section of your theme. 1. Copy this code:

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-47c9cca-cf33-f245-f3f6-43ed7a58f34f"}); </script>

And paste it in your head section. For genesis theme users, go to Genesis > Theme Settings > Header and Footer Scripts and paste the code. If you’re using any other WordPress theme, install Header and Footer plugin. Then go to Settings > Header and Footer > Code to be added on HEAD section of every page and paste the code there. If you want the buttons to appear on MobilePress, log in to cPanel file manager and navigate to …public_html/wp-content/plugins/mobilepress/system/themes/default/header.php. Edit your header.php and paste the code before the closing </head> tag.> 2. The second of the code requires Post Layout plugin to work. This plugin defines how your post looks like and what you want to put before, after and even in the middle of your content. You can even use it to add adsense codes but that’s another story. Installed the plugin? Now go to Settings > Post Layout > Before the content and/or Before the content. Paste this code right there:

<style>
.tripozia-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#FFFFFF;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center' class='tripozia-share-buttons'>
<span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_plusone_hcount' displayText='Google +1'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_pinterest_hcount' displayText='Pinterest'/>
<span class='st_digg_hcount' displayText='Digg'/>
<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
<span class='st_fblike_hcount' displayText='Facebook Like'/>
</p>

That's all. If this post works perfectly on your blog, say thank you by sharing on Facebook or hitting the Google +1 button. Or if you have encountered problems implementing this tutorial please let me know.

[Continue reading]

WordPress Conditional Tags (And Snippets) for Beginners

One of the best features of the WordPress could be the conditional tags. It allows you to tell the code to act differently in specific situations. For example, you can check if the user is using Windows or Mac, and display different content based on the systems. You can also redirect to post if search query only returns single result. You name the situations, the conditional tags can recognize them all!

Despite its flexibility on determining actions based on different situations, it’s also extremely easy to learn, and there are even tutorials and resources spread over the web for you to actually master it. That said, in this article we’ll go through a detailed introduction about the conditional tags, how they work and when to actually use them.
In the last section of the article we’ll also show 10 useful snippets for you to achieve the most with conditional tags, so get them all to make your WordPress site acts more intelligently to unique situations!

If (Statements)

With PHP if statements you can ask if something is true or false, 1 or 0. If your statement is true, your code will be executed, and if it’s false nothing will happen, depending on how you decide the actions in the conditional tags. Check out the example, and I’m sure you’ll understand what I’m talking about.

1. <?php  
2. if(10 == 10):  
3.     echo 'This is true, and will be shown.';  
4. endif;  
5.   
6. if(10 == 15):  
7.     echo 'This is false, and will not be shown.';  
8. endif;  
9. ?>  

<?php
if(10 == 10):
    echo 'This is true, and will be shown.';
endif;

if(10 == 15):
    echo 'This is false, and will not be shown.';
endif;
?>

You can also use elseif which lets you add another statement, and else that will be executed if your first statement is false.

1. <?php  
2. if(10 == 11):  
3.     echo 'This is false, and will not be shown.';  
4. elseif(10 == 15):  
5.     echo 'This is false, and will not be shown.';  
6. else:  
7.     echo 'Since none of the above is true, this will be shown.';  
8. endif;  
9. ?>  

<?php
if(10 == 11):
    echo 'This is false, and will not be shown.';
elseif(10 == 15):
    echo 'This is false, and will not be shown.';
else:
    echo 'Since none of the above is true, this will be shown.';
endif;
?>

That’s all you need to know about if statements for now, let’s get into WordPress conditional tags! However, if you want to dig deeper into PHP if statements, head over to php.net for reference.

How Conditional Tags Work?

When using the native WordPress function like is_home(), you simply ask WordPress if the user is currently on the home page or not. WordPress will then answer with 0 for no, and 1 for yes.

1. <?php  
2. if( is_home() ):  
3.     echo 'User is on the homepage.';  
4. else:  
5.     echo 'User is not on the homepage';  
6. endif;  
7. ?>  

<?php
if( is_home() ):
    echo 'User is on the homepage.';
else:
    echo 'User is not on the homepage';
endif;
?>

For a complete list over WordPress conditional tags you can visit their codex.

Combining statements

There are cases when you might want to check more than one statement. This is easily done by using AND and OR.

1. <?php  
2. if( is_home() AND is_page( 5 ) ):  
3.     echo 'User is on the homepage, and the home pages ID is 5';  
4. endif;     
5.   
6. if( is_home() OR is_page( 5 )):  
7.     echo 'User is on the homepage or the page where the ID is 5';  
8. endif;  
9. ?>  

<?php
if( is_home() AND is_page( 5 ) ):
    echo 'User is on the homepage, and the home pages ID is 5';
endif;   

if( is_home() OR is_page( 5 )):
    echo 'User is on the homepage or the page where the ID is 5';
endif;
?>

When To Use Conditional Tags?

Conditional tags are great when you want to change your content depending on the answers of question relevant to your site. Is the user logged in? Is she using Internet Explorer? Is there any post to be shown?
To get an example of conditional tags in use, we can look into Twenty Eleven’s (the standard theme in WP 3.2) index.php, line 20.

1. <?php if ( have_posts() ) : ?>  
2. ... posts ...  
3. <?php else : ?>  
4. ... search field ...  
5. <?php endif; ?>  

<?php if ( have_posts() ) : ?>
... posts ...
<?php else : ?>
... search field ...
<?php endif; ?>

This checks if there is any post to show, and if the answer is no, the search field is displayed.
Below is another example of WordPress conditional tags:

1. if( is_admin() ):  
2.     # User is administator  
3. endif;  

if( is_admin() ):
    # User is administator
endif;

1. if( is_home() AND is_page('1') ):  
2.     # The user is at the home page and the home page is a page with the ID 1  
3. endif;  

if( is_home() AND is_page('1') ):
    # The user is at the home page and the home page is a page with the ID 1
endif;

1. if( is_single() OR is_page() ):  
2.     # The user is reading a post or a page  
3. endif;  

if( is_single() OR is_page() ):
    # The user is reading a post or a page
endif;

1. if( !is_home() AND is_page() ):  
2.     # The user is on a page, but not the homepage  
3. endif;  

if( !is_home() AND is_page() ):
    # The user is on a page, but not the homepage
endif;

10 Useful Conditional Tags

The conditional tags available in the WordPress codex page are pretty limited to the big parts of WordPress, like posts, pages and such. There are, however, a lot of small and useful statements available if you look around the web.

Check if user is logged in

This will be a handy snippet if you have a blog with users registered, as it checks whether your user is logged in or not.

1. if ( is_user_logged_in() ):  
2.     echo 'Welcome, registered user!';  
3. else:  
4.     echo 'Welcome, visitor!';  
5. endif;  

if ( is_user_logged_in() ):
    echo 'Welcome, registered user!';
else:
    echo 'Welcome, visitor!';
endif;

[Source]

Show content if registration are opened / closed

A good snippet if you have user registration feature in your site, and you want to let visitors to know about whether the registrations are opened or closed.

1. <?php if ( get_option('users_can_register'):  
2.      echo 'Registrations are opened.';  
3. else:  
4.     echo 'Registrations are closed.';  
5. endif;  

<?php if ( get_option('users_can_register'):
     echo 'Registrations are opened.';
else:
    echo 'Registrations are closed.';
endif;

[Source]

Check if user is on a Mac or a PC

Want to provide specific content based on the Operating System that users are using? Here’s the snippet for you.

1. if( stristr($_SERVER['HTTP_USER_AGENT'],"mac") ):  
2.   echo 'Hello, I'm a Mac.'; 
3. else: 
4.   echo 'And I'm a PC.';  
5. endif;  

if( stristr($_SERVER['HTTP_USER_AGENT'],"mac") ):
  echo 'Hello, I'm a Mac.';
else:
  echo 'And I'm a PC.';
endif;

[Source]

Disable Google Analytics for logged in users

If you are using Google Analytics and you only want to track the visitors other than your authors and writers, you can probably use this snippet to achieve the purpose. Be sure to change UA-XXXXXXX-X to your Google Analytics ID.

1. <?php  
2. // function for inserting Google Analytics into the wp_head  
3. add_action('wp_footer', 'ga');  
4. function ga() {  
5.    if ( !is_user_logged_in() ): // íf user is not logged in  
6. ?>  
7.     <script type="text/javascript">  
8.       var _gaq = _gaq || [];  
9.       _gaq.push(['_setAccount', 'UA-XXXXXXX-X']); // insert your Google Analytics id here  
10.       _gaq.push(['_trackPageview']);  
11.       _gaq.push(['_trackPageLoadTime']);  
12.       (function() {  
13.         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;  
14.         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';  
15.         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  
16.       })();  
17.     </script>  
18. <?php  
19.    endif;  
20. }  
21. ?>  

<?php
// function for inserting Google Analytics into the wp_head
add_action('wp_footer', 'ga');
function ga() {
   if ( !is_user_logged_in() ): // íf user is not logged in
?>
 <script type="text/javascript">
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-XXXXXXX-X']); // insert your Google Analytics id here
   _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);
   (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   })();
 </script>
<?php
   endif;
}
?>

[Source]

Check if post is custom post type

Using the conditional tag below you can check if the current post is in a specific custom post type, for example, books.

1. <?php if ( is_singular( 'books' ) ):  
2.     // This post is of the custom post type books.  
3. endif; ?>  

<?php if ( is_singular( 'books' ) ):
    // This post is of the custom post type books.
endif; ?>

[Source]

Redirect to post if search query only returns single result

Add this snippet to your WordPress theme‘s functions.php to redirect your search to post automatically when WordPress only returns a single search result.

1. <?php  
2. add_action('template_redirect', 'single_result');  
3. function single_result() {  
4.     if (is_search()) {  
5.         global $wp_query;  
6.         if ($wp_query->post_count == 1) {  
7.             wp_redirect( get_permalink( $wp_query->posts['0']->ID ) );  
8.         }  
9.     }  
10. }  
11. ?>  

<?php
add_action('template_redirect', 'single_result');
function single_result() {
    if (is_search()) {
        global $wp_query;
        if ($wp_query->post_count == 1) {
            wp_redirect( get_permalink( $wp_query->posts['0']->ID ) );
        }
    }
}
?>

[Source]

Check if last post

The chances are if you’re using separators between your posts you probably don’t want to include it into the last post of the page. Include the conditional tag below into your loop where you want to display something only if it’s on the last post.

1. <?php if( ($wp_query->current_post + 1) < ($wp_query->post_count) ) { ?>  
2.     <div class="separator"></div>  
3. <?php } ?>   

<?php if( ($wp_query->current_post + 1) < ($wp_query->post_count) ) { ?>
    <div class="separator"></div>
<?php } ?> 

[Source]

Check if current user can…

There are times when you want to know the role of the users, for example you only want certain links (edit, etc) to be displayed for authors. The function current_user_can() works like what mentioned above, and here is the code:

1. <?php  
2. if( current_user_can('editor') ):  
3.     // true if user is an editor  
4. endif;  
5. if( !current_user_can('administrator') ):  
6.     // true if user is not admin  
7. endif;  
8. if( current_user_can('edit_posts') ):  
9.     // true if user can edit posts  
10. endif;  
11. ?>  

<?php
if( current_user_can('editor') ):
    // true if user is an editor
endif;
if( !current_user_can('administrator') ):
    // true if user is not admin
endif;
if( current_user_can('edit_posts') ):
    // true if user can edit posts
endif;
?>

[Source]

Disable Tinymce HTML editor for everyone but admin

Ever wanted to disable the Tinymce HTML editor for everyone but admin? Here’s the snippet for you.

1. <?php  
2. add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );  
3. add_action( 'admin_head', 'disable_html_editor_wps' );  
4. function disable_html_editor_wps() {  
5.     global $current_user;  
6.     get_currentuserinfo();  
7.     if ($current_user->user_level != 10) {  
8.         echo <style type="text/css">#editor-toolbar #edButtonHTML, #quicktags {display: none;}</style>;  
9.     }  
10. }  
11. ?>  

<?php
add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );
add_action( 'admin_head', 'disable_html_editor_wps' );
function disable_html_editor_wps() {
 global $current_user;
 get_currentuserinfo();
 if ($current_user->user_level != 10) {
  echo <style type="text/css">#editor-toolbar #edButtonHTML, #quicktags {display: none;}</style>;
 }
}
?>

[Source]

Check if user is coming from StumbleUpon

StumbleUpon is a great social media which is able to attract traffic to your site. Here’s a trick to attract the Stumblers: display a special message to welcome them by using the conditional tag below which checks if the user comes from StumbleUpon.

1. <?php if( strpos($_SERVER[HTTP_REFERER], "stumbleupon.com" ) == true ): ?>  
2.     <div class="welcome-stumbleupon">  
3.         <p>Hello StumbleUpon user!</p>  
4.     </div>  
5. <?php endif; ?>  

<?php if( strpos($_SERVER[HTTP_REFERER], "stumbleupon.com" ) == true ): ?>
    <div class="welcome-stumbleupon">
        <p>Hello StumbleUpon user!</p>
    </div>
<?php endif; ?>

[Source]

Final words

Hopefully you found WordPress conditional tags to be as awesome as I do. It saves me tons of time while developing templates, not having to come up with my own statements.
Also make sure to take a look at the WordPress Codex to see what else can be done with it. Happy coding!

[Continue reading]

The 5 Best New WordPress Plugins for 2012

No Doubts about it, there are some tested and working WordPress plugins out here that each WordPress user might as well have downloaded by now. Plugins like Akismet, Google XML Sitemap, and WP Super Cache are simply a few of the industry guidelines that more than once make the list of top WordPress plugins. At the same time even though 2012 is just a few months gone, there are some brand new plugins good to go for that every WordPress user should be rushing to download:

1. Google Referrer Checker
This Plugin records each connection that points someone to your website so that all sites connected to you are indexed in Google. While Google finishes a decently exceptional work on its own of indexing sites for you, the accuracy rate isn’t all in all up to 100%, and this plugin encourages google to spot any of the sites that it might have missed.
2. Pinterest RSS Widget
Discuss taking the world by storm – Pinterest shot straight up the totem shaft in webpage prominence essentially overnight. Increasingly bloggers are floating towards letting their site lovers/readers “PIN” their posts with the intention that they will range a more extensive crowd, making it foremost to download the Pinterest RSS Widget. This plugin permits you to include the “Follow Me on Pinterest” button to the bottom of posts so that your followers can take after you without hardly lifting a finger.
3. Track that Stat
Each blogger knows that Traffic is the driving constrain behind your website’s good fortune. The Track that Stat plugin permits website admins to see their post’s activity stats in legit time so they are unvaryingly familiar with how successful (or unsuccessful) their website is at any given time. This is particularly imperative when you’re attempting to investigate information and see what requires upgrade and what’s doing well.
4. PageRank Button
Proportionately as paramount in characterizing website success as site traffic is your official PageRank. The PageRank Button mechanically demonstrates to you your PageRank within Google with the intention that you are aware of where Google is ranking you.
5. Outbrain
The Outbrain plugin automatically presents your best posts at the end of your articles to help manage individuals to alternate articles that might interest them within your website. The longer you would be able to keep folks on your website the more they tend to come back regularly and become regular readers and subscribers, producing this a no-brainer when it approaches downloading plugins.
WordPress always try to roll out new plugins, all planned to help you power the most use and success of your website. By maintaining your plugins you are equipped to boost your online presences achievement and nonstop enhance zones that are needing.

[Continue reading]

Adding Floating Share Buttons To WordPress Without Plugin

You know just how it is when you’re searching for a worpress plugin without finding the one that does exactly what you want. I tried looking for a wordpress plugin to display the exact type of sharing buttons I was using on blogger but the one that looked almost like it didn’t work so well. These floating buttons include facebook share, facebook like, google +1, tweeter, stubleupon and digg. You can display the buttons onthe left or right side of the page as you can see on this page you’re presently reading. Adding the share buttons to your wordpress blog is quite easy as there’s absolutely no need editing your template.
How to Add Floating Share Buttons to WordPress Without a Plugin
1. Go to Appearance > Widgets
2. Drag the Text widget to your sidebar and paste the code below in the text area

<!–SideBar Floating Share Buttons Code Start–>
<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.tripozia.blogspot.com/2012/03/adding-floating-share-buttons-to.html" target="blank"><font color="black">[Get This Now]<font></font></font></a></div></div>
<!–SideBar Floating Share Buttons Code End–>


3. To make the buttons float to the left, find right:10px; in the code and change to left:10px;
4. Just save and view your blog to see the buttons appear.

You can style the share buttons by changing the background color and other things. To change the background color, simply find and replace #eff3fa in the code with your own color code.

For Blogger users, You can check this post – Floating Share Buttons To Your Blog’s Sidebar

[Continue reading]