HANT blog

リアルタイム動画アンケートサービスHANTのブログ

Pocketのソーシャルボタンの画像をカスタマイズした話。

Rebeltのフロントエンドエンジニアの山本です。 HANTのフロントエンドもちょろちょろ触ってます。

7/15にHANTのアップデートをリリースしました。

今回のアップデートの主な内容は

  • 管理画面のスマートフォン対応
  • プロモーションページのソーシャルボタンの挙動を改修
  • プロモーションページの文言を変更

などになります。

Pocketのソーシャルボタンは画像がそのままなことが多い。

HANTではソーシャルボタンの画像をカスタマイズして使いたかったので、 各ソーシャルボタンのドキュメントを眺めていたのですが、 Pocketのソーシャルボタンの画像カスタマイズ方法は載ってないのです。

https://getpocket.com/publisher/button

そういえばPocketのソーシャルボタンはオフィシャルなものをそのまま使っているところしか見たことなかったなと思ったり。

さらに調べるとページ内で複数のPocketのソーシャルボタンを設置するときのコードがあり、

<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
  data-save-url="http://yourDomain.com/the/page/to/save.html"
  data-pocket-count="vertical" 
  data-pocket-align="left">Pocket</a>
<script type="text/javascript">...

これを使えないかとdata-*属性値こねくってたのですが、満足な結果が得られず...。

f:id:HANT-official:20160715201433p:plain

このページしか飛べませんでした。

素直に推奨コードを貼ってみる

Pocketが推奨するコードをそのまま貼るとaタグが以下のようなiframeを含んだタグに置き換わります。

<div class="pocket-btn">
    <iframe width="66" height="22" id="pocket-button-0" frameborder="0" allowtransparency="true" scrolling="NO"
    src="https://widgets.getpocket.com/v1/button?label=pocket&amp;count=none&amp;v=1&amp;url=http%3A%2F%2F192.168.223.222%3A3333%2F&amp;title=&amp;src=http%3A%2F%2F192.168.223.222%3A3333%2F&amp;r=0.8446543344055901"></iframe></div>

iframeのsrcはクエリストリングを含んでいます。 そこで先ほどのURLを手入力する必要があったURLに同じクエリストリングを含めると

f:id:HANT-official:20160715201441p:plain

動きました。 さらにコードを整理して、最終的にはこうなりました。

<a href="https://getpocket.com/save?url=https%3A%2F%2Fhant.io%2F" target="_blank">pocket</a>

これでPocketに追加するのに問題ありません。 Pocketのボタンをカスタマイズしたいときは使ってください!

スタートしたばっかりのHANTをよろしくおねがいします!