Your SlideShare is downloading. ×
0
Bloggerへのソーシャルプラグイン導入方法について
Bloggerへのソーシャルプラグイン導入方法について
Bloggerへのソーシャルプラグイン導入方法について
Bloggerへのソーシャルプラグイン導入方法について
Bloggerへのソーシャルプラグイン導入方法について
Bloggerへのソーシャルプラグイン導入方法について
Bloggerへのソーシャルプラグイン導入方法について
Bloggerへのソーシャルプラグイン導入方法について
Bloggerへのソーシャルプラグイン導入方法について
Bloggerへのソーシャルプラグイン導入方法について
Bloggerへのソーシャルプラグイン導入方法について
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Bloggerへのソーシャルプラグイン導入方法について

6,792

Published on

Bloggerへのソーシャルプラグイン導入方法についてまとめました。こちらも参照 http://rkanbe.blogspot.com/2011/02/googleblogger.html

Bloggerへのソーシャルプラグイン導入方法についてまとめました。こちらも参照 http://rkanbe.blogspot.com/2011/02/googleblogger.html

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
6,792
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. @RKANBE HTTP://RKANBE.BLOGSPOT.COM/ Blogger へのソーシャルプラグイン導入方法について
  • 2. Bloggern にソーシャルプラグインを設置するときの問題点 <ul><li>1. Blogger にはガジェットベースでブログパーツを追加できるのに、 WP Social Bookmarking Light のようなセンスのいいガジェットがない!(これさえあればよかったのにねー)。 2.各種ソーシャルプラグインでは、デフォルトでは URL 自動検出のものが多く、プラグインに URL を渡す方法がまちまち!(おかげで探すのに手間取った) 3.さらに Google のデザインテンプレートを編集するときならではのローカルルールがあり、そのままソーシャルプラグインを設置させてくれない!(ひどい意地悪だ) </li></ul>
  • 3. Blogger に外部ブログパーツを貼るときの注意点 <ul><li>変数中の & や”は &amp; や &quot; に変換しないとデザインテンプレートの書き換え時にエラーになる </li></ul><ul><li> (これは、まあ理解出来る範囲) </li></ul><ul><li>MT でいう Permalink(Permanent Link) などを指定する変数は data:post.url なのだが、これを変換してほしいときは、 a href を a expr:href と書き換えなければいけない(なんだそりゃ!) </li></ul><ul><li>さらに、 JavaScript 的に変数を際だたせるために、 <a href=&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url’> といった変数部分以外の保護も必要 </li></ul><ul><li>以上を踏まえれば、ほかのブログパーツも設置可能? </li></ul>
  • 4. どこに書けばいいの? <ul><li>まず「デザイン」「 HTML の編集」で、「ウィジェットのテンプレートを展開」のチェックボックスを入る。 </li></ul><ul><li><div class=‘post-body entry-content’> <data:post.body/> となっているあたりを探し、その直後に挿入していく。 </li></ul><ul><li>(小ネタ)まずここで <br/> をいくつかいれておくと、ガジェットまでのマージンが稼げます。 </li></ul>
  • 5. Twitter ツイート+ツイート数表示ボタン <ul><li>https://twitter.com/goodies/tweetbutton から URL タブを選び、 data-via 属性を取得した状態からカスタマイズ。 </li></ul><ul><li>下記の赤文字部分が Blogger 用に変更が必要な部分。 </li></ul><ul><li>このブログパーツは他のパーツと横に並べる事ができる </li></ul><ul><li><a class='twitter-share-button' data-count='horizontal' data-lang='ja' data-via='rkanbe' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </li></ul>
  • 6. GREE Social Feedback <ul><li>http://developer.gree.co.jp/connect/plugins/sf の下の方にジェネレーターがある。 </li></ul><ul><li>下記の赤文字部分が Blogger 用に変更が必要な部分。 </li></ul><ul><li>このブログパーツは他のパーツと横に並べる事ができる </li></ul><ul><li><iframe allowTransparency='true' expr: src=' &quot; http://share.gree.jp/share?url= &quot; + data:post.url + &quot;&amp; type=0 &amp; height=20 &quot; ' frameborder='0' marginheight='0' marginwidth='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px;'/> </li></ul>
  • 7. 新はてブボタン+はてブ数表示 <ul><li>http://b.hatena.ne.jp/guide/bbutton のものをカスタマイズ </li></ul><ul><li>下記の赤文字部分が Blogger 用に変更が必要な部分。 </li></ul><ul><li>このブログパーツは他のパーツと横に並べる事ができる </li></ul><ul><li><a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr: href=' &quot; http://b.hatena.ne.jp/entry/ &quot; + data:post.url ' title=' このエントリーをはてなブックマークに追加 '><img alt=' このエントリーをはてなブックマークに追加 ' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/> </li></ul>
  • 8. Facebook 「いいね!」ボタン <ul><li>これまで同様にすればに難しくないが、 & などの エンティティ文字が多いので注意 。また、これは他のウィジェットでも同じだが、個別の URL を入れておかないと、トップページでは個別ページに「いいね!」できなくなる。 </li></ul><ul><li>下記の赤文字部分が Blogger 用に変更が必要な部分。 </li></ul><ul><li>リッチにするためあえて顔アイコンを表示させているが、その分横幅があり、あまり横には並べやすくない </li></ul><ul><li><iframe allowTransparency='true' expr: src='&quot;http://www.facebook.com/plugins/like.php?href =&quot; + data:post.url + &quot;&amp; layout=standard &amp; show_faces=true &amp; width=100 &amp; action=like &amp; font=arial &amp; colorscheme=light &quot; ' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:60px;'/> </li></ul>
  • 9. mixi プラグイン <ul><li>一番めんどくさい。 https://sap.mixi.jp/home.pl にパスワード入力してアクセスし、 mixi Plugin タブで、「新サービス追加」を選び、貼りつけ先の URL などを入力したのち、さらに識別キーも取得する必要がある。ちなみに Facebook のものとフォーマットが類似している。 </li></ul><ul><li>下記の赤文字部分が Blogger 用に変更が必要な部分。 </li></ul><ul><li>なお、青文字部分は mixi から取得する必要のある識別キー。 </li></ul><ul><li>リッチにするためあえて顔アイコンを表示させているが、その分横幅があり、あまり横には並べやすくない </li></ul><ul><li><iframe allowTransparency=‘true’ expr: src=‘ &quot; http://plugins.mixi.jp/favorite.pl?href= &quot; + data:post.url + &quot;&amp; service_key= XXXXXXXXXXXXXXXXXXXXXXXXXXXX &amp; show_faces=true&amp;width=450 &quot; ' frameborder='0' scrolling='no' style='overflow:hidden; border:0; width:450px; height:60px'/> </li></ul>
  • 10. まとめ <ul><li>せっかくガジェット機構があるのに、こうして手動でやらないといけないのがナンセンス。オープンソースである WordPress とのコミュニティの層の厚さの違いが出てしまっていると思う </li></ul><ul><li>Google のサービスだからといって、外部のソーシャルプラグイン( Twitter 、 Facebook など)に関するガジェットの提供が送れるようなら、それは Google の弱点であるような気がする </li></ul><ul><li>MT とかもこのへんはめんどくさそう。でもソーシャルプラグイン&フィードバック系は、すべて標準装備にしてもいいような気がしている。 </li></ul>
  • 11. 参考資料 <ul><li>ソーシャルメディアに共有するボタンの設置方法( Twitter 、 facebook 、 mixi 、 GREE 、 Evernote ) [C!] http://creazy.net/2010/09/howto_setup_social_media_button.html </li></ul><ul><li>HiroHirori's Document: Blogger に mixi Plugin ( mixi チェック・ mixi イイネ!ボタン)を設定する方法 http://bule030427.blogspot.com/2011/01/bloggermixi-pluginmiximixi.html </li></ul><ul><li>Journey2Past: Like ボタンを Blogger の個別ページに設置する http://journey2past.blogspot.com/2010/05/likeblogger.html </li></ul><ul><li>Blogger に、はてブボタンとはてブユーザ数を実装する方法 : e-Agency EC の味方・見方 http://ec-blog.e-agency.co.jp/2010/01/blogger.html </li></ul>

×