ブログにシェアボタン追加

posted in: Blosxom, web技術 | 0

ウェブサーフィンをしているとよく見かける「いいね」「シェア」のボタン。私も欲しくなってブログにつけてみました。公式サイトに詳しい方法が書かれているので簡単です。自分のサイトに下記コードを追記します。

[$url$path/$fn.html]の部分は設置したページ自身のアドレスでシェア先のアドレスですので、適宜変更下さい。

blosxomにおいてはstory.htmlの$bodyの下あたりに追記します。特に変更は不要だと思いますが、細かい設定変更については公式サイトを御参照下さい。

公式サイトはコチラ→ FacebookLineTwitter

story.html

<!--Facebook Shere-->
	<iframe src="https://www.facebook.com/plugins/share_button.php?href=$url$path/$fn.html&layout=button&size=small&width=69&height=20&appId" width="69" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
<!--Line Shere-->
	<div class="line-it-button" data-lang="ja" data-type="like" data-url="$url$path/$fn.html" data-share="true" style="display: none;"></div>
<script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
<!--Twitter Shere-->
	<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-url="$url$path/$fn.html" data-lang="ja" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

コメントを残す

メールアドレスが公開されることはありません。