All-In-One Social Media Widget With Cute Subscription Form

Yesterday, you were finally able to acquire a ‘silly’ twitter bird flying around your website. Today I am going to show you how you can add a floating social media box with a cute subscription form to your website or blog.

Nothing new, just an old tutorial we use to have in our blog but I decided to move it to the main page (don’t ask me why). The all-in-one social media box is in a way similar to the floating facebook like box but the major difference being that the latter support only one social media box (facebook).

The all-in-one social media widget uses JQuery and css3 to add a floating facebook, twitter, google+ and feedburner subscription form boxes to your website. This widget hides the individual contents of this boxes into 4 different containers and only reveals it’s contents when visitor hovers on the floating buttons.

The image above is a poor taken screenshot of what the all-in-one subscription box looks like. To have a clearer picture of how this widget works, kindly visit our demo page.

The Magic that Works

Adding the following code anywhere in the <body></body> section should work just fine. But if you are using a cms (e.g: oxwall, wordpress, joomla, drupal,smf etc) to avoid making mistakes, it is advisable you use a Custom HTML/JavaScript Widget which is found in every cms. Just paste the following code into a new Custom HTML/JavaScript Widget.

<style>
img,a {
border: 0;}
#on {
visibility: visible;}
#off {
visibility: hidden;}
#facebook_div {
width: 196px;
height: 340px;
overflow: hidden;}
#twitter_div {
width: 246px;
height: 353px;
overflow: hidden;}
#google_plus_div {
width: 152px;
height: 97px;
overflow: hidden;
margin-left: 50px;
margin-top: 10px;}
#knfeedburner_div {
width: 300px;
height: 97px;
overflow: hidden;
margin-top: 5px;
margin-left: -4px;}
#kakinetwork_div {
width: 300px;
height: 97px;
overflow: hidden;
}/* right side style /#facebook_right {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
right: -200px;}
#facebook_right img {
position: absolute;
top: -2px;
left: -35px;}
#facebook_right iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
left: -2px;
top: -3px;}
#twitter_right {
z-index: 10004;
border: 2px solid #6CC5FF;
background-color: #6CC5FF;
width: 246px;
height: 353px;
position: fixed;
right: -250px;}
#twitter_right_img {
position: absolute;
top: -2px;
left: -35px;
border: 0;}
#google_plus_right {
z-index: 10003;
background-color: #F2F2F2;
border: 2px solid #006ec9;
border-top: 2px solid #0056a0;
border-bottom: 2px solid #0056a0;
border-right: 2px solid #0056a0;
border-left: hidden;
width: 152px;
height: 97px;
position: fixed;
right: -154px;}
#google_plus_right_img {
position: absolute;
top: -2px;
left: -33px;
border: 0;}
#feedburner_right {
z-index: 10003;
background-color: #fefefe;
border: 2px solid #5b5b5b;
border-top: 2px solid #5b5b5b;
border-bottom: 2px solid #5b5b5b;
border-right: 2px solid #5b5b5b;
border-left: hidden;
width: 300px;
height: 97px;
position: fixed;
right: -303px;}
#feedburner_right_img {
position: absolute;
top: -2px;
left: -33px;
border: 0;}
#kakinetwork_right {
z-index: 10003;
border: 2px solid #303030;
background-color: #fff;
width: 300px;
height: 97px;
position: fixed;}
#kakinetwork_right img {
position: absolute;
top: -2px;
left: -101px;
}/
left side style /#facebook_left {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
left: -200px;}
#facebook_left img {
position: absolute;
top: -2px;
right: -35px;}
#facebook_left iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
right: -2px;
top: -3px;}
#twitter_left {
z-index: 10004;
border: 2px solid #6CC5FF;
background-color: #6CC5FF;
width: 246px;
height: 353px;
position: fixed;
left: -250px;}
#twitter_left_img {
position: absolute;
top: -2px;
right: -35px;
border: 0;}
#google_plus_left {
z-index: 10003;
background-color: #006ec9;
border: 2px solid #006ec9;
border-top: 2px solid #0056a0;
border-bottom: 2px solid #0056a0;
border-left: 2px solid #0056a0;
border-right: hidden;
width: 152px;
height: 97px;
position: fixed;
left: -154px;}
#google_plus_left_img {
position: absolute;
top: -2px;
right: -33px;
border: 0;}
#feedburner_left {
z-index: 10003;
background-color: #fefefe;
border: 2px solid #5b5b5b;
border-top: 2px solid #5b5b5b;
border-bottom: 2px solid #5b5b5b;
border-left: 2px solid #5b5b5b;
border-right: hidden;
width: 300px;
height: 97px;
position: fixed;
left: -303px;}
#feedburner_left_img {
position: absolute;
top: -2px;
right: -33px;
border: 0;}
#kakinetwork_left {
z-index: 10003;
border: 2px solid #303030;
background-color: #fff;
width: 300px;
height: 97px;
position: fixed;}
#kakinetwork_left img {
position: absolute;
top: -2px;
right: -101px;}
.box-title1 {
border: 1px solid #ddd;
/
border-radius/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
/
box-shadow/
-webkit-box-shadow: 5px 5px 5px #CCCCCC;
-moz-box-shadow: 5px 5px 5px #CCCCCC;
box-shadow: 5px 5px 5px #CCCCCC;
padding: 10px;
margin: 10px 0;}
.enteryouremail {
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999;
font-size: 12px;
height: 25px;
width: 165px;
/
border-radius/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 0px;}
.submitbutton {
background: #F2F2F2;
border: 1px solid #F66303;
/
box-shadow/
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
font: bold 12px Arial, sans-serif;
color: #000000;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
/
border-radius*/
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;}
</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script>
<div id="on">
<div id="facebook_right" style="top: 18%;">
<div id="facebook_div">
<img src="http://2.bp.blogspot.com/-AwJK988Hw9U/T_CUbBXoLmI/AAAAAAAABuM/XIwgqyH0zLw/s1600/facebook-icon.png" alt=""/>
<iframe src="//www.facebook.com/plugins/likebox.php?
href=http%3A%2F%2Fwww.facebook.com%2Felitestech&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true">
</iframe>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 35%;">
<div id="twitter_div">
<img id="twitter_right_img" src="http://2.bp.blogspot.com/-ggLNgeprfJo/T_CUf8BMk8I/AAAAAAAABuk/f38udn9GKo4/s1600/twitter-icon.png"/>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }})
.render().setUser('ebenzunlimited').start();</script>
</div>
</div>
</div>
<div id="on">
<div id="google_plus_right" style="top: 52%;">
<div id="google_plus_div">
<img id="google_plus_right_img" src="http://1.bp.blogspot.com/-zwfLV74trKg/T_CUcBJIkVI/AAAAAAAABuU/LVVwVCRESpI/s1600/google-plus-icon.png"/>
<div style="float:left;margin:10px 10px 10px 0;">
<g:plusone size="tall" expr:href="data:post.url"></g:plusone>
</div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 69%;">
<div id="knfeedburner_div">
<center>
<h4 style="color:#F66303;">
You can also receive Free Email Updates:</h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=xylxo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text"/>
<input value="XylXo" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>
</form>
</center>
<img id="feedburner_right_img" src="http://3.bp.blogspot.com/-Kw-Vbf9fQ9U/T_CUdFKZUQI/AAAAAAAABuc/5FhLcDmWmuA/s1600/subscribe-icon.png"/>
</div>
</div>
</div>
</div>

If your are using the blogger platform, you can do the following:

  • Go To Blogger > Design > Page Elements
  • Click on “ADD A GADGET”
  • Choose HTML/JavaScript Widget
  • Paste the above Code inside it..

Make the Following Changes

elitestech to your facebook fanpage username. If you don’t have one visit www.facebook.com/username
ebenzunlimited with your twitter username
xylxo with your rss feed id. To obtain your feed id kindly visit feedburner.com.

Now you are set. save the widget and and leave a wonderful comment below.

Did you get the answer you were searching for?

Save hours of searching online or wasting money testing unnecessary plugins, get in touch with me and let's discuss a suitable plan for your project. Best thing about this service is that you are never placed on hold and get to talk to an expereinced Oxwall/Skadate developer.

Get Answers for Free!

Ask a question related to this topic and get immediate answers from other community members in 48hrs or less. Contribute by answering members questions.

Ask Question
Premium Service

Whether it's a custom plugin, theme or dedicated support needed to get you started on your project, get professional 24/7 support tailored to your need.

Get in Touch

Or just leave a comment...

Leave a Reply