ブログにSNSのシェアボタンを設置【PluXml】

投稿者:footfoot 投稿日: コメント:コメントなし

pluxmlにソーシャルボタンを追加

PluXmlのプラグインでソーシャルボタンを付けようと思ったんですが、良いのが無かったので汎用のコードで実装してみました。

Pluxopolis(公式)のプラグインの「MySocialButtons」はアイコンがちょっと古くて何か使いづらかったし、非公式の「plxMySocialNetwork」は複雑すぎてダメ。

他のブログとか見てみるとシェア数をカウントする機能があったりしますが、そんな高度なものじゃなくただ記事のシェアや自分のアカウントをリンクするボタンの実装です。


▼トップページの右上と記事の最後にあるコレを追加しました。


参考元: HTML Share Buttons

コードはsimplesharebuttons.comを参考に、PluXmlの独自タグに変えたり見た目を多少いじりました。

記事ページに設置するシェア用コード

CSS

.sns-button-art {
    text-align:center;
}
.sns-button-art img {
    width: 3rem;
    border: 0;
}
.sns-button-art img:hover {
    opacity: 0.6; 
}

画像のwidthはremで指定してますが%のほうがいいかも。固定幅ならpx指定でOK。

HTML(article.phpなどへ記述)

<div class="sns-button-art">
    <!-- Facebook -->
    <a href="http://www.facebook.com/sharer.php?u=<?php $plxShow->artUrl() ?>" target="_blank">
        <img src="./data/medias/facebook.png" alt="Facebook" />
    </a>
    <!-- Google+ -->
    <a href="https://plus.google.com/share?url=<?php $plxShow->artUrl() ?>" target="_blank">
        <img src="./data/medias/google.png" alt="Google" />
    </a>
    <!-- Twitter -->
    <a href="https://twitter.com/share?url=<?php $plxShow->artUrl() ?>&amp;text=<?php $plxShow->artTitle(); ?>" target="_blank">
        <img src="./data/medias/twitter.png" alt="Twitter" />
    </a>
</div>

基本は参考元の通りですが、FacebookGoogle+Twitterのみにしたのと、記事URLと記事タイトルの部分をPluXmlの独自タグに変更。

SNSのアイコン画像はsimplesharebuttons.comにあるものを使わせてもらいました。下の方にリンクがあってZIPでまとめてダウンロードできます。自分のブログのメディアにアップロードして使いました。

アカウントのリンク用コード

CSS

.sns-button-top {
    text-align:right;
}
.sns-button-top img {
    width: 2.5rem;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    border: 0;
    opacity: 0.6; 
}
.sns-button-top img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1; 
}

HTML(header.phpなどへ記述)

<div class="sns-button-top">
    <a href="https://www.facebook.com/あなたのアカウント/" target="_blank">
        <img src="./data/medias/facebook.png" alt="Facebook" />
    </a>
    <a href="https://plus.google.com/あなたのURL" target="_blank">
        <img src="./data/medias/google.png" alt="Google" />
    </a>
    <a href="https://twitter.com/あなたのユーザー名" target="_blank">
        <img src="./data/medias/twitter.png" alt="Twitter" />
    </a>
</div>

よく見るブログのヘッダーあたりにあるSNSアイコンは、単なる自分のアカウントのリンクですね。

アイコン画像は記事と同じものを使ってます。トップページのほうは目立たないようにCSSで色をグレースケール(モノクロ)にして不透明度も下げました。imgのホバーで元の色と透明度にすればいい感じかなと。

おわりに

最低限のシェアボタンにはなってるとは思うけど、あれなんですよね。SNSは全く使わないので動作確認がちゃんとできないんだよね。特にFacebookは難易度高い・・

Twitterぐらいは初めてみようかな。

カテゴリ : ウェブ, PluXml

コメントを書く

3番目のアルファベットを入力してください zalkte?