How to Showing Page/Post Views in Blogger | Firebase

नमस्कार दोस्तों, आज मैं आपके लिए बेहद खास टॉपिक लेकर आया हूँ, इस टॉपिक में हम बात करने वाले हैं कि ब्लॉगर के पेज और पोस्ट में व्यूज कैसे दिखाएँ. आपको बता दूं ये ट्रिक शत प्ररिशत काम करेगा, लेकिन सिर्फ ब्लॉगर पर, पोस्ट को पूरा पढ़ें.

Post View क्या है?

पोस्ट व्यूज आपके पेज या पोस्ट पर आने वाले Visiters की संख्या दर्शाता है, पोस्ट पढने वाले को ये पता चलता है कि पोस्ट कितनी वायरल या ट्रेंड हुयी है, इससे आपकी प्रदान की जानकारी सच्ची और सही साबित होती है. वर्डप्रेस पर ये Plugins के माध्यम से लगाना आसान है, लेकिन ब्लॉगर में इसे लगा पाना उतना ही मुश्किल है, Don't Worry आज में इसी मुश्किल का हल लेकर आया हूँ. 

How do it?

• Blogger
• Google Analytics
• Firebase 

How to Showing Page/Post Views in Blogger

इस काम को पूरा करने के लिए हमे ऊपर दिए टूल्स की जरूरत होगी, तो चलिए इसे वास्तविकता में लाते हैं, सबसे पहले आप Firebase में जाएँ और Google Account से Sign Up कीजिए.

Firebase में Sign Up करने के बाद एक Project Create करें उसके बाद तीन स्टेप्स फॉलो कीजिए

• Create Project Name
• Continue
• Configure Google Analytics ( इसमें गूगल एनालिटिक्स से जुड़े ब्लॉगर को चुने जिस पर आप ये ट्रिक अपनाना चाहते हैं)

ये स्टेप्स पूरे होने के बाद Firebase में Realtime Database को अनुमति दीजिए, Realtime Database को अनुमति देने के बाद Realtime Database के रूल्स में जाएँ और नीचे दिए कोड के साथ रेप्लेस कीजिए 

 {  "rules": {
      ".read": true,
      ".write": true
    }
}

ये करने बाद प्रोजेक्ट की सेटिंग्स में जाएँ और General टेब पर क्लिक कीजिए और Apps के Firebase SDK snippet को Config कोड में कॉपी कीजिए और एक जगह सेव कीजिए, देखें फोटो

अब नीचे दिए कोड को अपने ब्लॉगर के </body> के ठीक ऊपर पेस्ट कीजिए और बताये गये लिंक्स को अपने प्रोजेक्ट लिंक से रेप्लास करें

<!-- Firebase script by Rameshwar --> 
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'></script> 
<script> $.each($("a[name]"), function(i, e) { var elem = $(e).parent().find("#postviews"); var blogStats = new Firebase("Paste-Your-Project-URL-Here/pages/id/" + $(e).attr("name")); blogStats.once("value", function(snapshot) { var data = snapshot.val(); var isnew = false; if(data == null) { data= {}; data.value = 0; data.url = window.location.href; data.id = $(e).attr("name"); isnew = true; } elem.text(data.value); data.value++; if(window.location.pathname!="/") { if(isnew) blogStats.set(data); else blogStats.child("value").set(data.value); } }); }); </script> 
<!-- The core Firebase JS SDK is always required and must be listed first Code editor Rameshwar --> 
<script src='https://www.gstatic.com/firebase/8.2.9/firebase-app.js'></script> 
<!-- TODO: Add SDKs for Firebase products that you want to use Add Firebase to your JavaScript project --> 
<script src='https://www.gstatic.com/firebase/8.2.9/firebase-analytics.js'></script> 
<!-- Initialize Firebase --> 
<script src='/__/firebase/init.js'></script> 
<script> 
  // Your web app's Firebase configuration 
<!-- Paste Your Firebase SDK snippet Code Here --> 
  // Initialize Firebase 
  firebase.initializeApp(firebaseConfig); 
  firebase.analytics(); 
</script> 
<script> 
FileInputStream serviceAccount = 
  new FileInputStream("path/to/serviceAccountKey.json"); 
FirebaseOptions options = new FirebaseOptions.Builder() 
.setCredentials(GoogleCredentials.fromStream(serviceAccount))   
.setDatabaseUrl("Paste-Your-Project-URL-Here") 
  .build(); 
FirebaseApp.initializeApp(options); 
  </script> 
  

ऊपर दिए कोड को पेस्ट करने के बाद बताई गयी जगा पर अपने प्रोजेक्ट कोड को रेप्लास करने के बाद अपने टेम्पलेट को सेव कीजिए, और आगे दिए Steps को फॉलो कीजिए.

CRTL+F दबा कर 

<div class='post-snip'/>

कोड को फाइंड कीजिए और इसके ठीक नीचे इस "

  <i class='fa fa-eye' style='color: green'/> <a expr:name='data:post.id'/><span id='postviews'/> Views
  

कोड को पेस्ट कीजिए, और ब्लॉगर टेम्पलेट को सेव कीजिए. अब आपका पूरा प्रोसेस कम्पलीट हो चूका है.

क्या ये बास्तव में काम कर रहा है, इसे जानने के लिए आप अपने ब्लॉगर की किसी पोस्ट को ओपन कीजिए और उसे कम से कम पांच बार रिफ्रेश कीजिए. और नीचे दी फोटो की तरह दिखाई देगा 

See in Video

Share Share Tweet Share Share Share