2014年9月8日月曜日

【wordpress】Facebookのシェアが404エラーに

今月頭くらいに突然、facebookのシェアボタンからシェアした投稿のリンクが
404エラーになる現象が起こっていました。

同じ現象でお困りの方、解決作の一つとしてお試しください。


【症状】
  •  iPhone/iPad のfacebookアプリのみ起こる
  •  wordpressのパーマリンク設定は日本語URLにしていた
  •  シェアボタンはどのプラグインをつけても、直接URLを貼り付けても起こる


調査していくと、原因として、
「日本語URLにしていたため、URLが非常に長くなっていた」ことが原因のようです。


例えば、同じサイト内の固定ページ(URLは半角英数)をシェアしても
正常に表示されましたので。


自分の管理しているブログなら、その都度記事のパーマリンクを編集して
半角英数字に変えれば済むのですが、
クライアントが更新しているブログで、iPhoneアプリ(wordpress)から更新しています。
iPhoneアプリからはパーマリンクを変更できない!


そこで、「RSS Graffiti」を使うことにしました。




RSS Graffitiとは



ブログに投稿すると、自動でfacebookなどに投稿してくれる連携ツール。

その中の機能に、「Bit.ly」を使ってURLを短縮する機能があるのです。




以下の設定方法はfacebookアプリを設定できている状態からの説明です。

設定方法はコチラの記事など参考に


  1. Bit.lyのアカウントを取得します。


      https://bitly.com/




右上の赤文字「sign up for free.」をクリックしてアカウントを取得。





facebook・twitterアカウントでも使えます。


2. API keyを取得

 右上のアカウント名のところ、「setting」の中の一番下に 「API key」があるので
それをコピー。





3. 「RSS.Graffiti」アプリに 「API key」登録

facebookの「RSS.Graffiti」アプリ設定画面に戻り、右側の「TARGET」のfacebookページをクリック





「 bit.ly OPTION」タブを開き、「bit.ly ID(username)」と先ほどの「API key」を入力。



facebookとの連携を許可すると、完了です。






その後の投稿は短縮されたURLが表示され、
無事iPhoneやiPadでもエラーにならずシェアできます。



2014年9月6日土曜日

【jQuery】 BookBlock

本をめくるようなUIのjQuery


デモ
http://tympanus.net/Development/BookBlock/index.html



ダウンロード
http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/




※覚書

表示したい場所にdivで画像を囲む

<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item"><img class="alignnone size-full" src="/img1.jpg" alt="free1"  /></div>
<div class="bb-item"><img class="alignnone size-full" src="/img2.jpg" alt="free2"  /></div>
<div class="bb-item"><img class="alignnone size-full" src="/img3.jpg" alt="free3"  /></div>
</div>

<nav>
<a id="bb-nav-first" class="bb-custom-icon bb-custom-icon-first" href="#">First page</a>
<a id="bb-nav-prev" class="bb-custom-icon bb-custom-icon-arrow-left" href="#">Previous</a>
<a id="bb-nav-next" class="bb-custom-icon bb-custom-icon-arrow-right" href="#">Next</a>
<a id="bb-nav-last" class="bb-custom-icon bb-custom-icon-last" href="#">Last page</a></nav></div>


======


【コンソールエラー jquery is not defined が出た時の対処】

scriptファイルの読み込ませる順番を変えた。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/js/modernizr.custom.js"></script>
<script src="/js/jquerypp.custom.js"></script>
<script src="/js/jquery.bookblock.js"></script>