Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

How to Add Facebook Comment Box in Blogger

Comment box in a website/blog allow visitors to add their reviews or ask any question related to article. This is must have part of a user friendly website. Comments keep your site active and show your website/blog popularity. Every new comment means that your website/blog is being update. Facebook provides many plugins for websites like Facebook Like Box, like button, share button, comment box etc. However in this post you will know, how to add Facebook comment box in Blogger.
Almost every person has Facebook account now a days that's why it is better to use Facebook comment box. Facebook comment box allow users to show their comments on Facebook as well as on website which means your website can become more social. You can use Facebook plugin for Wordpress but Blogger users can only use codes to show Facebook comment box in Blogger blog. Lets start to add Facebook comment box in Blogger. procedure is very simple which is divided into steps.

Other Recommended : 

Add Blogger Contact Form to Page Without Editing Theme
How To Protect Facebook Account From Hacking (12 Methods)

How to Add Facebook Comment Box in Blogger


1- Create Facebook App :


Relex, it is not scary. Just follow a few simple steps. Visit http://developers.facebook.com. You must be login using your Facebook account. Now look at right top. Take your mouse on "My Apps" option.

Get Facebook Comment Box Code From Developer


You will see an option "Add a New App". Click on it. A pop up box will appear. Write name of your Facebook app in first box and your email in second box. After that click on "Create App ID". Following is a sample image of this step.

Create a New App ID at Facebook Developer


You will be redirect to your app Dashboard. Now Click on "App Review" that is on left side and make your Facebook comments box visible to public. When you will click, it will ask to select your website category. Select your website category.

Make Facebook Comment Box Public


You have created Facebook app id and all settings are ok. Lets move to Facebook Developer where you will create Facebook comment box code for website.

2- Generate Facebook Comment Box Code :


Visit the plugin page https://developers.facebook.com/docs/plugins/comments. Add url, select number of comments that will appear and adjust the width of comment box. All settings are done. Now click on "Get Code".

3- Add Facebook Comments Box in Blogger Blog :


After click on "Get Code" new screen will appear like below screenshot.

How to Add Facebook Comment Box Code in Website


Facebook Developer will give you 2 codes when you will click on get code button. You have to put these codes in Blogger blog. Let do it but first select your desired language and app ID which is very first option in that box. Now start to add codes in Blogger.

Step 1 : Go to your Blogger blog dashboard and then go to "Theme" option. Click on "Edit HTML" and search for <body>. Copy the 1st code that you got from Facebook Developer and paste just after <body> tag.. Copy the 1st code that you got from Facebook Developer and paste just after tag. 

Step 2 : Now you need to install 2nd code where you want to show Facebook comment box in Blogger. Every website shows comment box below the post, if you want to show Facebook Comment Box below the post then search for the below code :
                            <div class='post-footer-line post-footer-line-1'> 


That's all Facebook Comment box successfully installed in Blogger blog. If you got any issue , then use the below comment box to contact with me. Happy Blogging !

Add Blogger Contact Form to Page Without Editing Theme

Looking for Blogger contact form html code? Contact form is one of the essential parts of a website/blog. It provides a way to your visitors to reach to blog admin. Visitors can ask about problems related to website or any other issues. A user friendly website must have contact form. Many third party sites (like powr.io, 123contactform ) also provide Blogger contact form but it is better to use official contact form. These third party sites show advertisements and also effect blog speed that's why official Blogger contact form is recommended which deliver messages immediately on email associated with Blogger.
Blogger contact form can be add as a widget but webmasters usually like to create it on a separate page. You can see different bloggers which will say to edit Blogger Theme to show contact form on a page. That process is very complex. First of all add a widget, then go to theme and add some codes to hide contact form widget and then go to page and paste a code. it will not end here, also edit the code. Everyone do not like to dirty his hands with coding. Specially for new bloggers, it is just a headache. Do not worry, i shall provide Blogger contact form html code. Your job is to copy and paste it where you want to show it and need to do just a little customization. No theme editing will be include. Lets start to add it.

Add Blogger Contact Form to Page Without Editing Theme


Also watch :

10 Blogger (Blogspot) SEO Tips for Higher Rankings

Blogger Contact Form HTML Code :


First of all go to your Blogger blog and then go to "pages". Create a new page and give it a title which will be "Contact Us" or any other according to your desire. Now switch to html and paste the following code before </div> tag :

<script>
var blogId = 'your-blog-id-here';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>

<br />
<form name="contact-form">
<div>
<h4 style="text-align: left;">
Your Name :</h4>
<h4 style="text-align: left;">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></h4>
<h4 style="text-align: left;">
Your Email: <em>(required)</em></h4>
<h4 style="text-align: left;">
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></h4>
<h4 style="text-align: left;">
<br />Your Message: <em>(required)</em></h4>
<h4 style="text-align: left;">
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea></h4>
<h4 style="text-align: left;">
<br /><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" /></h4>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

Customization :


You need to do some settings to active it. Search for your-blog-id-here (Tip : ctrl F) and replace it with your blogger blog id. What is your blog id? Go to your blog and see in address bar. Your blog id is showing in address bar copy it and paste where i told above. Below image explain more better.

How to Find My Blogger Blog ID


That's all, now its over to you. If you like this post then share it with others.

10 Blogger (Blogspot) SEO Tips for Higher Rankings

This post is about Blogger seo tips which will help to make search engine rankings more better. Although in this post, i am not covering all about seo but tell as much as important for Blogger seo (BlogSpot on-page seo). Blogger is 2nd biggest blogging platform. There is only one problem with Blogger. BlogSpot search engine optimization is hard. Lot of plugins are available in Wordpress which care for website's seo but Blogger do not have any automatic process, every thing is manual. On the other hand, Blogger provides many features. Unlike Wordpress, Blogger users do not need to pay even a single penny for hosting. Blogger provides unlimited space which is totally free. Blogger security is very strong as compared to Wordpress. You can also find beautiful Blogger themes which are free as well as paid. Only problem is Blogger seo but it is not as much hard as some persons think. Following are important Blogger seo tips which will help to improve BlogSpot search engine rankings.

10 Blogger SEO Tips for Higher Search Engine Rankings and More Traffic

1- Important Things Before Starting Blog :


Blogger SEO tips before starting a blog which are important to tell. Newbie who do not have proper knowledge start their first step with a wrong action which leads them to failure in online business. According to me, 4 things are very important to know before starting a blog/website. Your struggle for search engine rankings starts when you just think to create a blog.

Blogger SEO Tips, Important Things Before Starting a Blog

* Plan Your strategy:


This is very first blogger seo tip. Before starting a blog, you have to decide blog niche. You must have proper knowledge about your niche. Without proper knowledge, it is very hard to be a good blogger. Do not start a "multi topic" blog. A site which contain more then one topic (e.g Songs, Games, Videos in a single site) is referred as multi topic site. Its seo is hard. Only select one topic (e.g seo, web development, wordpress training). Such site can easily rank.

Next thing to decide is this, how you will deliver content to your readers. When you will post and how many posts you will do in a week. Lot of posts are not necessary for high rank Good content is key for higher rankings in search engines. Make post of at least 700 words also include images as many as possible. Make your own time table for posting. It does not matter that you will post one articles per day or one article per week but you must be regular in posting. If you plan to post one article after every 2 days then must do it on time. But if you do not have too much time then post one article in a week.Search websites related to your topic/niche and see how they are delivering content to readers. Always write your own content and never copy or spin other's content. Google always looks for some thing new and more better so try to do more better then others.

* Do Proper Research :


Another important Blogger seo tip. Do proper research about your niche before starting a blog. Gain more and more knowledge. Use "Google Keyword Planner" and "Google Trends" to see how popular is your niche, in which country this niche is most popular and how you will (compete) others and attract visitors. Visit other websites that are related to your niche, read their content and think how you will do more better. You have to write more better content then others to get higher search engine rankings.

* Domain or Subdomain (Blogspot) Name Selection :


Domain/subdomain (BlogSpot) selection is also an important part of Blogger seo. Be wise in domain name selection. Use maximum two words as domain name. Longer domain name is not good for seo. Keep domain name shorter as much as possible. Try to use relevant Domain/subdomain name. If related name is not available then choose a brand name. Brand name means a name which will be easy to remember (like our domain name "BloggingEfforts"). Make sure that your domain name keywords have low competition. Low competition keywords can optimize easily as compare to medium or hard competition keywords. I suggest two free tools for domain name suggestion. First one is "Lean Domain Search" and second is "Shopify Name Generator". Below are link of these two tools which will give many ideas about domain names :
1- Lean Domain Search
2- Shopify Name Generator

or buy a domain name from BlueHost using below domain search tool.


* Blogger Blog Design :


This is last blogger seo tip. After this you can create blogger blog and then we shall proceed to more Blogger seo settings. Google says that websites must have user friendly design. Keep your website clean and do not use so many widgets. It can create loading problems for visitors and affect your seo. Make sure that visitors can easily search each and every thing that they are looking for. Create a good navigation bar. Unlike olders days, now you can find beautiful themes for Blogger that are seo optimized and user friendly. Here is link for "Free Blogger Themes".

Buy Advace Themes from ThemeForest

2- How to Make Blogger Title SEO Friendly :


Title plays important role in Wordpress as well as Blogger SEO because visitors read only title in search engines to visit a page. Do proper research about keywords in "Google Keyword Planner" and use your selected keywords in title. Title length must between 35 to 60 characters. Remaining characters after 60 will not show in search engines. Avoid to use stop words (e.g a, an, the). Such words occupy space but do not give any benefit for Blogger SEO. Do not use a keyword multiple time in title. It compel Google and other search engines to remove your post/page from their search. Following Example will help to understand more better.
Example : How to Do Blogger On-Page SEO & Off-Page SEO. Here keyword "SEO" is used two times. Google will not include it in search because it is considered as "Keyword Stuffing".
Blogger post title usually includes home page title which is bad for seo. You have to optimize Blogger post title for better seo. Follow the following instructions :
Go to your Blogger Blog >> Edit HTML >> Search for the following code

<title><data:blog.pagetitle/></title>

and replace it with following code :

<b:if cond=’data:blog.pageType == &quot;index&quot;’> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

Now your title is seo optimize and it will show only post title.

3- SEO Friendly Meta Description :


 Meta description also plays important role in Blogger SEO. In meta description, use all your selected keywords. Meta description also has limited words. You can not use more then 150 words in meta description. Remain keywords will not show in search. A keyword can be repeated maximum 2 times. Do not cross this limit. Otherwise you are breaking Google's rule. Use this tool to see how your title and description will look in Google.

4- Blogger (BlogSpot) Custom Permalink :


Permalink/url is also important part of SEO. Blogger gives 2 options. First one is to use their automatic generated link for post and 2nd one is to create custom permalink. Always use custom permalink which allows to edit post link according to your wish and search engine requirements. You can see custom permalink option is right side while writing a post. Use max 3 to 4 words in post permalink. Post url also depend on your domain/sub-domain name. If your domain name is contain less characters then you have more space for characters in permalink. 
As you know Google has created specific lines for webmasters and we can not cross them if we want good rankings in search engines that's why a good Blogger seo tip is to use maximum 3 words in url/permalink.Do not use stop keywords (a, an, the) in BlogSpot permalink. SEO friendly permalink contain only keywords. Do not repeat keywords in permalink otherwise it will be consider as keyword stuffing. Below screenshot tells how select and edit Blogger custom permalink.

How to Create Custom SEO Friendly Permalink in Blogger

5- Keyword Density in Article :


Article is the main thing which brings visitors to your web/blog. Articles must be reader and search engine friendly. Before writing a post, make sure that you have enough knowledge about that topic. After that go to "Google Keyword Planner" and search keywords. See analytics of different keywords and select some keywords for your post.
After keyword planner, go to "Google Trends" and see details of your keywords. Google Trends tells when and where this keyword is most popular and what is current status of this keyword. These two tools by Google are very amazing and gives many ideas to webmasters to improve their seo. Must use them for Blogger SEO.
After doing proper research, you can start writing post. Your keywords must not be greater then 3%. This is maximum quantity. Mostly we try to cover it in 2% which is best for seo. Wordpress users can install seo plugins which tell about post seo but Blogger users do not have such facilities. Do not worry, every problem has a solution. Blogger users can still check seo of their posts. I am telling two online tools to check Blogger post seo. Both tools are almost similar in working. One of them is from "Yoast SEO" and second is from "SEO Review". These tools will analyze post and tell how much your article is seo optimize. Following are links of these two tools :

 6- What is Label in Blogger :


Label plays same role in Blogger which category plays in Wordpress. Use your keywords as label for Blogger SEO and better search engine rankings. Let me explain it with an example. Suppose i wrote a post about "How to Do Image SEO in Blogger". Then my label will be Image SEO, Blogger SEO, Image Optimization. Did you understand? You can add more then one label but these must be related to post. 

7- Interlink Posts : 


Another Blogger seo tip. Interlinking is important in on-page Blogger seo. What is interlinking and how to do it?. Interlinking means to link similar pages/post with each other. You just have to put link of a post in another post but both posts must be similar which means they may be under same category. 
Suppose I already published a post about "Image SEO in Blogger" so while writing new post about "Blogger SEO Tips", i can interlink both posts with each other. But do not put link any where in the post. You have to make a good connection between both posts. You need to know some thing important about interlinking posts. Read below instructions and follow for good Blogger SEO.
>> Always interlink similar pages.
>> Use at least 3 keywords as anchor text.
>> Link can be add in image. ALT tag will work as anchor text.
>> Do not use "nofollow" tag for internal linking. We use nofollow only for external links.
>> Do not add too many links at a same place.

What is Interlinking in SEO. How to Do Interlinking in Blogger

8- Blogspot Image SEO :


Image seo helps in two ways. First it helps in seach engine optimization and second it increase website speed. You have to do some simple things for image optimization. Choose best image format. Give a good name to image. Always give title and alt tag to image. Compress image online using tinypng if you are using Blogger or use image compression plugin if you are Wordpress user. Read this post "How to Optimize Images for Blogger SEO" for complete guide.

9- Blogger SEO Settings :


Blogger seo settings are some types of instructions to search engines. Blogger seo settings tells search engines, how to crawl your blog. You give instruction that which page will be crawl and index and which pages will not be crawl. Wrong use of these settings can effect Blogger as "Blogger" already has mentioned in this section.


* Custom robots.txt :


Go to your Blogger blog then "Settings" and then "Search Preferences". Scroll down and paste below code in "Custom Robot.txt" box. 

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search?q=*
Disallow: /*?updated-max=*
Allow: /
Sitemap: http://bloggingefforts.blogspot.com/feeds/posts/default?orderby=updated

Change "bloggingefforts.blogspot.com" with your Blogger blog address. That's all.
Below is a screenshot which will help to understand more better.

Custom Robots.txt for Blogger SEO

* Custom robots header tags :


This option is after "Custom robots.txt"on the same page. Just look at the below image and apply all settings according to it. That's all.

Custom Robots Header Tags for Blogger SEO


10- Nofollow vs Dofollow :


Nofollow and Dofollow are two attributes which play different role. Nofollow attribute prevent search engines to crawling a link while Dofollow attribute allow search engines to crawl and follow that link. You can apply these two attributes in Blogger very easily. Whenever you put link in a text, the link box gives option "Add rel=nofollow Attribute". Link will not be crawl if you will check that option. Use nofollow attribute while adding external links and always use dofollow attributes for internal links. It will improve your Blogger seo.

How to Apply Nofollow and Dofollow in Blogger


Last Words :

Blogger blog can be successful after applying all seo techniques. Apply above Blogger SEO tips to get more traffic from search engines. If you think this article is helpful then also help other Bloggers by sharing it. Subscribe us and follow us to get more tips about seo, blogging and make money. Now its over to you. Happy Blogging !

How to Add Facebook Like Box in Blogger

Simple method to add Facebook like box in Blogger. Blogger is 2nd biggest platform. Number of people are using it. This post is for newbie bloggers. Social media sites specially Facebook is a great source of traffic. That's why social plugins i.e. like box/button, share & follow buttons are important part of website/blog. Every webmaster put these plugins/widgets to his website and offer visitors to follow on social media. Social profiles are also proof that you are working professionally. A social profile with number of likes/followers is enough to make your website popular on internet. The more popularity you will gain on social media, the more popular your website will be. Facebook is great source of visitors that's why it is necessary as well as important part of website. You can promote Facebook page on your website/blog by using like box/button. Wordpress users have access to several plugins for Facebook like box but blogger users have to do this manually. How to add Facebook like box in blogger very easily? You just have to follow some very easy steps. Lets start it.

Add Facebook Like Box in Blogger

First of all, Go to developers.facebook.com. Here is direct link (https://developers.facebook.com/docs/plugins/page-plugin)
'Facebook Developer" panel offers some settings. You can customize them according to your wish. In very first tab write name of your Facebook page. 
In 2nd tab, write timeline if you want to show whole timeline (include posts) otherwise keep in blank. Keeping it blank will only show header of Facebook page. You can also show events and messages option. Just write then in that box by seprating them with comma (i.e. timeline, events, messages).
In next two option adjust "Width and Height" of Facebook like box widget according to your requirement.
If you want small header then check the next option other remain it uncheck. Here are also three more options for hiding cover photo. Adobt to plugin container width and Show Friend's Faces. If you will check Adobt to plugin container width then widget will automatically adjust its width where your will put it. If you want to show Faces of that persons then check that option. Below is  a quick view of all settings.

Generate Code at Facebook Developer Image View

After all these settings click on get code option. Facebook will provide two types of codes Javascript SDK and IFrame. IFrame is more easy way to click on it and get code.

Faceboook like Box Iframe Code

Now go to your blog >> Layout >> Add a Gadget >> HTML/JavaScriptAdd and paste this code.
All done. You have successfully added Facebook like box in blogger. Below are images about how to add Facebook like box generated code in blogger to guide more.

How to add HTML Code in Blogger


How to add HTML Code in Blogger

How to add HTML Code in Blogger