Popular Posts

World News

Showing posts with label Comment Form. Show all posts
Showing posts with label Comment Form. Show all posts

How Add Facebook Comment box in you Blog

Tuesday, 10 January 2012


Facebook comment feature for blog Has so many feature like
No body Will Abuse in your post or blog if they abuse in you blog it will easy to catch them,my friend tell that he is getting  so many abusing comment in their blog and finally he make setting in their blog but this is very wasting of time of moderating and publishing large number of comment so i tell he to use Facebook comment in their blog.

feature of Facebook comment box

  1. Threaded Comments
  2. Comment Permalinks
  3. Likability
  4. Can Subscribe or unsubscribe to comments
  5. Can Moderate Comments at one place


Let us see how we can add Facebook comment box in you blog

To add adding Facebook Comments Box in your  Blog: hide Existing Comment let us see how hide existing comment box

1. Hide Existing Comments - The best way to start off is by hiding the comments made from the Blogger System. To do that, go to Settings > Posts and Comments and set the Show Comments option to Hide and Save the Settings
image
2. Create a Facebook App To display Facebook Comments on your Blog you should have a Facebook Application. Don’t get worried by the name. You can do that with a few clicks.
Go to this URL https://developers.facebook.com/apps and click on the Create New App button
image
Enter Some name for your App Agree to the Terms and click on the continue button
image
If it issues a Captcha verification, type the Captcha and click on the Submit Button
image
Now you will be taken to a Settings Screen
image
In the App Domain Field give blogspot.com (If you are using a custom domain give that) Give your Blog Address in the Site URL field under “Website” and Save The Changes. Copy the Application ID from the screen
3. Add Application and Moderator Meta Tags
Modify the below code with the application id copied in step 2.
<meta content='YOUR_FACEBOOK_APPLICATION_ID'   property='fb:app_id'/>
Go to Template/Design > Edit HTML and paste the above code just below
<head>
and Save the Template
image
You should create the Facebook Application and the above fb:app_id meta tag should be added to your Blog. Otherwise you won’t be able to manage/moderate your Comments from a single Place(you will have to go to posts one my one and moderate and that too is possible only if you have added the fb:admins open graph meta tag).
4. Add FB Comments - Now you have to add the Facebook Comment Form to your Blog Template. To do that Go to Template/Design > Edit HTML and click on the “Expand Widget Templates” checkbox
Find the following code in your template(Use the keyboard shortcut Ctrl + F), and immediately below that paste the following code:
<div class='post-footer-line post-footer-line-3'>
If you can’t find this, then find
<p class='post-footer-line post-footer-line-3'>
If you cant find that as well, then find
<data:post.body/>
Paste the following code just below the line that you just found out
<b:if cond='data:blog.pageType == "item"'>
<div id="fb-root"></div>
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.url' expr:xid='data:post.id'/>
</b:if>
If you want to alter the width, then you can change 450 to the width that you want. If you want the dark version of Facebook comments, then change light to dark in the above code.
5.FB Namespace Declaration - Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following XML namespace declaration will take care of that. To declare the namespace, find
<html
and change it to
<html xmlns:fb="https://www.facebook.com/2008/fbml"
(there is a space after the 2008/fbml” )The following screenshot will help you out.
image Save the Template. This namespace declaration is necessary for all FBML widgets using the fb tag. So if you have already added the namespace declaration while adding some other FB plugin, then you can skip this.
6. Hey! You are done.. Now you should see the Comment box on your Blog :)
If you can’t see it, then it would probably be because you have added some Non-FBML Facebook Plugin. If that is the case, then remove it and add the FBML versions of those widgets. All Facebook Plugins Provided here use the FBML markup(at the time of writing).

Managing Your Comments

When you are logged in to your Facebook account, the Facebook comment plugin will detect that you are the admin(it will detect you if you have added the fb:app_id or fb:admins meta tags). You will be able to manage the Settings and moderate the comments from there:
image
Check the “Other Login Providers” (Yahoo AOL and Hotmail)option and Save the settings if you want non-Facebook users to leave comments.
You can moderate your comments from this URL
http://developers.facebook.com/tools/comments

Displaying Facebook Comment Count

Use the following code in the post loop to get a Comment Count Display with a link to the comment form. This code should be added within the post loop. For example, this can be added below <data:post.body/>
<b:if cond='data:post.isFirstPost'>   
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<a expr:href='data:post.url + "#fb-root"'><fb:comments-count expr:href='data:post.url'></fb:comments-count> comments</a>
If you get into trouble, then feel free to comment on :)

If you like this post then please leave comment for us
Continue Reading | comments

Highlight author comment in blogger comment

Sunday, 8 January 2012

This very difficult to recognize which comment is from author side among comment so you can make author comment different by highlighting author comment in this posts we see how highlight author comment let us see step by step setup of highlighting author comment


step 1.Log in to your dashboard==> layout==> Edit HTML
step 2.Click on "Expand Widget Templates"
step 3.Press CTRL+F and Find  this:- ]]></b:skin>
step 4.Copy below code and put it before ]]></b:skin>
.comment-body-author {
background: #E6E6E6; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}
step 5.Press CTRL+F and Find  this:-:-
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
step 6.Replace above code with below code.
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
step 7.Click on "Save Templates" and you are done.
Note : You can change "Background color" , "Text color" and "Posotionof above codes.
Continue Reading | comments

How Enable avatar in blogger comment

blogger commenter avatar is very easy to show in comment here is few step by which it can be enable easily
For your safety,first backup your blogger template.To Enable avatars in blogger/blogspot comments follow the steps below.If first method doesn't work for you,then follow the second method.


Method 1
1.Login to your blogger dashboard--> Settings- -> Comments.
2.Enable Show profile images on comments.
Enable Avatars in Blogger Comments
3.Now Click on "Save Settings" and you are done.


Method 2 
4.Go to Layout- -> Edit HTML.
5.Click on "Expand Widget Templates".
Expand Widget Templates
6.Now search below code in your template.
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
NOTE: If you can find above code no problem.But if you can't find it then search:
<dl id='comments-block'>
or
<div id='comments-block'>
in your template.
Now Replace it with:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
7.Now find below code:
<a expr:name='data:comment.anchorName'/>
Note:You can see above code one or more time.
8.Now Replace every above code (<a expr:name='data:comment.anchorName'/>) with below code:
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>
9.Now find ]]></b:skin> tag in your template.
10.Copy below code and paste it just before ]]></b:skin> tag.
/* Avatar */
.avatar-image-container img {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLIqo2kZQ9AXJDZP6PHID0jhNsR5PUGFigYKJbXEmz513tXokWTtuToOI3RmDBxjnkD96-xJA1PPcly9wjA8UUxVK9T1ptMylls9EKZBBuNnCIeAp_Mx9AK4PmWKKrK_dNrrHnLEllNpU_/+avatar.png);
width:35px;
height:35px;
}
11.Save your template and you are done.

Leave your comment if you like this posts 

Continue Reading | comments

How make your comment box Beautiful

this article will help you to make beautiful comment box using css  If you like to change your blogger comment form appearance,simply follow the steps below



1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Press CTRL+F And Find  ]]></b:skin> tag .
3.Copy below code and paste it just before the ]]></b:skin> tag .

#comment-form iframe{
background:#7f9db9 url() no-repeat bottom right;
border:7px solid #eeeeee;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#000000;
width:95%;
height:250px;
}
#comment-form iframe:hover{
background:#7f9db9 url() no-repeat bottom right;
border:7px solid #bababa;
}
#comment-form a{
color:#ffffff;
}
Beautiful CSS Comment Form to Blogger
                                                  Result Of Above Code 

Note:You can colors,width,height,.... as your choice and also can add background images for your comment form.  putin your image url here url(Yoururl.com/pic)

Now save your template.You are done.
Continue Reading | comments
 
Copyright © 2011. My Blog Tricks . All Rights Reserved
Company Info | Contact Us | Privacy policy | Term of use | Widget | Advertise with Us | Site map
Template by My Blogtricks. Inpire by My Blog Trricks Proudly powered by Admin