1
\$\begingroup\$

I created a simple template for web pages that uses social plugins.

The template consists of the html/php with jquery, and the necessary javascript to enable and use social plugins. The javascript file for the social plugins is enable at the very end, and the jQuery file at the beginning...

So far I tested all using the facebook plugin, which i did by creating a button and calling the Facebook Web Share Dialog Box. All works well. I want to do the same for other social plugins like twitter, google+, etc...

I'm looking for improvements on the template not the plugin itself (i can figure that one out by doing some research).

html

<!DOCTYPE html>
<html lang="es_ES">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <!-- OPEN GRAPH TAGS -->
    <meta property="og:url" content="">
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:image" content="">
    <meta property="fb:app_id" content="">
    <meta property="og:type" content="">
    <meta property="og:local" content="es_ES">
    <!-- END - OPEN GRAPH TAGS -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <h1>TEST SOCIAL PLUGINS</h1>

    <div class="socialSet">
        <span data-social='{"share":"facebook", "object":"http://www.example.com/45/this-is-an-example"}'></span><span data-social='{"share":"twitter", "object":"http://www.example.com/45/this-is-an-example"}'></span>
    </div>

    <script src="js/social_plugin.js" type="text/javascript"></script>
</body>
</html>

social_plugin.js

// FACEBOOK
window.fbAsyncInit = function() {
    FB.init({
        appId: 'xxxxxxx',
        xfbml: true,
        version: 'v2.7'
    });
};

(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/es_ES/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// TWITTER

// GOOGLE +

$(document).ready(function() {
    $("[data-social]").click(function(e) {
        var params = $(this).data("social");

        switch(params['share']) {
            case 'facebook':
                var object_href = params['object'];

                FB.ui({
                    method: 'share_open_graph',
                    action_type: 'og.likes',
                    action_properties: JSON.stringify({
                        object: object_href,
                    })
                }, function(response){});
                break;

            case 'twitter':
                break;

            case 'google_plus':
                break;

            default:
                break;
        }
    });
});
Improve this question
\$\endgroup\$

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.