MDwikiにソーシャルボタンを配置する方法


MDwikiのコンテンツ上部にFacebookボタン、Google+1ボタン、Twitterボタン、
はてなブックマークボタンなどのソーシャルボタンを配置する実験をしました。

MDwikiにはFacebookボタンやTwitterボタンを配置するギミックスがありますが、
すべてのページにそれらのギミックスを埋め込むのは面倒なので、
自動的にすべてのページで表示されるようなソーシャルボタンエリアを作ってみました。

mdwiki_socialbutton1

以前に書いた記事のMDwikiコンテンツエリアのカスタマイズで紹介した機能を使って
コンテンツ上部にFacebookボタン、Google+1ボタン、Twitterボタン、
はてなブックマークボタンなどのソーシャルボタンを配置する方法を紹介します。

ソーシャルボタンの配置方法

以下のようなsocialbuttonクラスを持ったdiv要素にソーシャルボタンを追加していきます。

以下のようにcontent_header関数の戻り値にソーシャル系のコードを連結していくことになります。

注意点はシングルコーテーションで各ソーシャルボタンのコードを連結するので
シングルコーテーションが含まれているコードはダブルコーテーションで置換する必要があります。
また、コードにscript文字列が含まれている場合は’scr’+’ipt’のように分解する必要があります。

Facebookボタンの配置方法

https://developers.facebook.com/docs/plugins/like-button

上記のサイトからFacebookボタンの埋め込みコードを生成してください。
埋め込みコードは2つに分かれています。

1つ目のコードはそのままbodyタグに追加します。

もう1つのコードはシングルコーテーションで囲って連結します

Google+1ボタンの配置方法

https://developers.google.com/+/web/+1button/?hl=ja

Google+1ボタンも2つに分かれています。

1つはbody終了タグの直前に追加

もう1つは配置したい場所にシングルコーテーションで囲って連結するだけです。
コメントは邪魔なので消しましょう。

Twitterボタンの配置方法

https://about.twitter.com/ja/resources/buttons

Twitterボタンが一番面倒です。

まず、シングルコーテーションをダブルコーテーションに置換します。
そのあとでscript文字列を分解してください。

置換前のコード

置換後のコード

はてなブックマークボタンの配置方法

http://b.hatena.ne.jp/guide/bbutton

はてなブックマークボタンはscript文字列を分割するだけでOKです。

ソーシャルボタンの配置を整える

mdwiki_socialbutton2

Facebookボタンがはみ出ていたり、お互いが近すぎたりするのを修正しましょう。

Facebookの埋め込みコードを見るとfb-likeというクラス名が付いているので、
そのクラス名でスタイルシートを書けば解決できます。

パーツの間隔が狭いところはスペース( )を追加しました。

mdwiki_socialbutton3

ソーシャルボタンの配置方法まとめ

Facebookボタン、Google+1ボタン、Twitterボタン、
はてなブックマークボタンをMDwikiへ追加することができました。
同様の方法で他のソーシャルボタンやブログパーツなどを配置することもできます。
色々な配置を試してご自身のMDwikiを作り上げてみてください。

ソーシャルボタンの配置例はこちらのWikiで確認してください。
MDwikiテストWiki

次回はMDwikiのSEOについて調べたいと思います。

スポンサードリンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です