Floating Facebook Like Box for Website/Blogger

Here's the tutorial for Floating Facebook Like Box for Blogger. I already see this Floating Facebook Likes in WordPress and Joomla! platform. see the DEMO here

Adding Jquery Plugin

Before you do this tutorial its better to back-up first, template.

1. Sign in to Blogger
2. Go to your Dashboard>Design>Edit HTML
3. Add this code above the closing </head> tag in your HTML file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>

Adding Widget Code

1. Go to Design>Add a Gadget>HTML/JavaScript
2. Add This code to HTML/JavaScript Widget

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FLiveinManila&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://alljectsart.blogspot.com/2012/06/floating-facebook-like-box-for.html" target="_blank">+Get This!</a></span></div></div>

Replace "LiveinManila", with your Facebook fan page URL.

Read More

facebook-id-finder

How can I find out someones Facebook ID?

You can use Facebook's Friend Finder by typing in their name.

In order to use our Facebook ID Finder, you don't have to be logged in to your Facebook account.

All you need to do is enter your Facebook Profile username or Page in the top input field, and in a second you will find all the information you need.

Read More

Twitter Follower Box Widget Like Facebook Social Plugin

We got a new tutorial the Twitter Follower Box look like a Facebook Follow/like.

Many website designer have been waiting for this great application, that allows your visitors to follow you via twitter without leaving your site. It's called Twitter Follower Box or Twitter Fan Box. It works like and is closely based on Facebook fan/Like box algorithm. The Fan box code is created by Mark Carey.

If you've visited author site, and follow him on twitter, you'll see the code shown. But you can resize the widget size as you need. Now I'll give you the code, which you can resize to fit in your blog.

Here's the step by step installation of Twitter  Follower Box / Fan box to your website of blogs.

a. Go To Blogger > Design
b. Select HTML/JavaScript widget
c. Paste the code below inside it

<!-- Twitter Follower Box -->
<script type='text/javascript'>
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 295px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("lyricspinas");</script
type="text>
<!-- End Twitter Follower Box -->

d. Replace lyricspinas with your twitter username
e. Save and you are done!

The widget will looks like above photo. Good Lucks guys.

Read More