Please support us by disabling ad blocker for smarttutorials.net ...

Add social sharing widget to Blogger or WordPress Website

Posted by & filed under BLOG, FACEBOOK.

social-sharing-widget-for-blogger

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-add social sharing buttons to blogger

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- how to add social sharing button to blog

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

.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!