youtube subscription button doesn't work - javascript

I have added this code
<div class="g-ytsubscribe" data-channelid="UClaHcVK3_3vgPZHzYuaLPdQ" data-layout="default" data-count="default"></div>
to my website to embed a subscribe button there. I have also added
<script src="https://apis.google.com/js/platform.js"></script>
to the header. but when user clicks on the button he gets a Network Error like the following
"NetworkError: 400 Bad Request - https://www.youtube.com/subscription_ajax?action_create_subscription_to_channel=1&c=UClaHcVK3_3vgPZHzYuaLPdQ&eurl=http%3A%2F%2Fexclusivesurgery.com%2F"
could you please tell me how i can fix this?
Thanks

YouTube Subscribe Button
The YouTube Subscribe Button lets you add a one-click Subscribe button
to any page. The button lets people subscribe to your YouTube channel
without having to leave your site to either log in to YouTube or
confirm their subscriptions.
To add a button, your application needs to load this JavaScript file:
https://apis.google.com/js/platform.js
You can add a button by using
an element, such as a <div>, that sets its class to g-ytsubscribe and
uses other attributes to customize the button. The code below shows a
simple integration that displays a Subscribe button for the
GoogleDevelopers channel.
<script src="https://apis.google.com/js/platform.js"></script> <div
class="g-ytsubscribe" data-channel="UClaHcVK3_3vgPZHzYuaLPdQ"></div>
<script>
function onYtEvent(payload) {
var logElement = document.getElementById('ytsubscribe-events-log');
if (payload.eventType == 'subscribe') {
logElement.innerHTML = 'You will love this channel! :D'
} else if (payload.eventType == 'unsubscribe') {
logElement.innerHTML = 'We are sorry you are unsubscribing. :('
}
if (window.console) {
window.console.log('ytsubscribe event: ', payload);
}
}
</script>
<div class="g-ytsubscribe" data-channel="UClaHcVK3_3vgPZHzYuaLPdQ" data-onytevent="onYtEvent"></div>
<div id="ytsubscribe-events-log"></div>
Take at https://developers.google.com/youtube/youtube_subscribe_button to generate the proper button code.

You can't fix this until Google fixes it themselves.

Related

I want to log an action everytime a user clicks (highlights) an input field to enter a value into it. What can I do to achieve such functionality?

I am using React if that helps.
I'm working on some user actions analytics for my website which has a form. I'm adding a logger on some user actions. One of them being I want to log every time the user clicks on the input field to enter some value into it. How can I achieve this functionality?
I was thinking of onClick but I don't think that would be the best way to go about it cause that wouldn't serve the purpose.
<input onClick={logCount}>
More info about events:
https://reactjs.org/docs/handling-events.html
I'm not exactly sure why you're claiming an onclick event wouldn't be the right approach.
You can add an ID to the input tag and access it through a JavaScript file, adding an onclick event to it.
<!DOCTYPE html>
<html>
<body>
<input type="text" id="test">
<script>
document.getElementById('test').onclick = function() {
console.log('An input field with the id "test" has been clicked.')
}
</script>
</body>
</html>

Google CAPTCHA - able to submit a form without checking the box

So I've inserted the Google Captcha validation script to my webform using the official documentation which can be found here: https://developers.google.com/recaptcha/docs/display#render_param
Despite me following the documentation to the letter, why am I still able to submit a form without checking the Captcha box? Forgive my arrogance by I thought the whole idea of this CAPTCHA service was that the user would not be able to submit a form without checking the CAPTCHA box so the webmaster can weed out the bots?
The end result looks fantastic, I have the CAPTCHA box on my website but right now, you may as well ignore it.
I don't see the point of Google investing time in writing documentation for this script when you can still use a form without the need to check the box. They may as well just not write said documentation because the result is still the same: scratching my head and confused.
Below is the code with only the relevant part of my form. Can anyone shed any light on what I'm missing here, then whoever can help should definitely consider a career writing coding help documentation for Google because clearly the individuals they employ at the moment - well - need I saw more?
Many thanks and all the best,
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="<PHP File Directory>" enctype="multipart/form-data" method="POST">
<div class="g-recaptcha" data-sitekey="<key>"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
I use this jquery function to check whether captcha is clicked or not before submission. Otherwise you have to validate the same after form submission. You will have to apply id to the form. Also place a div with class 'msg-error' just above recapthca div in the form.
// to enable recaptcha click validation before form submission
var form = $('#contact-form');
form.submit(function(event){
event.preventDefault();
var $captcha = $('#g-recaptcha-footer' ),
response = grecaptcha.getResponse();
console.log(response);
if (response.length === 0) { console.log("captcha not clicked)");
$( '.msg-error').html( "<div class='alert alert-danger mb-0 pb-0' role='alert'> reCAPTCHA is mandatory!</div>" );
if( !$captcha.hasClass( "error" ) ){
$captcha.addClass( "error" );
return false;
}
} else {
$( '.msg-error' ).text('');
$captcha.removeClass( "error" );
form.unbind('submit').submit();
}
});

how to automatically run a javascript in console after redirecting to the next page

i'm trying to automate a login and logout script using javascript, but whenever it logs in, the console code clears up. is there a way to make it run thesame script after login? so that it will be able to logout automatically?
this script logs in but after login, it clears the console so it doesn't see the logout code:
var login= document.querySelector("button[type='submit']");
login.click();
var logout = document.querySelector("a[href='https://example.com/logout.php']");
logout.click();
console always refresh when you move page. so i think it's impossible to do it. if you want to make auto login system. maybe selenium or electron are the best way to make it.
here is the link that can help.
#selenium use python :
https://www.selenium.dev/
#electron use nodejs :
https://www.electronjs.org/
I know you wanted to run function on next page, but, anyways, here's what you could do if you stay on the same page:
function login() {
document.getElementById("bye").style.display="none";
document.getElementById("login").style.display="none";
document.getElementById("content").style.display="";
document.getElementById("logout").style.display="";
}
function logout() {
document.getElementById("bye").style.display="";
document.getElementById("login").style.display="";
document.getElementById("content").style.display="none";
document.getElementById("logout").style.display="none";
}
<div id="bye" style="display:none">Bye!</div>
<div id="login"><button id="loginBtn" onclick="login()">Login</button></div>
<div id="content" style="display:none">content</div>
<div id="logout" style="display:none"><button id="logoutBtn" onclick="logout()">Logout</button></div>

ReCaptcha: How to autosubmit the form when the captcha was send

I want to use ReCaptcha to load some extra data on the page. I want the form to be auto submitted when the ReCaptcha was entered. So that I don't need the extra submit button. The problem is that recaptcha loads its content inside an iframe, so its a bit difficult.
At the moment I have this form:
<form action="javascript:getInfo(grecaptcha.getResponse(widget1));" >
<div id="captcha"></div>
<br>
<input type="submit" value="Submit">
</form>
How do I get something like an Event-Listener on the recaptcha submit which submits the outer form?
That's sounds like an interesting technique. It would cut down on the clicking and key strokes for the user. Here is how you could do that, by listening for the successful captcha response you would be able to follow up with the desired action. Here is an example and some documentation. https://developers.google.com/recaptcha/docs/display#example
var RC2KEY = 'sitekey';
function reCaptchaVerify(response) {
if (response === document.querySelector('.g-recaptcha-response').value) {
document.forms['form-name'].submit();
}
}
function reCaptchaExpired() {
/* do something when it expires */
}
function reCaptchaCallback() {
grecaptcha.render('id', {
'sitekey': RC2KEY,
'callback': reCaptchaVerify,
'expired-callback': reCaptchaExpired
});
}
<script src='https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit'></script>
Use # instead of ?
? is used to begin query strings and will mess with method=GET type responses. # is the anchor symbol and will work.

Redirect a button from a mobile browser to a messaging app on phone

Viewing on mobile browser: I have a contact page and i want to add a "SMS" button that when a user clicked it, it will redirect to the default messaging app on mobile together with a set contact number.
How can i achieve this?
A biref summary of the functioning of the code I have provided.
On the click of "SMS" button a javascript function will be called which would takeup the value of the contact_no field and redirect to page URL of your default messaging app.
You need to include jquery file on your page:
Here I am providing a baisc code of how the thing works:
HTML:
<input type="text" name="contact_no_input_field" id="contact_no_input_field">
<input type="button" value="SMS" onclick="call_fun()">
<script type="text/javascript">
JS:
function call_fun()
{
var contact_no = $('#contact_no_input_field').val();
window.location.href="path/to/default messaging app/?contact_no="+contact_no;
}

Categories

Resources