ヒノクニッキ

熊本生まれ熊本大好き、転勤族2児のママブログ

Pinterestのボードをはてなブログに表示させる方法


f:id:sayurice:20181015045211p:plain

Pinterestのウィジェットをはてなブログに埋め込む方法。どんなブログを見てもなかなか反映されなかったのですがやっとできまして...

同じように悩んでいる人がいるかもしれないので書いておきます!

こちらのピンタレストディベロッパーページのアドオン>ボードウィジェットに書いてありました。

Pinterest Developers

 

ツール>ウィジェットビルダーで埋め込みたいページを指定すると出てくるのがこちらのコード。

f:id:sayurice:20181015043838p:plain

これを何回やっても、他のブログでやっても、できなかった!

pinit.jsを</BODY>タグの直前に含める、とありますが、はてなブログの場合、設定>詳細設定>headに要素を追加部分に記載するとよいみたいです!

が、上記のscriptを貼っても、一向に反映されませんでした。

Pinterest Developers こちらのページに

始める前に、あなたのページにpinit.jsスクリプトが含まれていることを確認してください(そうしないとウィジェットは表示されません)。Pinterestウィジェットを何回使用しても(1回以上含むと予測できない結果を招くことがあります)、ページごとに1回だけこれを含めるようにしてください。サイトにJavaScriptを最適に組み込む方法についてはじめにを参照してください。

とあり、上記scriptとは別のコードが書いてありまして、そっちをheadに追加したら、できました!ウィジェットビルダーで表示されるコードと違った。これ↓をheadに追加して、

<script

    type="text/javascript"

    async defer

    src="//assets.pinterest.com/js/pinit.js"

></script>

 

以下の、< a >〜</a>のURL部分を埋め込みたいボードのリンクに変えて、HTML編集画面に貼ればOK!ウィジェットビルダーよりこっちの方が簡単!!

見たまま画面だと表示されないのですが、プレビューにすると表示されてます!謎。

<a href="https://www.pinterest.com/anapinskywalker/style/"

   data-pin-do="embedBoard"

   data-pin-board-width="400"

   data-pin-scale-height="320"

   data-pin-scale-width="100">

</a>

よく分からないけど無事できました。

ご参考まで。

こちらは私の癒しボードです