Add social sharing widget to Blogger or WordPress Website

Posted 6:58 pm by muni & filed under BLOG, FACEBOOK.

Social sharing widget for Blogger

Social bookmarking widgets are one of the important tool to increase traffic of blog or website. This ensures maximum reach-ability your blog posts. Please follow the few simple steps to add this social sharing button at the end of the post. This widget has three popular social networking share buttons twitter, facebook and Google plus.

note : Before continuing below steps, please revert to old blogger interface if you are using new blogger interface. To revert to older interface Go to Blogger home and click on blogger options buttons top right (just below the log out button) of blogger home page. Click old blogger interface button it automatically reverted to old blogger interface.

Blogger home page

Steps 1: Go to Blogger Dashboard and click on Template

Step 2: Now find the Backup/restore button on the top right of the page.( In case if you done mistake during share button installation in your blog it will be helpful to you)

Step 3: Now click on Edit HTML button to continue.

Blogger Dashboard

Step 4:  Check Expand Widget Template checkbox to proceed.
Step 5: Find the below code in your blog template.

<div class='post-footer-line post-footer-line-1'/>

Now copy and paste below code just before above code.

<b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg {
    height: 103px;
    background: url(http://dl.dropbox.com/u/49791983/social-sharing-widget.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 3px;
	margin-bottom: 5px;
}

.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;
}

.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;
}

.promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
    <div class='promote_post_bg'>
        <div class='promote_twitter'>
            <a class='twitter-share-button' data-via='smarttutorials' href='https://twitter.com/share'>Tweet</a>
            <script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
            </script>
        </div>
        <div class='promote_facebook'>
       <fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false'
                show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like>
            <div>
                <b:if cond='data:post.isFirstPost'>
                    <script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                    </script>
                </b:if>
                            </div>
        </div>
        <div class='promote_google'>
            <g:plusone annotation="none" size='medium'></g:plusone>
            <script type='text/javascript'>
                (function () {
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
            </script>
        </div>
    </div>
</b:if>

Now save your template and you are successfully added the social sharing buttons to your blogger. Now open your blog post you will have beautiful social sharing button at the end of each your blog post. You had done great thing for your blog, Cheers!!!!!!!!!!

Add this widget in wordpress site :

Step 1: Go to WordPress Dashboard ->Appearance ->Editor.

Step 2: Find the single.php file in the right side of the page and select it.

Step 3: Now find the below code in the single.php file.

<?php the_content(); ?>

Step 4: Now copy and paste above code social sharing button code just below this <?php the_content(); ?> one.

now you have successfully added sharing button to your wordpress site.

Also Refer my another tutorial on

How to add facebook comment box to blogger

Demo

.