● profile ● ログイン

　　　　
《イラスト●open●close》
tsukalogo0000

alt

Facebook“いいね”と“シェア”ボタン設置
ソーシャルメディア中でTwitterとfacebookは最低でも押さえておきたい。特に、Facebookは自分のウォールにメモ程度にチェックする“いいね”ボタンと自分のウォールと友達にもニュースフィールドで公開する“シェア”ボタンがあるのでその辺も考えてうまく連動したいもの。実は最近この2つは統合され表向きは全く同じ機能となる。しかし根本的な相違がある、つまり“いいね”ボタンを押しコメントを入れるとニュースフィールドにまで反映されるのが新しい機能なのだが、本来軽い気持ちでクリックしたいボタンのハズ。しかもコメントの誘導がやや不親切。
片や“シェア”ボタンはしっかり外部にポップアップが出るし、“いいね”は同じユーザーが複数ボタンが押せないのに対して“シェア”ボタンは何回でも押せるので、廃止されないのならば用途に応じては押す側も押される側も意外と使いやすいボタンなのでは？と思ってる。
little_shotaro's blog参考→http://www.littleshotaro.com/archives/291

 

■現在の“いいね”ボタン設置方法
まずfacebookにログインした状態でFacebook開発者 アプリに登録するなかなかこのアプリの登録や新しいアプリケーションの作成って良く解らない…
  • ①アプリケーションを作成→アプリ名を設定
  • ②左WebsiteメニューでサイトURL、とドメイン名を入れる
  • ③設定したアプリを開きアプリIDを控える
  • ③Like Button – Facebook開発者にて必要な情報を挿入
    ※左のメニューから様々なタイプが選択できる。
  • ④Get Like Button Codeではボタンのスクリプトのコード
  • ⑤Get Open Graph Tagsではメタ情報のタグが出る
  • ⑥それぞれを自分のサイトに挿入する
以上が大まかには以上の流れ

 

■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
上記サイトから管理画面経由でダウンロードした後、プラグインでContent - Facebook Like And Shareをクリック英語版なのでパラメータ設定が良く解らないが？

  • General Plugin Settingsで“いいえ”“シェア”ボタンの表示、非表示を行う
  • Select a language codeはボタンの言語だが、japaneseにしても日本語にはならず
  • Enable on Article view……一般記事に反映
  • Enable on FrontPage view……フロントページに反映
  • Enable on Section view ……セクションページに反映
  • Comments box colors　scheme……ボタンのバックカラー処理
  • Container ……なしからdivやpの定義付けができる
  • CSS style……細かい指定が可能
※いいね、シェアボタンもコメントボックスの設置も意味は同じ さらに細かい設定を拡張パラメータで行い、微調整は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 + '&amp;width=100&amp;layout=button_count&amp;show_faces=false&amp;
action=like&amp;colorscheme=light&amp;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なんかはもっと簡単だろう。

 

一般的なソーシャルボタンの設置は以下を参照に

ソーシャルボタン設置方法まとめ→http://design-spice.com/2011/08/09/social-button/

ソーシャルメディアに共有するボタンの設置方法→
http://creazy.net/2010/09/howto_setup_social_media_button.html#section_facebook

OGPの設定について→http://helmetz.net/webdesign/2011/11/facebookogp.html

OGPの活用術→http://blog.livedoor.jp/gx_socialmedia_lab/archives/2624886.html

※OGPとは簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のこと。

 

コメントを追加

お名前:
メールアドレス:
Webサイト:
件名:
コメント:
yvComment v.1.19.0
  • blog
  • webdesgin
  • golf
  • contact
Copylight TSUKA AllRights Reserved.