Question

I’ve implemented a facebook like button into my (html) website. Now german data protection laws want webpages to be opt-in. Other websites do this by not immediately showing the facebook like but instead showing a button saying “activate facebook button” and when this button is clicked they replace it with the real facebook button.
So it requires two clicks, but this is ok for me. An example is this webpage.

I know html and php but got no clues about javascript (yet). I’d like to know how to implement this: how can I replace the fake button with the facebook one upon clicking?

Answer 1

Looking in their source, they site is using a function they called button2iframe – here it is:

function button2iframe(id,link){
        //alert(id);
        var substr = link.split("?");
        var url = substr[0];
        substr.reverse();
        substr.pop();
        substr.reverse();
        var params = substr.join("?");
        params = params.split("&");
        var k;
        var param = "";
        var paramname = "";
        for( var k=0; k<params.length; k++ ) {
            param = params[k].split("=");
            if(param.length>1){
                if(param.length>2){
                    paramname = param[0];
                    param.reverse();
                    param.pop();
                    param.reverse();
                    param[1] = param.join("=");
                    param[0] = paramname;
                }
                param[1] = encodeURIComponent(param[1]);
            }
            params[k] = param.join("=");
        }
        params = params.join("&");
        link = url+"?"+params;
        jQuery(function ($) {
            $("#"+id).html($('<iframe allowtransparency="true" frameborder="0" scrolling="no" src="'+link+'" id="iframe_'+id+'"/>'));
        });
    }

And this is what the associated markup for the facebook button looks like:

<li class="wpsoptin_facebook" id="wpsoptin_facebook_39429">
    <div class="wpsoptin_medium">
    <a class="wpsoptin_sharerlink" href="javascript:button2iframe('wpsoptin_facebook_39429','FACEBOOK LIKE BUTTON IFRAM URL GOES HERE')">Facebook aktivieren</a>
    <div class="wpsoptin_sharerend"></div>
    </div>
</li>

This code requires you include jQuery in your site as well.