I used something like this then I added an id for each and added some custom css to get them into their final position.
<div class="coffee-span-2 column-1 coffee-749-span-3 coffee-390-span-4">
<ul class="social-media social-2" id="facebook"><!-- myname facebook start like button--->
<div class="fb-like" data-href="http://mydomain.com/" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
<!-- myname facebook end like button--->
</ul>
<ul id="twitter"><!-- my twitter follow button--->
<a href="https://twitter.com/myname" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @myname</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'

/platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- myname twitter end follow button--->
</ul>
</div>