Facebook“いいね”と“シェア”ボタン設置ソーシャルメディア中でTwitterとfacebookは最低でも押さえておきたい。特に、Facebookは自分のウォールにメモ程度にチェックする“いいね”ボタンと自分のウォールと友達にもニュースフィールドで公開する“シェア”ボタンがあるのでその辺も考えてうまく連動したいもの。実は最近この2つは統合され表向きは全く同じ機能となる。しかし根本的な相違がある、つまり“いいね”ボタンを押しコメントを入れるとニュースフィールドにまで反映されるのが新しい機能なのだが、本来軽い気持ちでクリックしたいボタンのハズ。しかもコメントの誘導がやや不親切。
片や“シェア”ボタンはしっかり外部にポップアップが出るし、“いいね”は同じユーザーが複数ボタンが押せないのに対して“シェア”ボタンは何回でも押せるので、廃止されないのならば用途に応じては押す側も押される側も意外と使いやすいボタンなのでは?と思ってる。 ![]()
以上が大まかには以上の流れ
■joomla!プラグインでの設置方法
自分の場合、運営サイトがjoomla!になるので、plg_facebooklikeandshare_1.5_v3.7プラグインで作成する事に。 ●www.compago.it/software/41-compago-software/308-facebook-like-and-share-buttons-plugin-joomla-16.html
※いいね、シェアボタンもコメントボックスの設置も意味は同じ さらに細かい設定を拡張パラメータで行い、微調整はjoomla!のCSS設定で最終的に修正する。ただ、Facebookの“いいね”ボタンはコンテナーの中に隠れてしまって表示されるのと、“いいね”にコメントは必要ないと判断したのでこのプラグインは使用せずシェアのみ使う事に…“いいね”ボタンはスクラッチでカスタムHTMLのモジュールとして埋め込みTwitterのコードと共に並べて設置した。
![]() ![]() ■twitterとfacebook“いいね”ボタンのコード ●CMSなので表示されたページを自動取得するコードを書いている <table width="300" align="left" style=border="0" cellpadding="10"> <tbody> <tr> <td width="150"> <a href="https://twitter.com/share">ツイート</a> <script type="text/javascript">// <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){js=d.createElement(s);js. id=id;js.src="//platform.twitter.com/widgets.js" ;fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); // ]]></script> </td> <td width="100" align="left" > <script type="text/javascript"> var url = encodeURIComponent(location.href); document.write('<iframe src="http://www.facebook.com/plugins/like.php? href=' + url + '&width=100&layout=button_count&show_faces=false& action=like&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden;width:120px;height:23px; " allowTransparency="true"></iframe>'); </script> </td> </tr> </tbody> </table>この辺は管理的にはやや複雑になってしまったが、なるだけ全て横並びかつコンパクトにしたかったが為。又“いいね”ボタンのコメント表示がこのプラグインでは非表示に出来なかった。joomla!はこんな感じだが、MTや特に早くからブログパーツをぶら下げていたWordpressなんかはもっと簡単だろう。 一般的なソーシャルボタンの設置は以下を参照に
※OGPとは簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のこと。
|