Flipper Sharing Widget

flipper sharing widget
Two years ago we released a simple sharing widget using the flapper Icon set. We made use of CSS sprites in order to make the roll over effect more quick and effective. Now when we have already taught most of you how to apply CSS3 transitions, its time to apply them in a different way. I just designed two additional flapper icons for Pinterest and Google Plus and now this new version has several benefits over the previous. The Icons rotate vertically and flips upon mouse hover. The time taken by the effect is so small that the user rarely notices image shift. We will be releasing some more social media icons in coming days with some unseen CSS3 effects to let you take the full bliss of animation without using jquery. Please see a demo first:



Live Demo



Update: Google Plus link has been corrected and now you can share your posts on Google+ too with both thumbnail and description.

Our Lab is too over crowded with gadget and plugins so please wait for a minute for the page to load.

How it works?

We used our predesigned icons and packed them into one image. Then we created separate classes for each icon by specifying the background position property in order to connect the sub classes with the main class containing the Packed image. For the vertical flip effect we used the property of ease-in and timed it at o.15 seconds.
Flapper set includes a total of 12 icons but we have excluded Technorati, yahoo and YouTube icons in order to make use of the more useful ones like:
  1. Google Plus
  2. Facebook
  3. Twitter
  4. Pinterest
  5. Delicious
  6. Digg
  7. Stumble upon
  8. Reddit
  9. RSS

Why use it?

  1. It uses only CSS and no Scripts,
  2. It loads from your very own blog and does not connect to third party servers,
  3. It loads fast and looks great!
  4. Attracts readers and increases chances of social circulation

Add it to Blogger

This gadget can be inserted easily in any blogging platform by making simple changes to the Sharing links. Blogger users can follow these easy steps to install flipper on their blogs:
  1. Go To Blogger > Template
  2. Back up your template
  3. Click Edit HTML > Proceed
  4. Click the Expand Widget Templates box
  5. Search for  <data:post.body/>
  6. Just below it paste the following HTML code
<style>
/*--------Flipper Sharing Widget ------*/
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh72dJ1H-pLu6UwrMlX0_K3Va0GWG8OhiJethqo8TvI-Ai589XfXqbcdauhtE31Rydz_nU3vYbTGfkO9Em4_lAT9nG6R_n1zXuVLBivLdBpHsQvP25sxK3Ah4p3yD1GqsW2epeDpztrZOGU/s1600/flipper.png) no-repeat;
-webkit-transition: ease-in 0.15s all;   
-moz-transition: ease-in 0.15s all;   
-o-transition: ease-in 0.15s all;   
-ms-transition: ease-in 0.15s all;   
transition: ease-in 0.15s all;
cursor:pointer;
}

.flipper a.googleplus {
background-position: 0px -348px;
}
.flipper a.googleplus:hover {
background-position: 0px -406px;
}

.flipper a.pinterest {
background-position: 0px -464px;
}
.flipper a.pinterest:hover {
background-position: 0px -522px;
}

.flipper a.delicious {
background-position: 0px 0px;
}
.flipper a.delicious:hover {
background-position: 0px -58px;
}
.flipper a.digg {
background-position: 0px -116px;
}
.flipper a.digg:hover {
background-position: 0px -174px;
}
.flipper a.stumbleupon {
background-position: 0px -812px;
}
.flipper a.stumbleupon:hover {
background-position: 0px -870px;
}
.flipper a.technorati {
background-position: 0px -928px;
}
.flipper a.technorati:hover {
background-position: 0px -406px;
}
.flipper a.twitter {
background-position: 0px -928px;
}
.flipper a.twitter:hover {
background-position: 0px -986px;
}
.flipper a.facebook {
background-position: 0px -232px;
}
.flipper a.facebook:hover {
background-position: 0px -290px;
}
.flipper a.reddit {
background-position: 0px -580px;
}
.flipper a.reddit:hover {
background-position: 0px -638px;
}
.flipper a.rss {
background-position: 0px -696px;
}
.flipper a.rss:hover {
background-position: 0px -754px;
}

.Pleaseshare{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:20px;
font-family:sans-serif;
}
</style>

<div class='flipper'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="Pleaseshare">
Please Share it! :) </div>

<!--Google Plus-->
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>

<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

<!-- Pinterest -->
<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>

<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/>
</b:if></div>
<div style="clear:both"/>
Make these changes:
  • To change the color of the text that appears on top of widget edit #333333
  • If in case you wanted to remove some icons then just delete its code. For example if we wish to remove the Digg icon from the list then we just need to delete the code:
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
The HTML has been cleanly indented and structured so you would not encounter any trouble playing with the code.

Play with the code

If you are looking to rearrange the icons or shuffle them or even to remove some then you would enjoy using our HTML editor.
Tip: Copy and paste this entire code inside the HTML editor and hit preview!

Need help?

If you trouble shooted yourself then just let us know. I just hope you find this new gadget worth trying. I have planned some more gadgets for this week and I am sure they would engage your readers even more. Peace and blessings pals. :)
Did you check the following?

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

41 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. I Just noticed your new Footer. It's Awesome !

    I hope you will share with us soon ;D

    ReplyDelete
  2. Bro there is one error

    Correct The Pinterest Line. you have not closed the url

    Wrong: href='http://pinterest.com/
    Correction: href='http://pinterest.com/' ( Last Coma )

    Learning HTML now-a-days :D

    ReplyDelete
  3. @haider

    Thanks for correcting haider and yes sure I will share the widgets used in footer.

    Glad to know you enjoying HTML dude :>

    ReplyDelete
  4. Also Bro The GPlus button do not work for +1 Post

    Just check once i did little customization at skfanclub

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Cool Widget For Bloggers Thanks Mustafa

    Speak With Photos -Animator

    ReplyDelete
  7. Thanks nice widget :)

    http://nannu4u.blogspot.in/

    @haider :: Y U Always Comment first ? :P

    ReplyDelete
  8. Google plus button not working..

    ReplyDelete
  9. I like the style of this widget
    but its animations are little bit speedy. I dont like it. Over animated bro..
    I like your footer. Hope you will share its secrets.
    I sent you a mail through contact me forum. You not gave me a reply yet.
    Hope you will give it soon..

    http://achusoft.blogspot.com

    ReplyDelete
  10. its showing error on my blog
    please help

    ReplyDelete
  11. Error parsing XML, line 1279, column 56: Element type "a" must be followed by either attribute specifications, ">" or "/>"

    ReplyDelete
  12. @haider @freen8apps
    Since no direct script for G+ share is available or may be I could not get one. I have provided a link directly to the users profile. If you found a code for G+ or pinterest icons then please share it.


    @ aswath

    If you think you don;t like the transitions then you can delete the following code:


    -webkit-transition: ease-in 0.15s all;
    -moz-transition: ease-in 0.15s all;
    -o-transition: ease-in 0.15s all;
    -ms-transition: ease-in 0.15s all;
    transition: ease-in 0.15s all;

    This will remove the flipping effect.

    I will check your mail bro. Actually the number of emails per day are increasing daily and its getting difficult to manage blog.

    @Abdul Rafay
    I just updated the code. it works fine now. Apologies for inconvenience.

    ReplyDelete
  13. Bro
    The google plus and Pinterest sharing are not working
    Why cant you use the same code of your floating widget ( google +1 , Pin it ) for fixing the problem ?

    http://achusoft.blogspot.com

    ReplyDelete
  14. Mustafa bhai just see how i did on skfanclub.com

    i think for time being we can use like this .....

    ReplyDelete
  15. thanks brother i love this site

    ReplyDelete
  16. Brother,
    How do you solved the Error problem ?
    Please explain
    When i created a subscribption box below post, I got an error saying " Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: Element type "form" must be followed by either attribute specifications, ">" or "/>". "

    but i closed form tag. Then whats the problem ???
    Please help me to solve the problem
    plsss...

    ReplyDelete
  17. in my template is at 2 places where should i paste this code now

    ReplyDelete
  18. it doesnt appear on my blog :( I pasted your given code on right place.. what i do ? :S

    ReplyDelete
  19. @twinkle The widget is working just perfectly. See another demo here Flipper Sharing


    @Aswath

    The google plus button would still take the visitor to his profile where he can share your link. So it works pretty good though we don't have a direct script for it.

    for that error, make sure all div,form,a,p tags are closed properly

    @karthik

    the first occurrence buddy.

    @yatheen

    You didn't try it :)

    ReplyDelete
  20. Thanx Alot Mohammad Bro !

    Visit : www.CsLoversPro.Blogspot.Com

    ReplyDelete
  21. How to show the share counter?

    ReplyDelete
  22. looks great but the only one that is linking is pintrest? too bad.... anyone else have this issue?

    ReplyDelete
  23. Yes, the only one which is working is Pinterest...

    ReplyDelete
  24. Why we need RSS button in this sharing widget?
    because it showing codes, what user will do with that code? only SE can understand it.

    ReplyDelete
  25. i am confused ..in new blogger template data:post.body/> shows are 3...
    what is a place to paste these codes??1data:post.body/> or 2 data:post.body/>
    3 data:post.body/> ????

    ReplyDelete
    Replies
    1. Furqan, I had 2 and it only worked when I added to the 2nd. Hopt his helps

      Delete
  26. Thank you so much for this wonderful tool. I was able to install it and am glad to see it in my post. However, is it possible to have it under each post? By that I mean that on the home page none of the posts show the plugins, only when you go to each individual post. Since people can read the post in its integrity from the home page, they may not see them. Thanks again.

    ReplyDelete
  27. Admin Ki Himat hai k hum jesy logon ko sambhal rakha hai. Koi hurR hota to Jutiya marR maRr k bhaga deta :v

    ReplyDelete
  28. hi, thanks for al your work. I, like many others it seems, don't have anywhere in my code... any ideas?

    ReplyDelete
  29. sorry I did write it but hasn't shown, I don't have 'data post body' anywhere

    ReplyDelete
  30. ok so I instead just added it as a widget through html, but pinterest is the only one linking, as mentioned a while back. was there ever a solution?
    thanks

    ReplyDelete
  31. Thank You So Much For This Nice Widget

    ReplyDelete