I have a little problem hopefully someone can help with :)
I have a Facebook like button on a page, that I would like to, when 'clicked' to display a form underneath it. So far I have tried .click and it doesn't work, however, .hover does! But I don't want it that way.
Any info would be greatly appreciated!
(for testing purposes the like button doesn't refer to any page yet, also for facebook script to work needs to be on a server, localhost or otherwise)
Here is my code:
<!-- Add Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--My styles -->
<style>
#form{display: none;width:400px;}
</style>
<!-- Facebook Code -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- MY click Event -->
<script>
$(document).ready(function(){
$(".fb-like").click(function(){ //click doesnt work, hover does
$("#form").css("display","block");
});
});
</script>
<!-- the Button -->
<div class="fb-like" data-href="#" data-layout="button_count" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>
<!-- The Form -->
<form id="form">
<input type="text" name="name" value="First Name"><br>
<input type="email" name="email" value="Your Email">
<button type="submit" name="submit" value="submit">Sign Up</button>
</form>
A scratch my previous answer. I looked again and found out that the like button is rendered in an iframe. That means it is protected by first origin policy and you CANNOT access DOM components on another domain. Tough luck.
Related
My question is similar to others, but as the answers vary so much depending on how the code is first setup, I still haven't found a suitable answer to my question. Let me take you through the steps I take to try to run my JavaScript.
I open a new tab in my browser, press "Ctrl + O" to bring up the file explorer, then open the html file that links to the JavaScript. The code just never executes from the file; it'll only run if I run it from Scratchpad.
How do I get my JavaScript to run from the "script.js" file without having to copy it into Scratchpad?
function autocomplete(inp) {
if (inp) {
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
console.log("We have input! - " + inp.value);
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
console.log("We have keydown! - " + e.keyCode);
});
}
}
// Run autocomplete when there is imput
autocomplete(document.getElementById("myInput"));
<head>
<link rel="stylesheet" href="styles.css">
<script src="script.js" type="text/javascript"></script>
<title>Autocomplete Test</title>
</head>
<body>
<div>
<div>
<h2>Input Tester</h2>
<p>Enter text into the field to test</p>
<form class="autocomplete" autocomplete="off">
<div class="wrapper">
<input id="myInput" type="text" name="myCountry" placeholder=" Search Hotels">
<!-- Trigger/Open The Modal -->
<button type="button">Search</button>
</div>
</form>
</div>
</div>
</body>
Note: This runs without issue on Stackoverflow. The error shows best when loading from a file you made (in a code editor of your choice), into your browser. I'm using the Atom code editor, in case anyone finds it relevant.
Script tags block by default; the browser waits for the script to finish executing before continuing to parse more HTML below it. So, at the time <script src="script.js"... runs, the document has not been populated yet.
Either:
(1) Give the script tag a defer attribute (preferred):
<script src="script.js" defer type="text/javascript"></script>
(2) Wrap the whole script in a DOMContentLoaded listener:
window.addEventListener('DOMContentLoaded', () => {
autocomplete(document.getElementById("myInput"));
});
(3) Move your script to the end of the body:
</div>
<script src="script.js" type="text/javascript"></script>
</body>
It is a better practice to place your link to JavaScript files just before closing the <body> tag so that You have your page loaded and then you can then get reference to it from your JavaScript.
Try this,
<head>
<link rel="stylesheet" href="styles.css">
<title>Autocomplete Test</title>
</head>
<body>
<div>
<div>
<h2>Input Tester</h2>
<p>Enter text into the field to test</p>
<form class="autocomplete" autocomplete="off">
<div class="wrapper">
<input id="myInput" type="text" name="myCountry" placeholder=" Search Hotels">
<!-- Trigger/Open The Modal -->
<button type="button">Search</button>
</div>
</form>
</div>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
I am adding FB share button in my webpage and on click of share button I want to share share the image with some description. I followed this link
https://developers.facebook.com/docs/plugins/share-button
even am able to share on FB but not able to pick the image and description .Its just accepting only the domain name.
Am not able to identify the issue...please guide me ..any help will be
appreciated ,Thanks in advance
Meta Tag is not affecting at all...
<meta property="og:url" content="http://www.example.com/projectfoldername/aa.php" />
<meta property="og:type" content="website" />
<meta property="og:title" content="image Title" />
<meta property="og:description" content="image description" />
<meta property="og:image" content="http:///www.example.com/projectfoldername/imagefolder/image.jpg" />
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your share button code -->
<div class="fb-share-button"
data-href="http://www.example.com/projectfoldername/aa.php"
data-layout="button_count">
</div>
</body>
</html>
This warning am getting
Warnings That Should Be Fixed
Inferred Property
The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Missing Properties
The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id
error snapshot ...pls guide me
You would appear to be missing the Open Graph tags in your page head. Facebook uses these to scrape the page preview. If you look at the Full Code Example at the link in your post, you can see some sample tags.
If you specify the image and text in the OG tags, your sharer should work correctly.
I have a very basic question concerning jQuery but I really don't know how to put it in a short sentence/ headwords to google for it. So first of all, I'm sorry if this might be a double post.
For my problem, I guess only those three files a relevant:
index.html
content.html
script.js
My index.html basically is just a file which keeps a navigation bar (build with Bootstrap v3.3.0).
<!DOCTYPE html>
<html lang="en">
<head>
...
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles CSS -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
...
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Content</li>
...
</ul>
</div><!-- end navbar-collapse -->
</div><!--end container -->
</nav> <!-- end navbar -->
<div class="container" id="mainContainer">
<!-- Load by default from the Navigation with jQuery -->
</div><!-- end container -->
<footer>
....
</footer>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html>
My content.html basically only displays a "button" now (Actually it displays much more, but for this example it only displays a "button")
<div class="col-xs-12 col-md-6">
<a id="testButton" class="btn btn-success" href="#">This is a Test-Button</a>
</div>
My script.js basically only "changes" the content of the div-Element (<div class="container" id="mainContainer">…</div>).
$(document).ready(function () {
$('.nav li a').click(function(e) {
$('.nav li').removeClass('active');
var $parent = $(this).parent();
var $content = $(this).attr('href');
if (!$parent.hasClass('active')) {
$parent.addClass('active');
$('#mainContainer').hide().load($content + '.html').fadeIn('500');
$('#mainFooter').hide().fadeIn('500');
}
e.preventDefault();
});
$('#testButton').click(function(event){
alert("Test, this Button works!");
event.preventDefault();
});
});
Everything displayed here works pretty fine (I'm not sure if this is the way how you should use the navigation, but it works). When I change the content by clicking on the "Content-Item" from the navigation, the content.html file gets displayed in the div-element. But when I click on the Button from the content.html (which was loaded before), no alert gets fired. I guess because the "javascript file", can't find a reverence when the Webpage loads the first time. When I enter the javscript code directly into the content.html file the button actually fires an alert (same happens when I only link the file <script src="js/script.js"></script>).
I really do not want to enter this single line of code (<script src="js/script.js"></script>) to every "content-file". So is there an easier way how to do that? Maybe I also need to change the way how I use the navigation.
Thanks for your help
You want event delegate.
It means you delegate #testButton's click event to it's parent, even if the button is not yet exist in the dom, but when it is there, it's parent, in your situation, #mainContainer will be able to handle the button's event listener.
Like:
$('#mainContainer').on('click', '#testButton', function(event){
alert("Test, this Button works!");
event.preventDefault();
});
I have 2 buttons, 1 simple and other Facebook like button, I want to make that after my simple button is clicked, It activated(clicked) Facebook button too, but It wont work. I've used this code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
$("#test").click(function(){
$("#fb-root").click(); //this doesn't click Like button
alert("Like is clicked"); // this alert when button is clicked
});
});
</script>
<div class="fb-like" data-href="https://facebook.com/myPage" data-layout="button" data-action="like" data-show-faces="false" data-share="false" ></div>
<input type="button" id="test" name="test" value="Test" />
This is other code.After my Like button is clicked It alert "I just clicked like button", but this line not working $(this).remove();. (But I need to make like I said in first case. Click "Test" button to get clicked "fb-like" button.)
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(e) {
FB.Event.subscribe('edge.create', function(response) {
$(this).remove(); // I used this to remove button after clicking, but not working
alert('I just clicked like button');
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if(d.getElementById(id)){return;}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Maybe some lines from this code are needed, something like these window.fbAsyncInit = function(e) {
FB.Event.subscribe('edge.create', function(response) {?
Sadly, you won't be able to click the Facebook like button this way.
This is a security limitation in place to prevent you from clicking anything on a third party site that you don't want to. Here's more information about clickjacking and the same-origin policy.
I've added a Facebook like button to my website, by following these instructions. Basically, I added this HTML:
<div class="fb-like" data-href="http://www.festivals.ie"
data-send="false" data-width="100"data-show-faces="false" data-font="verdana"
data-layout="button_count">
</div>
And this JavaScript:
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=29208799875673";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
When the button is pressed, the following popout appears:
The popout contains some text that describes the website (circled in red). This text seems to be copied from the first non-empty <p> element that appears on the page (starting from the top).
Is there a way that I can change this to something that better describes the site? I tried adding a
<meta name="description" content="my website description"/>
But it didn't make any difference.
Use the opengraph description meta tag. You might also want to add the title unless your page title is always what you want to appear on Facebook.
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
See https://developers.facebook.com/docs/opengraph/objects/ for further information.