How to hide Facebook Like Button after click? - javascript

I been looking all over the internet for a code that does this, no luck so far... This is the code for my facebook like button:
<script type="text/javascript">
$(function(){
$('<iframe scrolling="no" frameborder="0" style="width: 300px; height: 80px;'+
'" src="http://www.facebook.com/widgets/like.php?href='+
encodeURIComponent(location.href)+
'"></iframe>').appendTo('#like-button')
})
</script>
I want this button to disappear after is clicked (Im thiyin to make some sort of like gate)
Cheers

First, why this is a bad idea:
Like Gates are no longer allowed, check out the changelog and the platform policy
It is annoying for the user if he can´t unlike something directly where he liked it.
Users can´t comment on the like button if you hide it right after clicking
Sometimes it needs confirmation to like something (for spam reasons, for example) - if you hide the button after clicking, the user can´t confirm and the like will not get through
It´s pointless anyway, because you will not be able to detect it for returning users so you would need to show the like button every time you refresh the page. You may use a cookie, but that´s not really a reliable solution.
...and please don´t try to solve the most simple things with jQuery. Instead of jQuery.appendTo, you can use appendChild, innerHTML, ... Learn JavaScript before using a library for it, or you will end up using it for everything - which is usually a lot slower than Vanilla JavaScript and not even less code in many cases.
That being said, it´s not that simple to hide it, you would need to use FB.Event.subscribe to subscribe to the like event: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.2
See this thread, for example: Attach a click() event to the FaceBook 'Like' button?
And again, because it´s very important: Like Gates are not allowed!

You can add this to your script:
$('#like-button').click(function(){
$(this).hide();
});

Related

JavaScript to add/remove back button in Qualtrics

I am trying to use the code hidePreviousButton () to hide the back button in Qualtrics. Currently, I have added the back button on all questions using the Survey Options, and I would like to remove the back button on certain pages.
If there is not a way to do that, then I would be equally open to adding the back button on select pages using JavaScript as well.
Thank you for any assistance!
To hide the previous button, you can use:
this.hidePreviousButton ()
So the full code screen should look like this:
`Qualtrics.SurveyEngine.addOnload(function()
{
this.hidePreviousButton ()
});
`
I found this in the API Qualtrics page, but there it forgets to tell you that you need to include "this." before any of the commands that it gives you. At least, adding that code before the command worked for the ones I tried.
The API page for Qualtrics is actually inaccurate, unfortunately it needs a few updates. The current way to do this, is by adding:
$('.PreviousButton').hide();
to the JavaScript for any question you want to hide it for.

How to make a javascript alert NOT say the name of the page?

My webapp alert looks like this:
InputCoordinates.html
Latitude must be filled out.
I would say this looks unprofessional and rough around the edges. Is there a way to stop the alert from displaying the pagename?
You can't manipulate that.
Maybe you take a look at these bastards called modal popups, if youre able to use jQuery.
http://jquery.iceburg.net/jqModal/
There are non-jquery options, too, of course.
I'd advise you not to use "alert". Use something that allows you to style it yourself, e.g., jQuery Dialog. You can make that modal if necessary (follow the links on the right of the page I sent for add'l examples).
Use an HTML modal box instead of the JavaScript alert() Box.
There are plenty of options to choose from on the web, e.g. here.

jQuery unlock content with a like

I'm putting up a "special offer" on my website where if users like my website via a facebook like button, then can access a special form where they can ask me to look at their website and other stuff. I can't seem to find an easy way to do this without getting into the facebook api. So basically, is there a way to reveal an element (#ask_form) when the + like part of the facebook like button is clicked? (.connect_widget_like_button clearfix, .like_button_like) Any responses would be helpful. If there's a way to do this with the FB API where if a user unlikes it it would go away and have more features that'd be cool to. I look forward to reading your responses.
You don't need jQuery for that. Have a look at the 1st and 2nd answer from this question.
$(buttonselector).on('click', function () {
$(hiddenformselector).show();
});
that's assuming the hidden form starts as display:none;
Sorry I'm not familiar with the face book api but this would cause the form to show when that button was clicked
Try it: Like 2 Unlock for Jquery

Is there a way of adding a LOT of Facebook like buttons to a page?

I've tried using the standard Facebook like button. I require about 50 like buttons (that number may grow) on my page. The problem is that the second I add more than a few, it drastically slows down my page. If I show all 50 like buttons, the page is practically unoperable, the browser refuses to scroll, freezes and gives "Not responding" warnings etc.
I assume this is because the like buttons weren't made to be displayed multiple times on one page, and it does a LOT of redundant work for every added button. I've seen it be done though, so I'm wondering: is there some special way of displaying lots of Facebook like buttons on one page? I'm talking tens, perhaps hundreds.
Thanks
There are two ways I would recommend doing this. One is to render a fake Facebook button (static image) and then on hover, dynamically load the real Facebook like button to replace the image. The other is to use one of the various jquery scrolling plugins to load the Facebook like buttons as the content becomes visible on the page. TechCrunch.com has lots of like buttons on their home page without performance issues (they are doing the second option I listed).
I think you must implement your own FB link, example:
<a href="http://www.facebook.com/share.php?u=your-url" class="someFBClass" ><span class=icon></span> Facebook</a>
real example
You have to add some css to make the link look FB link.
You can do this by doing using the FB.XFBML.parse method.
http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
This allows you to render the like as and when you need them, each just the one in the veiwport.
Also to make sure, your not loading the facebook javascript SDK (the old XFBML way) for each like button?

create a "show up" window when you click register?

im a backend programmer who wants to have a window that appears in front of the current window when clicking "register".
so that you dont have to redirect to another page.
i think u guys know what i mean.
how do i do that? is it with jquery or javascript? is ajax involved?
and what is that kind of popup box called?
You want to write a div into your HTML that contains your login fields (i.e. the popup window). Set it to position:absolute; and position with CSS so it floats above the page contents and doesn't interrupt the flow when it appears. Get it all nice and positioned where you want it, then set it to display: none; so it will wait for javascript to make it appear.
Then (using jQuery), write something like this:
$('#register').click(function() {
$('#popup').show();
});
where #register is whatever gets clicked (can be most anything with id="register").
What happens whenever that form is submitted is up to you, and not any different from the options you'd have with any other HTML form. jQuery can help with AJAX if you decide to go that route and not send the surfer to another page to process the form.
It can be done using quite a few totally different approaches. As Sam said it's the concept of modal boxes.
You could do it completely on the client side using CSS and JavaScript (alternative), or via AJAX and some third-party libs.
Try being a bit more specific - what's the the backend/frontend environment? Is performance an issue (eg. minimal client-server communication)?
I believe you're referring to a modal form. You can search for modal popup javascript. There is a good javascript component called Lightbox that will help as well.
EDIT:
I mentioned Lightbox, but Lightbox Gone Wild is the one I meant. As others have pointed out, using a modal tool like this all you do is write the html you want to be displayed in the modal popup. That link is a good tutorial on the concept and explains things well.

Categories

Resources