LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Social Sharing / Website / Website Social Sharing » Simple Facebook Like-Send, Tweet, Google+ Button For Blog & Website

Simple Facebook Like-Send, Tweet, Google+ Button For Blog & Website

Even though Facebook Like & Send, Twitter Tweet and Google +1 social sharing buttons can be added easily enough by following their respective tutorials, aligning them perfectly side by side is a bit tricky. Several readers were having trouble with the alignment and contacted me for help.Today is the most important is to share your article to social network which is good for your website or help other people too, but if you manually share your article to social network it will garb an extra time and if your visitor want to share it it will experience the same problem too, so here is the simple but stylish sharing widget for you,the screen shoot is giving below so you can check what will happen.Now its time to do it write now…
Rather than attempting to explain how to align your existing buttons, I think it’s easier to just give you a new set of codes for the buttons with the alignment built in. Simply remove your existing buttons and add the new code using the following steps:

Features:
1.) Facebook Like+Send Button With Counter.
2.) Tweet Button With Counter
3.) +1 Button With Counter.
4.) LinkedIn Button With Counter.
5.) Multiple Social Sharing Widget With Counter.
6.) Horizontally Aligned.
7.) Shaded Rounded Corner Box Packed.
8.) Just Visible On Full Post Page.

Recommended For You:
How To Add FeedBurner Feed Count Animated Widget

How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Edit HTML.
4.) Expand Widget Template.
5.) Then First Decide Where To Put This.
6.) Below The Post,Below The Header, In The Post Footer, Below The Post Footer. (Please Check Customization Heading.)
7.) Then Paste The Below Code Just There.
8.) Save And Done.

<!-- Scripts Start --> <b:if cond='data:post.isFirstPost'> <!-- Facebook --> <div id='fb-root'/> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;; fjs.parentNode.insertBefore(js, fjs); }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;)); </script> <!-- Google +1 -->  <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script>  <!-- Twitter -->  <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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script> </b:if> <!-- Scripts End --> <!-- Horizontal social buttons Start --> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <div class='horizontal-social-buttons' style='padding:5px 0 5px;'> <!-- Twitter --> <div style='float:left;'> <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a> </div> <!-- Google +1 --> <div style='float:left'> <g:plusone size="medium" expr:href="data:post.canonicalUrl"/> </div> <!-- Facebook Like+Send --> <div style='float:left;'> <fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/> </div> </div> </b:if> <div style='clear: both;'/> <!-- Horizontal social buttons End -->

Customization:
Button Positioning:-
1.) To position the buttons at the top of post , place the code above
<data:post.body/>
2.) To position the buttons at the bottom of post, place the code below
<data:post.body/>
3.) To position the buttons at the in footer box of post, place the code below
<div class=’post-footer-line post-footer-line-3’/>
4.) To position the buttons after the footer box of post, place the code below
<div class=’post-footer-line post-footer-line-2’/>
<div class=’post-footer-line post-footer-line-3’/>
</div>
</div>

Recommended For You:
Change New Blogspot Threaded Comment Template With Pure CSS Code

You Like It, Please Share This Recipe With Your Friends Using...

15 Responses to “Simple Facebook Like-Send, Tweet, Google+ Button For Blog & Website”

  1. EXEIdeas says:

    Thanks Bro…

  2. Rishis Lyrics says:

    i cannot find in template html

  3. Dheeraj Verma says:

    can you please help me i implemented send button below my Post as a Do you Like…” box .

    but when i click on send the half send form hidden behind the comment section.

    Please help me out.

    http://www.iDeas4iOS.com

  4. Irfan Ahmad says:

    Thank you Muhammad Hassan for sharing this. I’ve added this on my blog http://ipadfour.blogspot.com/ but can I customize the color of buttons into gray or white.

  5. Very Nice —Great Job!

  6. Hey , Could you update the code to include Tumblr share button?

  7. TheTexas Nepali says:

    nt working

  8. Monster Blogger says:

    Your article helped me to understand the topic well and I would love to share this to my friends. I also love to
    Get Likes for your website
    Thank you for this and all the best.

Leave a Reply

Your email address will not be published. Required fields are marked *