javascripttwittercocos2d-js

Custom html button for cocos creator


I'm creating a simple game only for web browsers using Cocos creator and need to implement a share to twiiter button. But I need to do this in plain javascript. So far I have this code.

cc.Class({
    extends: cc.Component,

    properties: {
        tweet: cc.Button
    },

    start() {
        const el = document.createElement('a');
        el.classList.add('twitter-share-button');
        el.href = 'https://twitter.com/intent/tweet?url=http://test.com;via=stack';
        el.id = 'twiiterBtn';

        // After appending to body, element exists.
        document.body.appendChild(el);

        window.twttr = (function(d, s, id) {
            var js,
                fjs = d.getElementsByTagName(s)[0],
                t = window.twttr || {};
            if (d.getElementById(id)) return t;
            js = d.createElement(s);
            js.id = id;
            js.src = 'https://platform.twitter.com/widgets.js';
            fjs.parentNode.insertBefore(js, fjs);
            t._e = [];
            t.ready = function(f) {
                t._e.push(f);
            };
            return t;
        })(document, 'script', 'twitter-wjs');

        window.twttr.ready(function(twttr) {
            twttr.events.bind('tweet', function(event) {
                console.log('tweet callback', event);
            });
        });

        this.tweet.node.on('click', this.dispatch);
    },

    dispatch() {
        // Everytime I click the button, this function gets called correctly
        // but the element doesn't exist anymore, Cocos creator removed it.
        console.log(document.getElementById('twiiterBtn'))
    }
});

At start() I create the element and add the class required for the twiiter button, window.twttr works fine, the ready function gets executed, but Cocos creator is removing my element and since the element doesn't exist anymore, the callback function is not working. If anybody faced a similar situation and know how I can solve this.

I basically need to implement the tweet btn and get the callback.

Thankyou


Solution

  • It seems like you can’t know if the user really tweeted or not. Here more information about it: https://stackoverflow.com/a/48803977/4066787

    But here is a working code with a callback when user clicks and open the popup

    cc.Class({
        extends: cc.Component,
    
        properties: {
            tweet: cc.Button
        },
    
        start() {
            // TODO: text IS CUSTOM MESSAGE; via IS TWITTER USERNAME
            const url = encodeURI('https://twitter.com/intent/tweet?text=super custom message;via=TwitterAccount');
            const el = document.createElement('a');
    
            el.classList.add('twitter-share-button');
            el.href = url;
            el.target = '_blank';
            el.id = 'twitter-intent';
    
            this.tweet.node.on('click', function(){
                window.open(url, '_blank', 'location=yes,height=370,width=520,scrollbars=yes,status=yes');
    
                // TODO: send callback to server.
                console.log("call API")
            });
        }
    });