How to Add a Styled Google+, Facebook and Twitter Sharing to Your Blog in an Instant

Social networking isn’t just great to meet and greet new people; it’s an essential tool for marketing and updating your readers on your latest and greatest content.

In order to make the direct link between your usage of social media to your blog back to your followers is to allow them to share your content with their followers.

How do you do that without employing a “social media marketer” and installing a bunch of deadly WordPress plugins?

Install an easy to use share menu within your blog using the Thesis Theme for WordPress.

All you need to do to achieve this is paste a few lines of pre-written code into your custom files and your content will start being shared like wild.

Step 1: Create the Function

Login into your WordPress admin and navigate to your Thesis admin panel. Click on the Custom File Editor and select custom_functions.php from the edit selected file menu.

Insert this code under your existing code, if you have any.

/* Share Menu */

function thesis_share() { if (is_single()) { ?>
    <ul class="share_menu">
        <li>
            <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="username">Tweet</a>
            <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        </>
        <li>
            <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=button_count&amp;show_faces=false&amp;
width=200&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; height: 20px; width: 100px"></iframe>
        </li>
        <li>
        	<g:plusone size="medium"></g:plusone>
        	<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        </li>
    </ul>
<?php } }
    add_action('thesis_hook_before_post', 'thesis_share');

If you don’t have a Facebook page or account setup for your blog, you may want to consider deleting the Facebook like button from the code above. Additional share buttons can be added by visiting the relevant network as most have them.

If you want your @username on Twitter to be included every time people retweet your content, replace data-via=”username” with your own Twitter username.

Adding a Little Style

Now, switch to your custom.css stylesheet within your file editor.

Enter this code underneath any existing code. Adjust it to your liking and a share menu will appear before and after your post content.

/* Share Menu */

ul.share_menu { border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; list-style: none; margin: 0 0 1em 0; padding: .6em 0 .2em 0; overflow: hidden }
	ul.share_menu li { float: left }

Once you have inserted these 2 snippets of code into the relevant files, the Thesis share menu is installed into your site. You no longer need to use those share plugins that slow down your site!

Tagged as: facebook, google+, share menu, social media, social networking, twitter