Tip: How to Add a FLying Twitter Follow Button

[⚡JFarrow⌁]

A couple of night ago a fellow creator asked if there was a way to have a hovering/flying Twitter follow button to inspire members to follow them.  I found a solution and now I am sharing it with you.  This is what it will look like in top right corner of your site:

You need this image: 

and this one (which is optional and replacable)

Here is the code you'll need to add to your design studio custom CSS:

.follow-wrapper {  height: 44px;  overflow: hidden;  position: absolute;  top: 0;  width: 100%;}
.follow-button {  background-image: url(https://storage.ning.com/topology/rest/1.0/file/get/14644626);
background-repeat: no-repeat;       
background-position: 0 0;        
cursor: pointer;        
display: block;        
padding: 7px 0 7px 40px;        
position: absolute;       
right: -168px;       
top: 5px;    -webkit-transition: right 0.3s;        -moz-transition: right 0.3s;        transition: right 0.3s;        width: 168px;}
.follow-button:hover {-webkit-animation: fly 0.2s steps(4) 0 10;        -moz-animation: fly 0.2s steps(4) 0 10;        animation: fly 0.2s steps(4) 0 10;        right: 0;}
@-webkit-keyframes fly {  from {    background-position: 0 0;  }  to {    background-position: 0 -140px;  }}
@-moz-keyframes fly {  from {    background-position: 0 0;  }  to {    background-position: 0 -140px;  }}
@keyframes fly {  from {    background-position: 0 0;  }  to {    background-position: 0 -140px;  }}
.hover-me {  background-image: url(https://storage.ning.com/topology/rest/1.0/file/get/14644708);  height: 184px;  position: absolute;  right: 5px;  top: -5px;  width: 274px;}

And here is the code you'll want to add to a HTML module or a page footer (change the bold underline parts with your own):

 

<div class="hover-me"></div>

<div class="follow-wrapper">
<div class="follow-button">
<a href="https://twitter.com/jbirds_co" class="twitter-follow-button" data-show-count="false">Follow @jbirds_co</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>

 

And here is a demo:

Let me know if you need help with your Ning Community

[Kos]

[Kyryl_Ning_Support]

Cool tip! Thanks for sharing

[⚡JFarrow⌁]

my pleasure...hope someone finds it useful

[Zachary Hunt]

Thank you a lot, great job!