Pinterestはウィジェットを埋め込むとアイコンが勝手に純正のものに置き換わります

Pinterestはウィジェットを埋め込むとアイコンが勝手に純正のものに置き換わります

カスタマイズ SNS
2017/03/30
0
vanillaice (Akira)
vanillaice (Akira)
InstructionPinterestトラブル対処

Pinterest についてですー (´・ω・`)

Pinterest(ピンタレスト)は、ピンボード風の写真共有ウェブサイトでユーザーはイベント、興味のあること、趣味などテーマ別の画像コレクションを作成し管理することができる。また、他のピンボードを閲覧して自身のコレクションか「好み」の写真として画像を「リピン」することもできる。

Wikipedia

日本だとイマイチ盛り上がりに欠ける面もありますが、海外ではオサレでリッチなお姉さま方がたくさん利用しておりますです。あちらはブランド志向よりも一点ものを欲しがる方が多いんですよね。なのでこういった Pinterest のようなサイトで衝動買いをなさるわけです。にっぽんせれぶはまたちょっと違う。日本人はPinterestをビジネスモデルとして捉えている人が少なそう(笑)

簡単かつ日本的に言うと「気になるサイトをサムネイル画像のピン留めをして、いつでもリンクできるようにしておく」サイトです。

これは余談ですが「メイソンリー」というレイアウトがあるじゃないですか。Pinterestがそれを採用しているので急速に認知度が高まったってのがあるんでない (´・ω・`)
や、知らんけど。たぶん(笑)

Pinterestのページ

サイトはこんな感じです。
Pinterestのサイト紹介や利用のおすすめをするわけではないので、サイト特性などはこのぐらいにして。

SNSアイコンの統一

SNSシェアのアイコン類は見た目が整っていた方が美しいと思うんですよね。
なので純正のボタンは利用せずにこんなことをするわけなんです ↓

見た目は純正のそれとは変わりますが、機能はほぼ同じです。で、テンプレートには通常2種のSNSアイコンがあります。ひとつは「ユーザーのページへ誘導するためのもの」もうひとつは「クリックすることで シェア を行うもの」Pinterestの「Pin it」も広く言えば「シェア」です。本件は後者の「シェア」のためのアイコンに係る内容で、前者の単なるページ誘導は関係ありません。

Pinterestウィジェットの特徴

利用にあたっては他のサイトと似たような感じです。対象URLを入力し、必要なコードを記載します。

Pinterestは該当ウィジェットのコードと対で以下のスクリプトファイル(JSファイル)が必要です。

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

これはAPIですので必ず必要なんですね。
これを記載しないと表示されません。
そしてこれを記載してしまうと 強制的にボタンが純正のものに置き換わります

こうして勝手に変わってしまうんです。ちょっとー。要らん事すな

そこでどうするか

どうするかなー (´・ω・`) ←
いろいろね、考えたんですよ。いろいろと。ホントに(笑)

結論: 無理しない方が良いよね (▪⌔▪)

もちろん「見た目にはこだわりませーん。」という方はそれで良いんですよ。ちゃんと機能すればオッケー、って方はそれでそれこそオッケーハッピーよろぴくねーです。「揃ってないと困る、嫌だ。」という方は、…だからいろいろ考えたけどさー (´・ω・`)

方法① JSで対抗

このボタンの描画(html, CSSを含む)というのはPinterest公式がJSを用いてやってます。JS描画です。ですからhtml内容を直接操作することはできません。そこでさらにJSを用いて

  1. 描画させる位置を画面外に飛ばしておく (描画はPinterest側のAPIが行う)
  2. 描画が終わったらその内容を書き換え、正しい位置まで戻す

と、こういう流れになると思います。差し替える内容が「画像」であるならば特に問題にはなりません。アイコン画像に変更するならばウィジェットビルダーで最初からできます。問題なのは Font Awesome などの webアイコンに差し替えたいとき なのですが。これはもうアレよ。無理しない方が(笑)
JS描画 → 一旦消し(無理やり不可視) → 再度JS描画を加えて位置調整
こんなことやるとですね、ただでさえSNSシェアのアイコンってのは表示が遅いんです。各社のAPIに従ってやらないといけないもので。そこへさらにJS追加ってそりゃ厳しいよね (´・ω・`)

方法② 発想を転換

こちらオススメ(笑)
なにもwebアイコン並びに加えんでもいい (´・ω・`)
そもそもPinterestの Pin it の特徴は、画像を選んでピン留めをする ところにあるわけですよ。そして基本的な使い方って、ページ内に1箇所pinボタンがあって、それを押す じゃなくて 各画像の上、右肩やら左肩あたりにpinボタンが付いているという方が一般的なんです。そっちにシフトしたらええやん。ね? ←←←

画像マウスホバーで左肩にpinボタン

これは簡単です。

<script async defer data-pin-hover="true" data-pin-save="true" src="//assets.pinterest.com/js/pinit.js"></script>

緑の部分を追加するだけ。こうすると掲載画像全てがピン留め対象になります。こんな感じ ↓ (スクショ)

常に表示されているわけではないです。マウスが上に来た時だけ表示。テキストについては英語(save)に変更したり、テキストなしの円形アイコン表示にしたりできます。詳細はウィジェットビルダーと相談。

こうして方針を変更し、アイコン並びからはPinterestを外す。というのが一番のような気がします (´・ω・`)

● 全画像ならばランキングバナーなどはどうなるのか

四方が120pxに満たない画像に表示されることは無いようです。数値はちょっと怪しい。ちゃんと調べたわけじゃないので。ごめんなさい。

● 画像拡大のLightboxのようなスクリプトがある場合はどうなるのか

リンク部分はアイコン範囲だけで全画面リンクではありませんので、同時に利用可能。

● aタグで囲まれている場合はどうなるのか

上記と同じ理由で同時に利用可能。

まとめ

強引にやるよりも方向転換した方が良い場合もありますよ (´・ω・`)
めんどくさいから逃げたってのもありますよ。もちろん(笑)

というわけで、ウィジェット入れたらアイコンが!!!という方へは「それが仕様です。」したらば今から何したらいいの!!!という方へは「記事読んでね。」ということで締めくくりたいと思います ^^;

Related post

Comments  0