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