A free bootstrap template, demonstrating a social share comment field.
It includes a standard textfield for the comment.
Additionally, it has a dropdown to allow sharing a comment via different media options.
<div class="container">
    <div class="row bodycolor">
        <br />
        <br />
        <div class="col-md-12">
            <div class="form-group">
                <div class="input-group">
                    <textarea name="InputMessage" id="InputMessage" class="form-control" placeholder="Enter Comment"></textarea>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                </div>
            </div>
        </div>
        <div class="col-md-12 text-center">
            <div class="btn-group">
                <a id="pt1" data-toggle="dropdown" class="btn btn-info allicon">
                    Share
                </a>
                <button id="pt2" data-toggle="dropdown" class="btn btn-info dropdown-toggle share allicon">
                    <span class="fa fa-share "></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a id="twitter" data-original-title="Twitter" href="#" data-placement="left">
                            <i class="fa fa-twitter allicon twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a id="facebook" data-original-title="Facebook" href="#" data-placement="left">
                            <i class="fa fa-facebook allicon facebook"></i>
                        </a>
                    </li>
                    <li>
                        <a id="google" data-original-title="Google+" href="#" data-placement="left">
                            <i class="fa fa-google-plus allicon google"></i>
                        </a>
                    </li>
                    <li>
                        <a id="linkedin" data-original-title="LinkedIn" href="#" data-placement="left">
                            <i class="fa fa-linkedin allicon linkedin"></i>
                        </a>
                    </li>
                    <li>
                        <a id="pinterest" data-original-title="Pinterest" data-placement="left">
                            <i class="fa fa-pinterest allicon pinterest"></i>
                        </a>
                    </li>                   
                </ul>
            </div>
        </div>
    </div>
</div>

<style>
    #pt1 {
        width:100px;
    }

    #pt2 {
        width:63px;
    }

    .twitter {
        color:#3399CC;
        padding-left:3px;
        padding-right:3px;
    }

    #twitter:hover {
        padding-left:0px;
        background-color:white;
        padding-right:0px;
        border-left:3px solid #3399CC;
        border-right:3px solid #3399CC;
    }

    .facebook {
        color:#3D5B96;
        padding-left:3px;
        padding-right:3px;
    }

    #facebook:hover {
        padding-left:0px;
        background-color:white;
        padding-right:0px;
        border-left:3px solid #3D5B96;
        border-right:3px solid #3D5B96;
    }

    .linkedin {
        color:#1884BB;
        padding-left:3px;
        padding-right:3px;
    }

    #linkedin:hover {
        padding-left:0px;
        background-color:white;
        padding-right:0px;
        border-left:3px solid #1884BB;
        border-right:3px solid #1884BB;
    }

    .pinterest {
        color:#CC1E2D;
        padding-left:3px;
        padding-right:3px;
    }

    #pinterest:hover {
        padding-left:0px;
        background-color:white;
        padding-right:0px;
        border-left:3px solid #CC1E2D;
        border-right:3px solid #CC1E2D;
    }

    .google {
        color:#DD3F34;
        padding-left:3px;
        padding-right:3px;
    }

    #google:hover {
        padding-left:0px;
        background-color:white;
        padding-right:0px;
        border-left:3px solid #DD3F34;
        border-right:3px solid #DD3F34;
    }

    .bodycolor {
        background-color: #F0EEEE;
        min-height: 347px;
    }

    .allicon {
        font-size: 27px;                
    }

    .dropdown-menu {
        width:163px;
    }
</style>
Was this template useful?