Twitterとはてなブックマークのシェアボタン（共有）の表示方法についてです。
Twitterシェアボタン
Twitter Publish(公式ページ)の下の方にあるCode Copyというボタンを押すと、下のHTMLコードがコピーされるので、このコードを貼ればTwitterシェアボタンを表示できます。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Twitterシェアボタンを押すと、タイトルとリンク先URLのツイート画面が表示されます。
タイトルはtitleタグの中の文言で、リンク先URLはシェアボタンがあるページのURLです。
（ちなみに自分のローカル環境の場合、リンク先URLは表示されるけどリンクはされてなかった。パブリックのインターネットからだと存在しないURLだからね。）
また、aタグを少し変更すれば、ツイートするタイトルとリンク先URLも指定できます。
タイトルはdata-text属性、リンク先URLはdata-url属性で指定します。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="テストタイトル！" data-url="http://www.testhogemoge.net" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
この辺のちょっとしたカスタマイズは、下のサイトが参考になると思います。
・Twitterシェアボタンの設置方法とカスタマイズ
はてなブックマークボタン共有ボタン
はてなブックマークボタン（公式ページ）にサンプルのHTMLコードがあるので、これをコピペすればはてなブックマークのボタンを表示できます。
<a href="https://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-label-counter" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
はてぶボタンを押すと、タイトル名とURL（ドメイン名）の共有する画面が表示されます。
タイトル名は、meta property="og:title"タグの中の文言でした。試してないけど、このmetaタグがなかったら他の値が使用されるのかも。。
（ちなみに自分のローカル環境の場合、タイトル名は表示されなかった。）
Twitter・はてなブックマークボタンのシェアボタンのデザインをカスタマイズしたい場合
シェアボタンのデザインを色々とカスタマイズしたい場合、下のサイトが参考になりそうです（公式サイトにあるデフォルトデザインで満足してしまったので試してはないです）。
・コピペで簡単！はてなブログのSNSシェアボタンをカスタマイズ
参考サイト
・Facebook・Twitter・LINE・Pocket・はてブの公式シェアボタンリンクまとめ
・ソーシャルボタンまとめ