How to add Facebook Comment Box to your blog or websites.

Comment Box.

The Comments box is a social plugin that enables people to comment on your site. Features include moderation tools and distribution.

Social Relevance: The Comments box uses social signals to surface the highest quality comments. Comments are ordered to display the most relevant comments from friends and friends of friends as well as the most-liked or active discussion threads. Comments marked as spam are hidden from view.

Distribution: Comments are easily shared with friends or with people who like your Page on Facebook. If people leave the “Post to Facebook” box checked when they post a comment, a story appears on their friends’ news feed indicating that they've made a comment on your website, which will also link back to your site.

Friends and people who like the Page can then respond to the discussion by liking or replying to the comment directly in the news feed or in the Comments box on your site. Threads stay synchronized across Facebook and on the Comments box on your site regardless of where the comment was made.

The mobile version will automatically show up when a mobile device user agent is detected. You can turn this behavior off by setting the mobile parameter to false.

Note:The mobile version of the Comments box ignores the width parameter, and instead has a fluid width of 100% in order to resize well in portrait/landscape switching situations. You may need to adjust your CSS for your mobile site to take advantage of this behavior. If you prefer, you can still control the width via a container element.

You are putting Facebook Comment Box in your websites or blog by two ways.

First through Your Facebook Developers and another through the help of this website.

You have Facebook Account Sign to your Facebook Account> and then click on this https://developers.facebook.com/docs/reference/plugins/comments/

And you have some figure like this:

You have to put your website name on URL to comment on(?)

And then click on get code button you have some picture like this:

Paste the following code in your websites or blog.

If you have blogger account do following steps:

Blogger account sign in> Layout

Html/ Java Script

And paste the code which you get on your screen by doing above steps or paste this only replace our username with your username.

<div class="fb-comments" data-href="http://mylabofblogger.blogspot.in" data-width="470" data-num-posts="10"></div>

How do I know when someone comments on my site?

You can subscribe to the 'comment.create' and 'comment.remove' events through FB.Event.subscribe.

What does the grammar filter do?

• Adds punctuation (e.g. periods at the end of sentences)
• Trims extra whitespace
• Expands slang words (e.g. plz becomes please)
• Adds a space after punctuation (e.g. Hi,Cat would become Hi, Cat)
• Fix common grammar mistakes (e.g. convert ‘dont' to ‘don’t’)
  You can enable the grammar filter from the settings section of the plugin.

How can I get an SEO boost from the comments left on my site?

The Facebook comments box is rendered in an iframe on your page, and most search engines will not crawl content within an iframe. However, you can access all the comments left on your site via the graph API as described above. Simply grab the comments from the API and render them in the body of your page behind the comments box. We recommend you cache the results, as pulling the comments from the graph API on each page load could slow down the rendering time of the page.

How do I enable users to comment using other login providers?

On the settings section of the plugin, you can choose to enable third party login on your comments boxes. Currently this will enable users to comment using a Yahoo!, AOL or Hotmail account.

How does the blacklisting words work?

You can enter blacklisted terms from the settings section of the comments box. The content of new comments is checked against the blacklist of terms to see if this comment should have limited visibility. The comment is checked via substring matching. This means if you blacklist the word 'at', if the comment contains the sequence 'a' 't' anywhere it will be marked with limited visibility; e.g. if the comment contained the words 'bat', 'hat', 'attend', etc it would be caught.

I have the first version of the Facebook Comments box, how do I upgrade?

If you are using the original version of the Facebook Comments box, just add 'migrated=1' to the <fb:comments> tag, and the comments box will automatically switch to the new version. In this case, you should not specify the href parameter, and you must keep the XID parameter the same. Once you migrate, you can access the comments as described above. Note that the moderation tools only work with the newer version of the comments plugin (with href specified instead of migrated=1).

If this post is helpful for you please comment and like our pages.

Your MyLabOfBlogger

Read More

How to add Facebook follow button to your blog or websites.

Hey guys you are very excited for putting Facebook follow button on your websites.You have to do simple steps for putting follow button in your websites.If you have blogger.com account you have to do some steps.
Go to Blogger.com>Layout
HTML/JAVASCRIPT
Paste the following code which you get from Facebook developers by learning from here.
This is what mylabofblogger do few steps before putting follow button on website.
You have facebook account if not create now ,then open
Facebook.com>https://developers.facebook.com/docs/reference/plugins/follow/
and you have same pictures as you see here.Only change profile URL with your profile username if you have page.If not create a page.

after that you are getting codes like this you have only to paste these codes to your websites or blog.

The Follow button was previously called the Subscribe button.

Follow Button

The Follow button lets other people follow your public updates on Facebook.

There are two Follow button implementations: XFBML and Iframe. The XFBML (also available in HTML5-compliant markup) version is more versatile, and requires use of the JavaScript SDK. The XFBML dynamically re-sizes its height according to whether there are profile pictures to display.

To get started, just use the configurator below to get code to add to your site.

Attributes

• href - profile URL of the user to follow. This must be a facebook.com profile URL.
• layout - there are three options.
  • standard - displays social text to the right of the button and friends' profile photos below. Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
  • button_count - displays the total number of followers to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
  • box_count - displays the total number of followers above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
• show_faces - specifies whether to display profile photos below the button (standard layout only). You must not enable this on child-directed sites
• colorscheme - the color scheme for the plugin. Options: 'light' (default) and 'dark'
• font - the font to display in the plugin. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
• kid_directed_site - If your web site or online service, or a portion of your service, is directed to children under 13 you must enable this.
• width - the width of the plugin.

Is this topic very helpful for you then please comment and like us on facebook.Thank you.

Read More

How to add picture codes in blogger and website.

Hey guys this is very interesting that you want to make your website/blog very beautiful because the code which you want to got from here is very helpful you and your website also.You can put links,Changes the image from the code and also


Html pictures codes:


<img src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%" alt="Milford Sound in New Zealand" />

How to add comment box
How to add background images,color,
 scroll box background color in blogger or websites.
How to add music player with picture in blogger,website and also Play audio online.add a social stylish subscribe widget for blogger.How to add word press subscription box in Blogger.Html Codes for background color putiing in your website or blogger

Read More

How to add comment box with color and background picture.

Hey guys You are interested for putting codes in your website for that your website is looking good.
So,you have to follow some steps before put this codes in your website.

if you are a blogger:
Blogger>layout
html/javascript
Lastly copy and paste the below codes inside.

Comment box code :
<form action="/html/tags/html_form_tag_action.cfm" method="post">
Comments:<br />
<textarea name="comments" id="comments">
Hey... say something!
</textarea><br />
<input type="submit" value="Submit" />

</form>

Comment box colors:

<form action="/html/tags/html_form_tag_action.cfm" method="post">

Comments:<br />

  <textarea name="comments" id="comments" style="width:160px;height:90px;background-color:#D0F18F;">

  Hey... say something!

  </textarea><br />

  <input type="submit" value="Submit" />

</form>

Comment box pictures:

<form action="/html/tags/html_form_tag_action.cfm" method="post">

<textarea name="comments" id="comments" style="width:150px;height:150px; background:url('/pix/milford_sound/milford_sound_t.jpg');">

Enter your comments here...

...and watch your comment box grow scrollbars!

</textarea><br>

<input type="submit" value="Submit">

</form>

Read More

How to change or add html codes background color,background image,Fixed Background image, shorthand background code and backgrounds for the whole page

Hey guys now we know how to change background color with html elements.
The following examples use is CSS(Cascading style sheet).CSS is the best way for setting background.It's better than all other outdated methods.
You have only add this in your blogger by following ways :

• Blogger>Layout
• Html/Javascript
• and paste the following codes inside which is given below.

Background color:
<div style="background-color:yellow;border:1px solid black;padding:10px;">
<p>HTML background code is limited, CSS background code is much better!</p>

</div>
example:

Background image:

<div style="background-image:url(/pix/smile.gif);

background-repeat:repeat;

width:200px;

height:200px;">

<p>HTML background code is limited, CSS background code is much better!</p>

</div>

Fixed Background Image:

<div style="background-image:url(/pix/smile.gif);

background-repeat:repeat;

background-attachment:fixed;

overflow:scroll;

width:200px;

height:100px;">

<p>HTML background code is limited, CSS background code is much better!

example shows how a background image can be set to a fixed position

- even though its containing block scrolls.</p>

</div>

Shorthand Background code:

<div style="background:url(/pix/smile.gif) repeat fixed;

overflow:scroll;

width:200px;

height:100px;">

<p>HTML background code is limited, CSS background code is much better!

example shows how a background image can be set to a fixed position

- even though its containing block scrolls.</p>

</div>

Read More

How to change and add scroll box background color in blogger or websites.

Hey guys here is code which you want from us,because we know that what you want.For putting a stylish scroll box in your blogger /website you have to do some following steps before putting codes.
In Blogger

1. open blogger>Layout
2. Html/Java Script
3. And paste the below codes inside 

Basic HTML Scroll Box
<div style="height:120px;width:120px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">
As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.
</div>



Background Color
This example changes the background color of the scroll box. In HTML, you change background color using the CSS background-color property:

HTML Code:
<div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;">We have added a background color to this HTML scroll box. This is done using the CSS 'background-color' property.</div>
Html codes:
<div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;color:#A6120D;">We have changed the color of the text inside this scroll box. We did this using the CSS 'color' property.</div>

Read More

Html Codes for background color putiing in your website or blogger

Hey guys here is good news because you get Html Background codes.Please copy and paste it to your website.
Background Color
This example changes the background color of the scroll box. In HTML, you change background color using the CSS background-color property:

• HTML Code:

<div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;">We have added a background color to this HTML scroll box. This is done using the CSS 'background-color' property.</div>

HTML Codes:

• <div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;color:#A6120D;">We have changed the color of the text inside this scroll box. We did this using the CSS 'color' property.</div

You are able to paste one of these html codes to your website.
HTML codes are used for looking your website beautiful generally.

Read More

Stylish Facebook like box pop up with timer

Providing updates from facebook is always a great way to engage the visitors on your blog/ website . So it's important to get the attention of your visitors towards your like box. 

 Well guys, Checkout this awesome facebook like box widget with timer which you and your readers will like and get attracted. If you want to add this widget to your blog just follow this simple steps.


1.Go to Blogger > Layout
2.Click on 'Add a Gadget'
3.Choose HTML/Javascript
4.Copy Paste the code given below inside it.

<!-- Facebook POPUP LikeBox With Timer Code Start -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

<style type='text/css'>

#exepopup{background-color:#fff;position: fixed;top:50%;z-index:9999;display:none;padding:0px;left:50%;border:10px solid rgba(82, 82, 82, 0.7);-webkit-background-clip: padding-box; /* for Safari */background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */-webkit-border-radius:8px 8px 8px 8px;-moz-border-radius:8px 8px 8px 8px;border-radius:8px 8px 8px 8px;width:400px;height:360px;margin-left:-200px;margin-top:0px;overflow:hidden;}#exepopup span{font-size:20px !important;font-weight:bold !important;}#exepopup h1{background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC11sKIfvgjIl_0Wo4fxSaRyncIsuVVfJvwOCxaSIOMCY92jT19B6HKYQFbgbC_6jmxbWJbGjZHZdpaDtGOeS528wBFmJz8Tmwjcf2nKWTkQSq5DRZTisjkbOk4ZgWA6dgBEFkHzX14IM/s1600/aktechz-fb-lock.png) 98% no-repeat;border:1px solid #3b5998 !important;color:#FFFFFF !important;font-size:20px !important;font-weight:700 !important;padding:5px !important;margin:0 !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;overflow:hidden !important;}.exepopupdata{font-size:12px !important;font-weight:normal !important;height:265px !important;padding:1px !important;background:#fff !important;border-bottom:2px solid #ddd;overflow:hidden !important;}#exepopupfooter{text-align:left;background:#F2F2F2 !important;height:56px !important;padding:10px 10px 10px 10px !important;overflow:hidden !important;}#exepopupclose{float:right;background-color:#eee !important;border:1px solid #ccc !important;color:#111 !important;font-weight:bold !important;padding:5px 8px 5px 8px !important;text-decoration:none !important;display:inline-block !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;outline:none !important;position:relative !important;font-size:18px !important;margin:1px !important;}#exepopupclose:active{top:1px;left:1px;}</style>

<script type='text/javascript'>

jQuery(document).ready(function() {

function exepopupfunc() {

var sec = 10

var timer = setInterval(function() {

$("#exepopupfooter span").text(sec--);

if (sec == 0) {

$("#exepopup").fadeOut("slow");

clearInterval(timer);

}

},1000);

var exepopupwindow = jQuery(window).height();

var exepopupdiv = jQuery("#exepopup").height();

var exepopuptop = jQuery(window).scrollTop()+50;

jQuery("#exepopup").css({"top":exepopuptop});}

jQuery(window).fadeIn(exepopupfunc).resize(exepopupfunc)

//alert(jQuery.cookie('sreqshown'));

//var exepopupww = jQuery(window).width();

//var exepopupwww = jQuery("#exepopup").width();

//var exepopupleft = (exepopupww-exepopupwww)/2;

var exepopupleft = 500;

//var exepopupwindow = jQuery(window).height();

//var exepopupdiv = jQuery("#exepopup").height();

//var exepopuptop = (jQuery(window).scrollTop()+exepopupwindow-exepopupdiv) / 2;

jQuery("#exepopup").animate({opacity: "1", left: "0" , left: exepopupleft}, 0).show();

jQuery("#exepopupclose").click(function() {

jQuery("#exepopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});

</script>

<div id="exepopup">

<h1>Join Us On Facebook</h1>

<div class="exepopupdata"><iframe src="http://facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fzgamercity&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe></div>

<div id="exepopupfooter">Please Wait <span>10</span> Seconds...!!!<a href="#" id="exepopupclose" onclick="return false;"></a></div></div>

<!-- Facebook POPUP LikeBox With Timer Code End -->

Customisations

Change red text with your desired time, green text with your slogan and zgameritywith your facebook page  username.

5. Now click on save button.

Have any problem, please comment.

Read More