Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you want to have the functionality you describe, then you probably need to learn a bit of AJAX.</p> <p>In essence you're currently embedding a script of some other party that offers the like system (Facebook, Twitter, Google, …). This loads on page load and populates some elements with various like buttons. Now, you need to delay the execution of the embedded script until some event occurs (user click share button).</p> <p>There's a verbose blog post with sample code for Facebooks like button but the process is essentially the same for all sites. See <a href="http://www.torbenleuschner.de/blog/119/ladezeit-facebook-like-button-per-jquery-nachladen/" rel="nofollow">http://www.torbenleuschner.de/blog/119/ladezeit-facebook-like-button-per-jquery-nachladen/</a> (German language)</p> <p>The key point is to have an empty element to hold the buttons which is only filled after an event (click in your case). For example:</p> <pre><code>&lt;div class="popup-share"&gt;&lt;/div&gt; </code></pre> <p>Then you need to wait for the event in the same way you're currently using. But instead of having the button creation scripts on loaded page, we'll assume they are contained in buttons-fragment.html.</p> <pre><code>// Delay function's execution until click and call it exactly once $('.share').one('click', function loadLikeButtons(e) { // Get the empty element var likeButtonContainer = $('.popup-share'); // Fetch the code which contains the buttons (this is AJAX in the background) $.get('your-server.com/buttons-fragment.html', {}, function fillInLikeButtons(data){ // The code in this inner function runs as soon as the code for the buttons is available / was successfully loaded. // The argument data contains the same HTML fragment that you are currently using to create the buttons // Place the buttons (or button initialization scripts within the still empty button holder likeButtonContainer.html(data); }); }); </code></pre> <p>Note for a solution with better performance omit the AJAX request to fetch the HTML fragment. Instead transfer it with the page load but keep it in a JavaScript variable. Inject it to the empty button holding element on click of your share button. I didn't put this solution because I think having only one solution in the answer to your question is easier to understand. You might want to open another question on how to transfer a HTML fragment with a page load and inject it on some event.</p> <p>Also note, that I did never actually test the code typed above. You could perhaps hit typos.</p> <p>As a side note (not part of the answer): Mind privacy related issues when putting like buttons to your site as well as performance related stuff. Let's assume the buttons is created similar to the following code:</p> <pre><code>&lt;script src="http://connect.facebook.net/en_US/all.js#xfbml=1"&gt;&lt;/script&gt; &lt;fb:like layout="box_count" show_faces="false" width="55" font="arial"&gt;&lt;/fb:like&gt; </code></pre> <p>As soon as the browser encounters the fragment, it will load the script from Facebook. While doing so the address of your page is transferred as well as possibly set cookies from Facebook. So if somebody is still logged into Facebook, Facebook will be able to track him/her visiting your site as soon as your site is loaded. With the answer presented above this only happens on click of the share button (because this causes loading of the external scripts).</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload