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



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



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

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



上のボタン左から

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/mt6/mt-tb.cgi/414



Check
一般社団法人ジャパンEコマースコンサルタント協会特別講師
Kindle出版のAmazon出品解説書です。
ECzine執筆記事一覧です。
Amazon出品ファイル作成代行
ブログ新着情報プログラム

ブログ記事リスト

IEが勝手に起動
消してしまった画像復元
Amazon検索で商品を表示
Amazonカテゴリー分類
Amazonで商品を見つけてもらう
iTunesアップデートのトラブル
ブログ新着情報ブログラム
Amazon編集ソフトを作成
Amazon出品ファイル作成代行
ボックス感あるデザイン
CSS作成ツール
無料のSTORES.jpに出店
源泉徴収税が免税になった!
はじめてのAmazon出品ガイド
サイトテーマの構造化マークアップ
パンくずリストの構造化マークアップ
Kindle書籍アメリカ免除申請
一太郎で作る電子書籍
Amazon 商品画像登録ガイドライン
Amazon 商品名登録ガイドライン
商品画像処理代行
ファイルコンテンツコピー
パソコンの熱暴走を防ぐ
ドライブボリューム容量変更ソフト
プロダクトキー確認ソフト
PPCキーワード作成ツール
日本語プログラミング「なでしこ」参考集
営業日カレンダー
適切なコストで既存客を守るには
LTV-Pro体験版(iPhone用)
FileMaker Go 12の活用
顧客ポートフォリオ・LTV解析ソフト
楽天市場ヤフーショッピング一括編集ソフト
Yahoo!夏の大リニューアール
MTの画像配置
TwitterとFacebookの相互連携
簡単!自動でYahoo!ショッピング商品掲載
Googleのホームページ作成支援
Google +1 の登録と設置方法
人の集まるところに仮想露店を出店
チェックインクーポン発行の実践
Facebookタブ追加方法完全公開
オリジナリィティのタブアイコン
個人輸入で稼げるってホント?
チェックインクーポンの作成方法
Facebookチェックインポイント登録
App登録なしでFacebookタブ追加
Amazon EC2にSSHを設定する方法