purazumakoiの[はてなブログ]

技術メモから最近はライフログも増えてきてます。

MovableTypeにSNSボタンを設置

デザインは自分でカスタムしたい!という要件のもと、調べたら以下のような実装でおちつきました

fbのogpタグ周りはこんな感じになりました。

<meta property="og:url"           content="<$mt:EntryPermalink$>" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="<$mt:EntryTitle$> | タイトル" />
<meta property="og:description"   content="<$mt:EntryExcerpt$>" />
<mt:If tag="CF_eyeCatch">
<meta property="og:image"         content="<mt:CF_eyeCatchAsset><mt:AssetURL></mt:CF_eyeCatchAsset>" />
</mt:If>

html部分はこんな感じになりました

<div class="snsArea">
                            <div class="snsInner">
                                <!-- facebook -->
                                <div id="fb-root"></div>
                                <script>(function(d, s, id) {
                                  var js, fjs = d.getElementsByTagName(s)[0];
                                  if (d.getElementById(id)) return;
                                  js = d.createElement(s); js.id = id;
                                  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.8";
                                  fjs.parentNode.insertBefore(js, fjs);
                                }(document, 'script', 'facebook-jssdk'));</script>
                                <div class="" data-href="<$mt:EntryPermalink$>" data-layout="box_count" data-size="large" data-mobile-iframe="true">
                                    <a class="btnBlack facebook" href="https://www.facebook.com/sharer/sharer.php?u=<$mt:EntryPermalink$>&src=sdkpreparse" onclick="window.open(this.href, 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;"><span>シェア</span></a>
                                </div>

                            </div>
                            <div class="snsInner">
                                <!-- twitter -->
                                <a class="btnBlack twitter" onclick="window.open(this.href, 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" href="https://twitter.com/share?url=<$mt:EntryPermalink$>&text=<$mt:EntryTitle$>"><span>ツイート</span></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>-->

                            </div>
                            <div class="snsInner">
                                <!-- line -->
                                <a href="http://line.me/R/msg/text/?<$mt:EntryTitle$>%0D%0A<$mt:EntryPermalink$>" class="btnBlack line" onclick="window.open(this.href, 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;"><span>LINEで送る</span></a>


                            </div>
                        </div>