Social networks are an important connection between the author and the readers. To make it easier for your audience to follow your blog, add one-click follow buttons for Twitter and Google+ on your blog.
Here’s how.
There are many spots where you can add the buttons, but the most optimal are the Primary (navigation) menu and the sidebar.
For Twitter, we will use the IFRAME code, like this:
<iframe style="width: 60px; height: 20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=YOURTWITTERNAME&show_screen_name=false&show_count=false" frameborder="0" scrolling="no" width="320" height="240"></iframe>
This code displays only twitter icon and “follow” text, without followers (show_count=false) count and account name(show_screen_name=false). It’s a short button, perfect for close quaters like navbar or sidebar. You may enable those features if you wish, but be sure to adjust the width and height. I can’t emphasize this enough: if the value for width is too much, all the elements following the button will be automatically moved to the next line, ruining all design, so adjust width wisely.
To add the code to Primary menu, edit the header.php of your WordPress theme and add the above code after this section:
<nav id="menu" role="navigation"> <?php wp_nav_menu( array( 'container' => false, 'menu_id' => 'primary-menu', 'theme_location' => 'primary-menu' ) ); ?>
A little style trimming of padding and margin may be required to fit your specific navbar.
My code looks like this:
<iframe style="width: 60px; height: 20px; padding-top: 10px; padding-left: 5px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=YOUR_TWITTER&show_screen_name=false&show_count=false" frameborder="0" scrolling="no" width="320" height="240"></iframe>
To add the code to sidebar, edit the sidebar.php and add the button code where you need it, typically after this:
<?php the_widget( 'WP_Widget_Meta', array(), array( 'widget_id' => null, 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>' ) ); ?> <?php endif; ?>
For Google+, we will use the official link to create the button code. The tool may tell you to add additional code to header.php, so do as instructed.
I created a simple small icon code, to go in style with the Twitter button.
To add it to the Primary menu, open header.php and add the button code right after the Twitter button code as described above.
To add both Twitter and Google+ buttons to the sidebar, I used the following code:
<div style="margin-left: 5px;"><iframe style="width: 60px; height: 20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=YOUR_TWITTER&show_screen_name=false&show_count=false" frameborder="0" scrolling="no" width="320" height="240"></iframe></div> <a style="text-decoration: none;" href="https://plus.google.com/YOUR_GOOGLE?prsrc=3"><img style="border: 0; width: 16px; height: 16px; padding: 2px;" src="https://ssl.gstatic.com/images/icons/gplus-16.png" alt="" /></a>
Read more on adding Paypal and Google Search items to your navigation bar.
Follow me on Twitter by clicking the follow button.