CREARC

Designer's Blog

0

先日の記事でも取り上げていた「名刺管理のEightが記事の「シェアボタン」を提供開始!さっそく取り付けにかかってみる。」ですが、その続報記事になります。このブログへの設置審査が通ったとの連絡をメールで頂いたので、さっそく設置してみました。このブログはシェアボタンをブログデザインにあわせていることもあり、今回はWordPressを使ったEight独自のボタンデザインを設定する方法をご紹介します。

届いた設置案内メール

設置の申請を出してから1週間くらいかかるんだろうなと思ったら意外とすぐに承認のメールが届いたのは驚きです。届いたメールにはそれぞれの媒体専用IDの案内も含まれます。「設置対象となるメディアは、ビジネスネットワークとしてのEightの特性を踏まえ、ビジネスに役立つ情報を配信しているメディアに限定しており、実装には事前に発行されたメディアごとの専用IDが必要となります。」との一文があったんだけども・・・ようするにこのブログもビジネスに役立つ情報を配信してるということで認められたのでしょうか・・・。嬉しい限りです!(涙)
eight

シェアボタンの実装方法

設置にはスクリプトの読み込みが必要となります。直下に、以下のscriptタグを埋め込みます。専用ID部分には、メールに記載のある、媒体専用IDを入力します。

<script>
(function(d, s, id) {
   var js, ojs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s);
   js.id = id;
   js.src = "https://8card.net/plugins/javascripts/plugins.js?application_id=専用ID";
   ojs.parentNode.insertBefore(js, ojs);
}(document, 'script', 'eight-plugin-js'));
</script>

シェアボタンのデザイン

既に用意されているシェアボタンを利用することもできますが、デザイン的に他のシェアボタンと合わないので他のシェアボタン同様のデザインにしてsvgで書き出し。
eight_logo

独自のボタンデザインを設定する方法

今回は独自シェアボタンの画像を利用するので、指定された以下のコードを利用してカスタマイズすることに。

※指定のIDはメール内に記載のある専用IDとなります。

まずはsvgで登録した画像を呼び出すことに。

<img src="<?php bloginfo('template_url'); ?>/img/eightlogo.svg" alt="eight" align="left" >

さらにこの画像にボタンをクリックしたときにシェア対象のURLを記事のパーマリンクで呼び出します。

<a href="https://8card.net/posts/links/new?application_id=専用ID&url=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?/>/img/eightlogo.png" alt="eight" align="left" ></a>

ボタンの動作確認

このコードを設置したい部分へ投入!あとは実際にきちんとシェアできるかどうか確認です。設置したボタンをクリックすると、その記事が呼び出されてシェアできるようになりました。

eight

以上、Eightの記事シェアボタンの設置方法のご紹介でした。



コメントはこちら

TOPへ戻る