Riot.js Facebook Counter

by Aggre _--

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.3.18/riot+compiler.min.js"></script>
<sns-count></sns-count>

<script type="riot/tag">
    <sns-count>
        <p each="{ opts.sites }">
            { title } の Facebook シェア数は <sns-count-facebook url="{ url }"></sns-count-facebook> です。
        </p>
    </sns-count>
</script>

<script type="riot/tag">
    <sns-count-facebook>
    <span>{ count }</span>
    this.count
    let self = this
    $.ajax( {
        url: 'https://api.facebook.com/restserver.php',
        type: 'get',
        data: {
            method : 'links.getStats',
            format : 'json',
            urls : opts.url
        }
    } )
    .done( function ( data ) {
        self.count = data[ 0 ].total_count;
        self.update()
    } )
    .fail( function ( data ) {
        console.log( data )
    } )
    .always( function ( data ) {
        console.log( data )
    } )
    </sns-count-facebook>
</script>

JavaScript

riot.mount( 'sns-count', {
    sites : [
        { title : 'Google', url : 'https://www.google.com' },
        { title : 'Facebook', url : 'https://www.facebook.com' },
        { title : 'Twitter', url : 'https://www.twitter.com' }
    ]
} )