Tricks For Blogger :blog templates,blog hack, tricks: Facebook

Facebook Comments box for blogger installation guide

here is few step to install facebook comment box with blogger comment box this will apear on your blog in tab view

Create a Facebook App

In order to control and keep a backup of the comments made on your blog you will need to create a FB application. The steps of creating this app is very simple. Simply follow these easy steps:
Note: Facebook has changed its layout interface so the screenshots could look a little different from current interface. Steps are exactly the same.

Go To Facebook Developers Page
Submit your blog URL and give it a name. Keep Site name as your "Blog Title" and Site URL as your "blog address"

3. Hit "create app" button and proceed
4. After submitting the security check code you will see this page,
app-id

5. Save that FACEBOOK APP ID in a notepad because we will need that later. Now Click the link near the top-right corner of the same page that says "Developer Dashboard"

6. One the new window that appears click the Edit Settings link ,
edit-settings

7. Then go to Website option and write your Site Domain as blogspot
website

8. Save Changes and jump to the next step of this tutorial

Creating Tabs For Facebook Comments in Blogger

For blogger comments to display next to tabbed facebook comments, your blogger comment form settings must be set to embedded below post. To show blogger comments below posts do this:

Go To Blogger > Settings > Comments
Set "Comment Form Placement" to Embedded below post

Now follow these easy steps one by one:

Go To Blogger > Design > Edit HTML
Backup your template
Click the "Expand widget templates" box
Search for <head>
Just below it add the following code,

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='Blog LOGO Image Link' property='og:image'/> <meta content='FACEBOOK APP ID' property='fb:app_id'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
      $(".comments-tab").addClass("inactive-select-tab");
      $(selectTab).removeClass("inactive-select-tab");
      $(".comments-page").hide();
      $(selectTab + "-page").show();
    }
    </script>

Replace Blog LOGO Image Link with the image link of your blog logo. Your logo size should be as small as 30px by 30px in size. If you don't want a logo to display whenever someone shares your comment on his wall then simply delete the yellow highlighted code.
Replace FACEBOOK APP ID with the numeric facebook app Id that you were asked to note down. You can find your Facebook App ID in settings page of the app you created earlier.

6. Search for <html and replace it with the following code,

<html xmlns:fb='http://www.facebook.com/2008/fbml'

Note: Give a space at the end of the above code.

   7.  Now Search for ]]></b:skin>    and just above it paste the following CSS code,

/*--- Tabbed Facebook Comments By MBT ----*/ .comments-page { background-color: #f2f2f2; width:450px;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

To change the background colour of tabs content area simply edit #f2f2f2
To change the width of the comment box container change width:450px;

  8.  Next search for this

<div class='comments' id='comments'>

After the first occurrence of the above available code paste this code:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfmR3OdLX-9EW9nYnDeTmFprePxdVmZ989r4F6q11CXf5Sc0QybfnivJ-AI6MgAv6JYhmoIgU_silRRLfpL23dmIkPlSx1PjN4L59nfFZRJL9tT-U26FAAPkiOKmB_QnP5Xd9vgqfTt3s/s400/fbcomment.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments </div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments </div><div class='clear'/>
</div>

    <div class='comments-page' id='fb-comments-page'>
      <b:if cond='data:blog.pageType == "item"'>
       <div id='fb-root'/>
       <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='450'/> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments by
<b><a href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b>
</div>

</b:if>
     </div>

Note: If the above code gave errors then delete the red highlighted lines from the code above.

To change the width of the comment box size change the numeric value width='450' . Keep it equal to the width of the comment box container we set earlier in step#7.
To change the footer credits size (i.e. Facebook Comments by blogger Widgets), change this value width:440px
Keep a difference of 10 pixels between the comment box size and footer size. For example if you set comment box-size to width='450' then set footer-size to width:440px
To change the text inside tabs edit Comments for Facebook Tab and Comments for Blogger Tab

9. Save your template and you are All Done!
Visit your blog to see it working just fine. :)
Note: If you have activated blogger threaded comments then the Tabs will display only when at least one comment is posted in blogger

00:02 / 0 comments / Read more

Why This

recommendation bar help you to make user interest on you blogger its also help your visitor to stay long time on you website

Install it on Blogger

it is easy to install on blogger ,here is few step that will help you to install on blogger

Follow these easy steps:
Step1: Create a Facebook Application
For this plugin to work you will need to create a Facebook App in seconds. The below method is the standard and correct method for creating any FB App you like.

Log into Facebook Apps
Click on Create New App button towards Top-right
In the box that pops up, type "My Recommendation Bar" inside the App name field and leave other options as default. Click continue.

4. Enter the captcha security code. Click Submit
5. You are app is almost complete. Just click Website with Facebook Login tab and inside the box input your blog URL. See the screenshot below. Do not touch remaining options and click Save Changes.

6. You will see two strings of alpha-numerical characters. One is App ID and the other is App secret. Just copy the App ID code and keep it save in a notepad. We will need it later.

Congrats App finally created! Lets proceed to step2.
Step2: Add "Recommendations Bar" To Your Blog
Follow these steps to add the bar to Blogger:

Go to Blogger > Template
Backup your template
Click Edit HTML > Proceed
Search For this :

<html

Replace it with this code:

<html xmlns:fb='http://ogp.me/ns/fb#'

This will make the plugin compatible in older versions of internet explorer also. Since blogger templates are coded in XML therefore inserting this XML namespace will enhance the plugin performance and compatibility.
5. Next search for <body> and just below this tag paste the following code:
Note: If you are using the new blogger templates like Simple, Awesome Inc., Travel, Watermark or Picture window then please search for <body instead. Make sure to paste the code below the entire body tag.

<div id='fb-root'/>
<script>
//Facebook Recommendation bar byhttp://tipntricksworld.blogspot.in/
//<![CDATA[
(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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=***************";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://tipntricksworld.blogspot.in' trigger='40%'/></div>
</b:if></b:if>

You are almost done. Make these changes:

Replace *************** with your 15 digit App Id that you saved in step1.
Replace http://tipntricksworld.blogspot.in with your blog link

6. Save your template and you are all done!
Visit your blog and scroll down about 50% of your page and wait for 10 seconds for the plugin to expand. Enjoy the new way of free pageviews juice! :)

Optional Steps

Below are optional customization and control options. You can skip them if you want

max_age: will decide the age limit of articles. Sometimes you don't want to display too old articles so you can set it to display up to 1-180 days old posts. But if you don't want to take age into account then let it be 0 as default.
num_recommendations: You can set how many articles to display. By increasing or decreasing the value 3
read_time: As soon as the user reaches a specified location, the plugin would expand and before expanding it will take some time. I have kept it equal to 10 seconds, you can increase it to 30 or more as you wish.
side: You can decide the location of plugin. By default it shows up towards the bottom right corner of your page. You set it to float to left
trigger: On page load the plugin collapses and as soon as it reaches a specified location it expands. You can choose that location in three ways i.e. onvisible, X% or manual. I prefer locating the trigger point by percentage for better pageviews. The widget will expand as soon as the user scroll downs 40% of your page. You can increase or decrease this value. If you wish that the plugin must expand as soon as the reader reaches the end of your article then instead of pasting the code between the purple lines paste it just below data:post.body tag and use the value onvisible instead of 40%.
The widget will display only on post pages and not on homepage or static pages. To display it on all pages, then simply delete the purple bolded lines.

Troubleshooting : Since Most templates are not well structured and require installation of meta tags to tell Facebook to fetch correct page titles, thumbnails and blog title. To do this simply paste the following code just below <head> tag inside your template

<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Save your template and now see the plugin if it correctly shows page titles both on your blog and Facebook.

Your views?

22:48 / 2 comments / Read more

Friend in my last popup box post i told you how you can add like box but some blogger has problem with this so i decide to post new like box this is advance featured popup box
let we see

1. Login to Blogger Dashboard and navigate to Layout > Edit Html

2. Don’t click the checkbox which says ‘Expand Widget Templates’

3. Now find

<body>

and replace it with

<script type='text/javascript'>//<![CDATA[KNFBFansPRO='Become a newtricksforblogger fan'//]]></script><style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}#fblikepop #closeable{float:right;margin:7px 15px 0 0;}#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:14px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;}#fblikepop #actionHolder{height:30px;overflow:hidden;}#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style><script src='http://yourjavascript.com/19111310151/jquery.js' type='text/javascript'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><script src='http://yourjavascript.com/01411121377/facebooklike.txt.js ' type='text/javascript'/><script language='javascript'>//<![CDATA[$(document).ready(function(){$().KNFBFansPRO({timeout: 10,wait: 0,url: 'http://www.facebook.com/ newtricksforblogger ',closeable: true });});//]]></script><div id='fbtpdiv'/>

Note : As you can see,there are some customizable parameters in this code

Title - Become a fan
Time You Need To Auto Close - 10
Facebook Page Url - http://www.
facebook.com/newtricksforblogger

4. Now You Are Done. Refresh Your Blog And Enjoy!!!

00:05 / 0 comments / Read more

To help you keep up with the ever-changing features that Facebook offers, here are 3 things you should setup when using the new timeline for your business page:
1. Enable Messages - With the new timeline update, page admins can allow users to send personal messages.
2. Star and Pin - You can pin specific updates and stories to the top of your timeline, without being affected by any new updates, for up to 7 days each.
3. Share Your Milestones - You can now highlight some of your accomplishments or events (such a product launches) via milestones. These are created through the status update box.

12:19 / 0 comments / Read more

here is code in which you get tree in one like box just add html code in your blog htm/javascript Box
Got to blog>> dashboard >> page elements>> html/javascript

<script type='text/javascript'>
//<![CDATA[
TITLEKN='Mithilaworld';FBKN='mithilaworld';TWITTERKN='dmandal84';URLKN='https://plus.google.com/114950239161794726749';
//]]>
</script>
<style>#stp-bg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:998;}#stp-main{position:fixed;top:220px;_position:absolute; /* hack for IE 6*/display:none;width:450px;border:7px solid #2f2f2f;background:#fff;z-index:999;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif !important;font-size:13px;}#stp-title{font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;font-size:18px;padding:13px 0 13px 15px;}#stp-close{float:right;font-size:14px;font-weight:bold;font-family:Verdana, Geneva, sans-serif;color:#777777 !important;margin:0 13px 0 0;border-bottom:0px !important;text-decoration:none !important;}#stp-close:hover{text-decoration:none !important;}#stp-msg{background:#4074CF;padding:10px 15px;color:#ffffff;font-family:Arial, Helvetica, sans-serif !important;font-weight:bold;line-height:20px;}#stp-buttons{margin:25px 0px 25px 0;padding:0 0 0 15px;}#stp-bottom{padding:15px 10px;background:#EFEFEF;color:#95989F;border-top:1px solid #DDE0E8;}#stp-counter{font-size:11px !important;text-align:right;font-weight:bold;}.stp-button{float:left;width:120px;}.step-clear{clear:both !important;}</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
<script src='http://yourjavascript.com/041273026/[KN]3in1_english.js' type='text/javascript'></script>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
   $().KN3IN1({
   timeout: 60,
wait: 0,
closeable: true });
});
//]]>
</script>

Change following with your marked in red

07:57 / 0 comments / Read more

How add Facebook like box in pop up window

In my last pots i published versions of Facebook Likebox Jquery popups and today i am sharing another version with much more control options. This one includes a time counter and instead of likebox it displays a like button that links to your Fan Page

Lets we aAdd Facebook LikeBox Popup To Blogger

This popup contains a likebutton instead
Just follow below setup

Go To Blogger > Design > Edit HTML
Backup your template
Paste the following code just above </body>

<script type='text/javascript'>
//<![CDATA[
    KNFBFansPRO='BloggerTricks'
//]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}
#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;}
#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>
<script src='http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://mybloggertricks.googlecode.com/files/mbtlikebox2.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
    $(document).ready(function(){
        $().KNFBFansPRO({
           timeout: 30,
            wait: 0,
            url: 'http://www.facebook.com/BloggerTricks',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>

Make these important changes:

Replace this BloggerTricks with your Facebook username.
The timer is set to 30 seconds to change it simply edit timeout: 30
The widget appears immediately after a visiter eneters. If you want it to appear after one minute or more then edit wait: 0

Change Facebook FanPage Background Image:
The above code displays the following image:

To use the following images, simply replace http://mybloggertricks.googlecode.com/files/mbtlikebox2.js with anyone of the given links

http://mybloggertricks.googlecode.com/files/mbtlikebox3.js

http://mybloggertricks.googlecode.com/files/mbtlikebox.js

07:42 / 2 comments / Read more

Find Your Facebook Friends Locations on Google Maps

Find Your Facebook Friends Location Easily on Google Maps

If you are a fan of geography or want to find out your facebook friends locations easily on the world map then head to WhereMyFriends. It is an interesting web based mashup site that shows the geographic location of your Facebook friends on a Google Map. To create a map you simply need to connect your Facebook account and in a matter of seconds you will be presented with a Google Map denoting the geographical distribution of your social network.

Friends Density (Facebook App)

Friends Density (Facebook App) is another nice way to visualise the geographical distribution of your Facebook friends, this time in the form of a heatmap. Once you sign up to the app in Facebook you can view your friends on a Google Map. You can even read your friends’ latest status updates directly from the map.
You can also use Nearby Friends – another great facebook app that display your friends’ recent Facebook Places check-ins on a Google Map.

08:09 / 0 comments / Read more