JSFiddle - React, Tailwind, and code Playground

by seong gyun jeon

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>HTML</title>
        <style type="text/css">
          .custom-tweet-button {
            display: block;
            padding: 2px 5px 2px 20px;
            background: url('https://twitter.com/favicons/favicon.ico') 1px center no-repeat;
            border: 1px solid #ccc;
            font-size:11px;
            width:200px;
          }
        </style>
        <script type="text/javascript" charset="utf-8" src="http://static.plugin.me2day.com/js/plugins_v1.js"></script>
        <script type="text/javascript" src="http://mohwa.org/js/sns.js?dasdasdsada"></script>
                
        <script type="text/javascript" charset="utf-8">
        
        // 트위터 버튼
        Tweet.btn('자신에게 보내는 트윗', {
            parent: 'tweet_container',
            url: 'http://vaan.fpscamp.com/Community/FreeBoard/View?idx=15034&page=1&st=&sw=',
            lang: 'ko',
            countPos: 'none'
        });    


        Tweet.btn('yanione tweet msg', {
            parent: 'tweet_container',
            url: 'http://vaan.fpscamp.com/Community/FreeBoard/View?idx=15034&page=1&st=&sw=',
            lang: 'ko',
            countPos: 'right'
        });
            
        Tweet.btn('tweetText', {
            parent: 'tweet_container',
            tweetBtnType: 'related',
            url: 'http://vaan.fpscamp.com/Community/FreeBoard/View?idx=15034&page=1&st=&sw=',
            related: 'yanione',
            lang: 'ko',
            size: 'medium',
            dnt: 'false'
        });
        
        Tweet.btn('tweetText', {
            parent: 'tweet_container',
            tweetBtnType: 'hash',
            url: 'http://vaan.fpscamp.com/Community/FreeBoard/View?idx=15034&page=1&st=&sw=',
      ...

JavaScript

/**
* @namespace 소셜 버튼(plugin) 생성 모듈
* @author <a href="http://mohwaproject.tistory.com">mohwa</a>
* @version 0.1
* @since 2012.09.
* @see
* @description 소셜 버튼(plugin) 생성 모듈
*/


/**
* @class 각종 트윗 소셜 버튼 생성 클래스
*/

var Tweet = {

    /**
    * @public 
    * @param {String} text 트윗문자열
    * @param {Object} opts 상세옵션
    * @example Tweet.btn('', {});
    * @description 각종 트윗 소셜 버튼을 생성한다.
    */

    btn: function (text, opts) {

        text = text || '';
        opts = opts || {};

        var widget = 'https://platform.twitter.com/widgets.js';

        /**
        * @class Tweet.btn() 함수 옵션 스펙
        * @param {String} parent 버튼 컨테이너 엘리먼트
        * @param {String} type 버튼 타입("tweet"(트윗), "follow"(팔로우)(default: tweet))
        * @param {String} tweetBtnType 트윗 버튼 타입 "hash", "related"(다른 사람에게 트윗하기)(default: normal)
        * @param {String} url 공유 URL
        * @param {String} share 공유 트윗 아이디
        * @param {String} related 트윗 할 아이디
        * @param {String} lang 생성 버튼 언어(default: ko)
        * @param {String} countPos 공유 URL 카운트 포지션("none", "top", "right")(default: none)
        * @param {String} hashTag 해쉬 태그
        * @param {String} size 버튼 사이즈("medium", "large")(default: medium)
        * @param {Boolean} dnt dnt(do not track) 설정(default: true)
        * @param {String} className 사용자 스타일
        * @param {String} follow 팔로워 할 아이디
        * @param {Boolean} showCount 팔로워 카운트 노출 여부(default: false)
        * @param {Boolean} showScreenName 팔로워 할 사용자 노출 여부(default: true)
        * @param {String} align 버튼 정렬 ("left", "right")(default: "left")
        */

        var options = {
            parent: null,
            type: 'tweet',
            tweetBtnType: 'normal',
            url: '',
            share: '',
            related: '',
            lang: 'ko',
            countPos: 'none',
            countUrl: '',
            hashTag: '',
            size: 'medium',
            dnt: true,
            className: 'twitter-share-button',

            //follow type
  ...