トップ > Social Network



各メディア「いいね!」ボタン設置方法



ソーシャルメディアの「いいね!」ボタンや「ツイート」ボタンが、
最近、いろいろなサイトで目立つようになりました。

ソーシャルメディアの各サービスが、「いいね!」 などの共有ボタンをリリースしていますので、細かくカスタマイズするのであれば、各ソーシャルメディアシュアサイトを参考に設置すればいいと思います。簡単に済ませたいという方にご紹介です。



上のボタン左から

1.はてなブックマークエントリー
2.Twitter ツイートボタン
3.Facebook いいね!ボタン
4.GREE いいね!ボタン
5.mixi チェックボタン
6.Google +1 ボタン

ですが、このボタンデザインとボスト内容や動作(当サイト記事最後にあるボタンを
実際に押して確認してみてください)でよければ、以下の設置タグを参考にしてみてください。



【はてなブックマークエントリー】

<a href="http://b.hatena.ne.jp/entry/★ページの絶対url★" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>


【Twitter ツイートボタン】

<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="★Twitterアカウント★">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>


【Facebook いいね!ボタン】

<iframe src="http://www.facebook.com/plugins/like.php?href=★ページの絶対url★&layout=button_count&show_faces=true&width=70&action=like&font=verdana&colorscheme=light&height=60" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:20px;" allowTransparency="true"></iframe>


【GREE いいね!ボタン】

<iframe src="http://share.gree.jp/share?url=★ページの絶対url★&type=0&height=20" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="border:none; overflow:hidden; width:70px; height:20px;" allowTransparency="true"></iframe>


【mixi チェックボタン】

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="★自分のチェックキー★">Check</a><script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>


【Google +1 ボタン】

<g:plusone size="medium"></g:plusone>



★ページの絶対url★
★Twitterアカウント★
★自分のチェックキー★

は書き替えてください。

<mixi のチェッカーキー取得の手順>
1.Developer登録画面から登録。
2.mixi Developer Dashboard からチェックキーの発行を行ないます。
3.トップメニューのタブ「mixi Plugin」をクリック。
4.左メニューから「新規サービス追加」をクリック。
5.必要な情報を入力して登録。
6.チェックキーが発行されるのでそれを使ってコードを生成。
7.コードを上の★自分のチェックキー★に書き替える。

<Google +1 ボタンの/javascript 設置>

次のタグを head 要素内または body 終了タグの直前に貼り付けてください。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'ja'} </script>




Movable Type の場合

【はてなブックマークエントリー】

<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>


【Twitter ツイートボタン】

<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="★Twitterアカウント★">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>


【Facebook いいね!ボタン】

<iframe src="http://www.facebook.com/plugins/like.php?href=<$MTEntryPermalink encode_url="1"$>&layout=button_count&show_faces=true&width=70&action=like&font=verdana&colorscheme=light&height=60" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:20px;" allowTransparency="true"></iframe>


【GREE いいね!ボタン】

<iframe src="http://share.gree.jp/share?url=<$MTEntryPermalink encode_url="1"$>&type=0&height=20" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="border:none; overflow:hidden; width:70px; height:20px;" allowTransparency="true"></iframe>


【mixi チェックボタン】

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="★自分のチェックキー★">Check</a> <script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>


【Google +1 ボタン】

<g:plusone size="medium"></g:plusone>




Twitterなどのツィートボタンなどは、
ページタイトルと短縮url をscriptで書き替えてくれますので便利です。


いかがですか?

参考になったと思う方は、以下の「いいね!」ボタン、
「ツィート」ボタンを是非クリックしてみてください。



このエントリーをはてなブックマークに追加



Check

トラックバック(0)

トラックバックURL: http://www.nauinet.co.jp/mt5/mt-tb.cgi/414

コメントする



Check

ブログ記事リスト

TwitterとFacebookの相互連携
簡単!自動でYahoo!ショッピング商品掲載
Googleのホームページ作成支援
Google +1 の登録と設置方法
人の集まるところに仮想露店を出店
チェックインクーポン発行の実践
Facebookタブ追加方法完全公開
オリジナリィティのタブアイコン
個人輸入で稼げるってホント?
チェックインクーポンの作成方法
Facebookチェックインポイント登録
App登録なしでFacebookタブ追加
Amazon EC2にSSHを設定する方法
Amazon EC2を日本語にする方法
Amazon EC2を固定IPアドレスで利用
Amazon EC2の起動設定方法
Amazon EC2 AWSアカウント開設
iPhoneでFileMaker Goを利用する
static_iframeでファンだけに表示
Facebookページのタブ表示順
Movable Type 5.11は?
アプリiwipaでFacebookページ作成
アプリ iwipaの追加方法
アプリiwipaの編集方法
Facebook 開発者登録
iPhoneアプリ開発の世界を覗く
iPhoneアプリ開発者向けサービス
SIMロックフリーiPhoneを使う
遠隔操作TeamViewerを試してみる
OGP設定「いいね!」ボタンを設置
各メディア「いいね!」ボタン設置方法
Twitterで売上UPを目指す!
Twitter が有効
タイトル文字数制限
記事に地図を表示
お買物が楽しいサイト
インタレストマッチ開始
公式サイトで勉強
初期画面の設定
管理画面の活用
品質インデックスを上げる
集客数を増やす
検索連動型広告
リンク切れの対応
リンクを追わせない方法
ブログはSEOに強い
被リンク元のIPアドレス
robots.txt でsaitemap通知