スタッフブログ

  • 最新配信
  • RSS

Facebookいいね!などのソーシャルボタン設定を簡単に行う

mik : XOOPS » プリロード 2012/9/10 15:03

Blogger's Avatar

Facebookのいいねを始め、twitterやgoogle+のソーシャルボタンを自動的に設定できるプリロードを suinさん が発表しました。大変便利だと思いますのでご紹介します。

ソーシャルボタン全部入りプリロード
https://github.com/suin/xoopscube-preloads/tree/master/TotalSocialButtons


ダウンロードする

上記のページにある

TotalSocialButtons.class.php

という文字リンクをクリックしてページを移動します。

そして「Raw」ボタンを右クリック(Windowsの場合)して「名前を付けてリンク先を保存」でPCにファイルを保存します。






プリロードファイルを設置する

保存したファイルを使いたいXOOPSのルート直下にある preload フォルダに置きます。

theme.htmlを修正する


利用中のthemeフォルダにあるtheme.htmlを修正します。修正箇所は2カ所あります。

1.ボタンを挿入

theme.htmlでソーシャルボタンを挿入したい箇所に

<{xoops_explaceholder control="TotalSocialButton"}>

と書きます


2.ソーシャルボタンに関連するjavascriptを挿入

順番が大事なのでかならず theme.html の の直前に下記のタグを書きます。

<{xoops_explaceholder control="TotalSocialButton.JavaScript"}> </body>


Facebookボタン、twitterボタン、google+を設置する例


全部のボタンを出すのではなく、いくつかのボタンを出す例を書きます。

まずFacebookボタンを使うには開発者登録をしてAPPキーを作成する必要があります。簡単にできますので、

https://github.com/suin/xoopscube-preloads/tree/master/TotalSocialButtons

を参照して、キーを取得してください。

使いたいボタンだけを

<{xoops_explaceholder control="TotalSocialButton" use="facebook-like twitter google-plus" fb_app_id="ここには取得したキーをいれます"}>

のように指定します。すると、以下のように選んだキーだけが表示されるようになります。

↓これは画像となります。このページのいいねボタンはこのページのずっと下の方にあります!よろしければポチッとお願いします♪

トラックバック

スタッフブログ最新
カテゴリ一覧

〒104-0061 東京都中央区銀座1丁目3番3号 G1ビル7階
お問い合わせ TEL 03-3524-8860

Copyright(c) 2012 RYUS.All Rights Reserved.