>>妊娠中にぜひ応募しときたい☆プレママ向け無料プレゼントまとめ

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

当ページのリンクには広告が含まれています。
  • URLをコピーしました!

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>

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

ご参考まで。

 

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次