API 備忘録 | メシのタネ

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

ソーシャルアイコン導入方 四角いボタン

 2013/03/29

singleページにイイネその他ボタンつけました。

facebookとはてぶは素直に、バルーンのソーシャルアイコンがあるんですが、
Twitterとgoogle+はありませんでした。グーグルはあんのかしら。

でも、僕がぱっと見た感じなかったんだ。

基本的に難しい事は無い。

本当なんて事は無い。ただタグを貼るだけ。しかも本当に単純なタグを貼付けるだけ。
設定値もなんかすんごい分かりやすいのでびっくりするほど簡単です。
貼りたい場所に、えいやってタグ貼付けるだけの簡単なお仕事です。
プラグイン使うよりも、自分でタグ貼った方が良い気がします。
以下タグ

facebookソーシャルアイコン

イイネボタンジェネレータ
FBはコード作ってこないとダメです。bodyの開始直後に貼る奴作ってから、下記のコードを貼りたいとこに貼ってください。


#data-href="" には自分とこのURL入れてください。記事毎にURL入れなきゃダメなアイコンもあります。
#とりあえず、今のURL取るタグ入れてあります。*Wordpress限定

#data-send falseにすると送信が消えます。
#data-layout 設定値三つくらいありますが、box_countにするとバルーンになります。他には横のバルーンとイイネボタンのみがあります。
#data-action  おすすめかライクボタンか
#data-colorscheme lightとdarkがあります。

<div class="fb-like" data-href="<?php echo the_permalink();?>" data-send="false" data-layout="box_count" data-width="150" data-show-faces="false" data-font="arial" data-colorscheme="light" data-action="recommend"></div>

twitterソーシャルアイコン


#とりあえずこの設定でバルーンになります。横型のもあります。
#data-via ユーザー名って書いてあるとこだけ@なんちゃらにしてください。

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="ユーザー名">ツイート</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

はてなぶっくまーくソーシャルアイコン


#最初のhrefとdata-hatena-bookmark-titleの設定値は現在のURLとタイトルにしてください。
#はてぶされるurlと記事のタイトルになります。
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="vertical-balloon" 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">

google+ソーシャルアイコン


#凄いシンプルです。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>

公式に行くと設定値とか呼び出し方色々書いてありますが、

特に読む気にもならず、これでいいやとコピペしました。

とりあえず設置はカンタン

上記のソースそのままはれば、多分動くと思われます。
FBのみ、なんかややこしいコードをBodyのどっかに貼らないとダメです。
僕は開始直後に貼ってます。でも多分どこでもいいとおもいます。


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

コメント

"ソーシャルアイコン導入方 四角いボタン"
でメシのタネのおすすめを検索したよ!

プログラミング備忘録 | メシのタネ