Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts
In the previous post, I have introduced how to insert the Google login button into Blogger , in this article I continue to guide inserting Google and Facebook login button but there is no customization according to the available form. This section both Google and Facebook  and many websites have instructions so you can rely on those pages to build your own login button or refer to this article yourself. The most important part when creating a custom login button with Google you must create the code google-signin-client_id and with Facebook you have to create an application containing the website domain name and get appId. 
Add Google and Facebook login buttons to blogger


How to create and operate mechanisms of customized Google and Facebook login buttons

We will insert the Google login button, including the logout button, and like Facebook, then we will write the event handler script when the button is called to call the login dialog, and when logged in with the account Google or Facebook displays account information including: ID, Name, email address and avatar image link.

Next when an account is logged in if you access the script page again, it will display the account's information, and also display the logout button to log out the account at any time.

Demo




Paragraph reference form:


<html>
<head>
<style type='text/css'>/* <![CDATA[ */
.button {
    display: inline-block;
    position: relative;
    color: #3c4043;
    background: rgba(0,0,0,0);
    font-family: Roboto,Arial,sans-serif;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    height: 37px;
    line-height: 37px;
    padding: 0 10px;
    border: 1px solid rgba(0,0,0,.15);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    outline: none;
}
.button:hover {
    color: rgba(0,0,0,.68);
    border-color: rgba(0,0,0,.54);
}
.button:active, .button:focus {
    outline: 0;
    color: #3c4043;
}
.button .button-icon {
    display: inline-block;
    margin-right: 8px;
}
.button .button-icon.google,.button .button-icon.google svg {
    width: 18px;
    height: 18px;
}
.button .button-icon.facebook {
    width: 23px;
    height: 23px;
}
.button .button-icon.facebook svg {
    fill: #3b5998!important;
    height: 23px;
    width: 23px;
}
.button .button-icon svg {
    height: auto;
    width: auto;
    min-width: auto;
    vertical-align: middle;
}
.button.signout,.button.logout {
    display: none;
}
/* ]]> */</style>
</head>
<body>
<!-- Google sign in button -->
<button class="button signin" type="button"><span class="button-icon google"><svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg"><path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z" fill="#EA4335"/><path d="M20.6 102.4c20.3 15.8 40.6 31.5 61 47.3-8 23.3-8 49.2 0 72.4-20.3 15.8-40.6 31.6-60.9 47.3C1.9 232.7-3.8 189.6 4.4 149.2c3.3-16.2 8.7-32 16.2-46.8z" fill="#FBBC05"/><path d="M361.7 151.1c5.8 32.7 4.5 66.8-4.7 98.8-8.5 29.3-24.6 56.5-47.1 77.2l-59.1-45.9c19.5-13.1 33.3-34.3 37.2-57.5H186.6c.1-24.2.1-48.4.1-72.6h175z" fill="#4285F4"/><path d="M81.4 222.2c7.8 22.9 22.8 43.2 42.6 57.1 12.4 8.7 26.6 14.9 41.4 17.9 14.6 3 29.7 2.6 44.4.1 14.6-2.6 28.7-7.9 41-16.2l59.1 45.9c-21.3 19.7-48 33.1-76.2 39.6-31.2 7.1-64.2 7.3-95.2-1-24.6-6.5-47.7-18.2-67.6-34.1-20.9-16.6-38.3-38-50.4-62 20.3-15.7 40.6-31.5 60.9-47.3z" fill="#34A853"/></svg></span><span class="button-label">Sign in with Google</span></button>
<!-- Google sign out button -->
<button class="button signout" type="button"><span class="button-icon google"><svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg"><path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z"
<!-- Facebook login button -->
<button class="button login" type="button"><span class="button-icon facebook"><svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_facebook_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg></span><span class="button-label">Login with Facebook</span></button>
<!-- Facebook logout button -->
<button class="button logout" type="button"><span class="button-icon facebook"><svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_facebook_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg></span><span class="button-label">Log out</span></button>
<!-- Display Google user profile data -->
<div id="userInfo"></div>
<!-- Display Facebook user profile data -->
<div id="userData"></div>

<!-- Goggle and Facebook script -->
<script src='https://apis.google.com/js/api:client.js'/>
<script>//<![CDATA[
gapi.load('auth2'function() {
  gapi.auth2.init({
    client_id"YOUR_CLIENT_ID.apps.googleusercontent.com",
    scope"profile email"
  }).then(function(auth2) {
    attachSignin(document.querySelector('.signin'));
    if (auth2.isSignedIn.get() == true) {
      var profile = auth2.currentUser.get().getBasicProfile();
      document.querySelector('#userInfo').innerHTML = '<div class="box_tin"><p>Google account info:</p><p><b>ID:</b> ' + profile.getId() + '</p><p><b>Name:</b> ' + profile.getName() + '</p><p><b>Email:</b> ' + profile.getEmail() + '</p><p><b>Image URL:</b> ' + profile.getImageUrl() + '</p></div>';
      document.querySelector('.signin').style.display = 'none';
      document.querySelector('.signout').style.display = 'inline-block';
    }

    function attachSignin(element) {
      auth2.attachClickHandler(element, {},
        function(googleUser) {
          var profile = googleUser.getBasicProfile();
          document.querySelector('#userInfo').innerHTML = '<div class="box_tin"><p>Google account info:</p><p><b>ID:</b> ' + profile.getId() + '</p><p><b>Name:</b> ' + profile.getName() + '</p><p><b>Email:</b> ' + profile.getEmail() + '</p><p><b>Image URL:</b> ' + profile.getImageUrl() + '</p></div>';
          document.querySelector('.signin').style.display = 'none';
          document.querySelector('.signout').style.display = 'inline-block';
        });
    }
  });
});

document.querySelector('.signout').addEventListener('click'function () {
  var auth2 = gapi.auth2.getAuthInstance();
  auth2.signOut().then(function () {
    document.querySelector('.signin').style.display = 'inline-block';
    document.querySelector('.signout').style.display = 'none';
    document.querySelector('#userInfo').innerHTML = '';
  });
});

window.fbAsyncInit = function() {
  FB.init({
    appId'YOUR_APP_ID',
    cookietrue,
    xfbmltrue,
    version'v3.2'
  });

  FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
      document.querySelector('.login').style.display = 'none';
      document.querySelector('.logout').style.display = 'inline-block';
      getFbUserData();
    }
  });
};

(function(dsid) {
  var jsfjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s);
  js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js";
  fjs.parentNode.insertBefore(jsfjs);
}(document'script''facebook-jssdk'));

document.querySelector('.login').addEventListener('click'function () {
  FB.login(function(response) {
    if (response.authResponse) {
      getFbUserData();
    }
  }, {
    scope'public_profile,email'
  });
});

document.querySelector('.logout').addEventListener('click'function () {
  FB.logout(function() {
    document.querySelector('.login').style.display = 'inline-block';
    document.querySelector('.logout').style.display = 'none';
    document.querySelector('#userData').innerHTML = '';
  });
});

function getFbUserData() {
  FB.api('/me', {
      fields'id,name,email,picture'
    },
    function(response) {
      document.querySelector('.login').style.display = 'none';
      document.querySelector('.logout').style.display = 'inline-block';
      document.querySelector('#userData').innerHTML = '<div class="box_tin"><p>Facebook account info:</p><p><b>ID:</b> ' + response.id + '</p><p><b>Name:</b> ' + response.name + '</p><p><b>Email:</b> ' + response.email + '</p><p><b>Image URL:</b> ' + response.picture.data.url + '</p></div>';
    });
}
//]]></script>
</body>
</html>
Friends, if you are a Blogger and you want your second post to be automatic link in your post, you will have to follow some steps, after that your second post will be automatically linked to your post.
(Meaning that you will have 4-5 posts of automatic rest in one of your posts, it is called Automatic Internal Linking.)
How to Create Automatic internal links in Blogger
How to Create Automatic internal links in Blogger


Friends, this is a great way to get enough traffic to your Blog. And how can you do this in a simple way?
Steps to Create Automatic Internal Linking in Blogger Post:-
1. Friends, you first need to log in to your Blogger Account.

2. After that you have to click on the theme.

3. After that whatever theme you have installed in your Blogger, it will show you have to click on Edit HTML here.

4. After clicking on Edit HTML, you have to control + F in your keyboard, then you will have a search tab in front of you, </ head>
How to Create Automatic internal links in Blogger

5. When you search by typing </ head> then you have to paste these codes wherever you see </ head> text. Codes are given below to download you under the name of CSS Scripts
How to Create Automatic internal links in Blogger


CSS Script will get you to download below.
Download internal linking free CSS Script :- Click Here
6. After Paste CSS Script, you have to repeat Control + F and this time you need to 
How to Create Automatic internal links in Blogger

 <data: post.body /> is to search by typing it.

7. When you search by typing this <data: post.body /> code, you will see all the code displayed in this name, you will enter the last one where this code appears, you have to enter it and all the code in the HTML Script below it. Have to pay taxes You can download HTML Script below.
How to Create Automatic internal links in Blogger

Download internal linking free HTML Script:- Click Here
8. When you paste these two script codes, you have to do a Save Theme in your Blogger Template.

9. After that, as soon as you visit your Blogger Website, you will start to have Automatic Internal Linking Post Show in your every post.
Conclusion:-
Friends, you have to paste these two codes correctly and in the right place where we told you. And this will automatically help in bringing Traffic to your website Automatic Internal Post Linking. Friends, one thing you must remember is that if you paste these codes in the wrong place in your HTML code, there may also be a problem in your website, so where we have told you, you paste the same script code.