Skip to content

Instantly share code, notes, and snippets.

@marocchino

marocchino/jquery.socialbutton-1.9.0.coffee

Created August 15, 2012 08:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save marocchino/3357759 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save marocchino/3357759 to your computer and use it in GitHub Desktop.
Download ZIP
socialbutton coffee script version
Raw
jquery.socialbutton-1.9.0.coffee
###
jquery.socialbutton - jQuery plugin for social networking websites
http://itra.jp/jquery_socialbutton_plugin/
Copyright 2010, Itrans, Inc. http://itra.jp/
Dual licensed under the MIT or GPL Version 2 licenses.
http://jquery.org/license
Version: 1.9.0
###
###
SYNOPSIS
mixi_check
http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check
$('#mixi_check').socialbutton('mixi_check', {
key: 'mixi-check-key'
});
$('#mixi_check').socialbutton('mixi_check', {
key: 'mixi-check-key',
button: 'button-1',
url: 'http://itra.jp/'
});
mixi_like
http://developer.mixi.co.jp/connect/mixi_plugin/favorite_button/spec
$('#mixi_like').socialbutton('mixi_like', {
key: 'mixi-check-key',
});
$('#mixi_like').socialbutton('mixi_like', {
key: 'mixi-check-key',
url: 'http://itra.jp/',
width: 450,
height: 80,
show_faces: true,
style: 'additional-style-here'
});
facebook_like
http://developers.facebook.com/docs/reference/plugins/like
$('#facebook_like').socialbutton('facebook_like');
$('#facebook_like').socialbutton('facebook_like', {
button: 'standard', // synonym 'layout'
url: 'http://itra.jp',
show_faces: true,
width: 450,
height: 80,
action: 'like',
locale: 'en_US',
font: 'arial',
colorscheme: 'light'
});
facebook_share
http://developers.facebook.com/docs/share
$('#facebook_share').socialbutton('facebook_share');
$('#facebook_share').socialbutton('facebook_share', {
button: 'button_count', // synonym 'type'
url: 'http://itra.jp',
text: 'Share'
});
Twitter
http://twitter.com/goodies/tweetbutton
$('#twitter').socialbutton('twitter');
$('#twitter').socialbutton('twitter', {
button: 'vertical', // synonym 'count'
url: 'http://itra.jp/',
text: 'tweet text',
lang: 'ja',
via: 'ishiiyoshinori',
related: 'twitter'
});
GREE Social Feedback
http://developer.gree.co.jp/connect/plugins/sf
$('#gree_sf').socialbutton('gree_sf');
$('#gree_sf').socialbutton('gree_sf', {
button: 0, // synonym 'type'
url: 'http://itra.jp/',
width: 0, // auto
height: 20
});
Evernote Site Memory
http://www.evernote.com/about/developer/sitememory/
$('#evernote').socialbutton('evernote');
$('#evernote').socialbutton('evernote', {
button: 'article-clipper',
url: 'http://itra.jp/',
provider_name: 'itra.jp',
suggest_notebook: 'webclip',
content_id: 'element-id-to-clip',
code: 'your-affiliate-code',
title: 'note-title',
suggest_tags: 'comma-separated-tags,up-to-three-tags',
styling: 'full'
});
Hatena Bookmark
http://b.hatena.ne.jp/
$('#hatena').socialbutton('hatena');
$('#hatena').socialbutton('hatena', {
button: 'standard',
url: 'http://itra.jp/',
title: 'page-title'
});
Hatena Bookmark (Old Style)
http://b.hatena.ne.jp/
$('#hatena').socialbutton('hatena_oldstyle');
$('#hatena').socialbutton('hatena_oldstyle', {
button: '/path/to/your-icon.png',
url: 'http://itra.jp/',
padding: 10,
height: 15
});
Google +1 Button
http://www.google.com/webmasters/+1/button/
$('#google').socialbutton('google_plusone');
$('#google').socialbutton('google_plusone', {
button: 'standard', // synonym 'size'
url: 'http://itra.jp', // synonym 'href'
lang: 'ja',
parsetags: 'explicit',
callback: 'some_callback_function',
count: true
});
Pintarest Button
http://pinterest.com/about/goodies/
$('#pinterest').socialbutton('pintarest', {
button: 'horizontal', // or 'vertical', 'none'
url: 'http://itra.jp',
media: 'http://itra.jp/image.jpg',
description: 'This is an image.'
});
###
"use strict"
(($) ->
$.fn.socialbutton = (service, options={}) ->
defaults =
mixi_check:
key: ""
button: "button-1" # button-1,button-2,button-3,button-4,button-5
url: "" # document.URL
mixi_like:
key: ""
url: document.URL
width: 0 # auto
height: 0 # auto
show_faces: true
style: ""
sizes:
width:
with_faces: 450
without_faces: 140
height:
with_faces_minimum: 80
without_faces_minimum: 20
facebook_like:
button: "standard" # standard / button_count / box_count
url: document.URL
show_faces: true
width: 0 # auto
height: 0 # auto
width_standard_default: 450 # orig: 450
width_standard_minimum: 225
height_standard_without_photo: 35
height_standard_with_photo: 80
width_button_count_default: 120 # orig: 90, jp_min: 114
width_button_count_minimum: 90
height_button_count: 25 # orig:20, jp_min: 21
width_box_count_default: 80 # orig:55, jp_min: 75
width_box_count_minimum: 55
height_box_count: 70 # orig: 65, jp_min: 66
action: "like" # like / recommend
locale: "" # auto
font: ""
colorscheme: "light" # light / dark
facebook_share:
button: "button_count" # box_count / button / icon_link / icon
url: "" #document.URL
text: "" #Share
twitter:
button: "vertical" # vertical / horizontal / none
url: "" # document.URL
text: ""
lang: "ja" # ja / en / de / fr / es
via: ""
related: ""
gree_sf:
button: 0 # 0,1,2,3,4
url: document.URL
width: 0 # auto
height: 20
widths:
type0_16: 58
type0_20: 70
type0_23: 76
type1_16: 58
type1_20: 73
type1_23: 78
type2_16: 58
type2_20: 73
type2_23: 78
type3_16: 49
type3_20: 61
type3_23: 64
type4_16: 16
type4_22: 21
type4_32: 32
evernote:
button: "article-clipper" # article-clipper, article-clipper-remember, article-clipper-jp, article-clipper-rus, article-clipper-fr, article-clipper-es, article-clipper-de, article-clipper-vert, site-mem-32, site-mem-36, site-mem-22, site-mem-16
url: "" # document.URL
provider_name: "" # domain name
suggest_notebook: "" # notebook name
content_id: "" # element id for clip
code: "" # affiliate code
title: ""
suggest_tags: ""
styling: "" # none(text-only), full
hatena:
button: "standard" # standard, vertical, simple
url: document.URL
title: document.title
hatena_oldstyle:
button: "#{ document.location.protocol }//d.hatena.ne.jp/images/b_append.gif"
url: document.URL
height: 13
padding: 7
google_plusone:
button: "" # small, standard, medium, tall
url: ""
lang: "" # en-US
parsetags: "" # none(onload), explicit
callback: ""
count: true # true, false
pinterest:
button: "horizontal" # horizontal, vertical, none
url: document.URL
media: ""
description: ""
# common functions
merge_attributes = (attrs) ->
merged = for key, value of attrs when value?
" #{ key }=\"#{ value }\""
merged.join ""
merge_parameters = (params) ->
merged = for key, value of params when value?
"#{ key }=#{ value }"
merged.join "amp;"
htmlspecialchars = (string) ->
table = [
[/&/g, "&"]
[/</g, "&lt;"]
[/>/g, "&gt;"]
[/"/g, "&quot;"]
[/'/g, "&#039;"]
]
for pair in table
[ from, to ] = pair
string = string.replace(from, to)
string
url_encode_rfc3986 = (url) ->
encodeURIComponent(url).replace /[!*'()]/g, (p) ->
"%#{ p.charCodeAt(0).toString(16) }"
actions =
mixi_check: (target, options, defaults, index, max_index) ->
key = options.key ? defaults.key
button = options.button ? defaults.button
url = options.url ? defaults.url
unless key?
return
attr = merge_attributes(
"data-key": key
"data-url": htmlspecialchars(url)
"data-button": button
)
tag = """
<a href="http://mixi.jp/share.pl"
class="mixi-check-button"
#{ attr }>
Check
</a>
"""
$(target).html tag
if index is max_index
$("body").append """
<script
type="text/javascript"
src="#{ document.location.protocol }//static.mixi.jp/js/share.js"></script>
"""
mixi_like: (target, options, defaults, index, max_index) ->
key = options.key ? defaults.key
url = options.url ? defaults.url
width = options.width ? defaults.width
height = options.height ? defaults.height
show_faces = options.show_faces ? defaults.show_faces
style = options.style ? defaults.style
if key?
return
url = decodeURIComponent(url) if options.url
url = url_encode_rfc3986(url)
if width is 0
width = if show_faces
defaults.sizes.width.with_faces
else
defaults.sizes.width.without_faces
if height is 0
height = if show_faces
defaults.sizes.height.with_faces_minimum
else
defaults.sizes.height.without_faces_minimum
else if show_faces and height < defaults.sizes.height.with_faces_minimum
height = defaults.sizes.height.with_faces_minimum
else if not show_faces and height < defaults.sizes.height.without_faces_minimum
height = defaults.sizes.height.without_faces_minimum
params = merge_parameters(
href: url
service_key: key
width: width
show_faces: (if show_faces then "true" else "false")
)
attr = merge_attributes(
src: "http://plugins.mixi.jp/favorite.pl?#{ params }"
scrolling: "no"
frameborder: "0"
allowTransparency: "true"
style: "border:0; overflow:hidden; width:#{ width }px; height:#{ height }px; #{ style }"
)
tag = "<iframe#{ attr }></iframe>"
$(target).html tag
facebook_like: (target, options, defaults, index, max_index) ->
layout = options.layout ? options.button ? defaults.button
url = options.url ? defaults.url
show_faces = options.show_faces ? defaults.show_faces
width = options.width ? defaults.width
height = options.height ? defaults.height
action = options.action ? defaults.action
locale = options.locale ? defaults.locale
font = options.font ? defaults.font
colorscheme = options.colorscheme ? defaults.colorscheme
url = decodeURIComponent(url) if options.url
url = url_encode_rfc3986(url)
switch layout
when "standard"
if width is 0
width = defaults.width_standard_default
else if width < defaults.width_standard_minimum
width = defaults.width_standard_minimum
if height is 0
height = if show_faces
defaults.height_standard_with_photo
else
defaults.height_standard_without_photo
else if height < defaults.height_standard_without_photo
height = defaults.height_standard_without_photo
when "button_count"
if width is 0
width = defaults.width_button_count_default
else if width < defaults.width_button_count_minimum
width = defaults.width_button_count_minimum
if height is 0
height = defaults.height_button_count
else if height < defaults.height_button_count
height = defaults.height_button_count
when "box_count"
if width is 0
width = defaults.width_box_count_default
else if width < defaults.width_box_count_minimum
width = defaults.width_box_count_minimum
if height is 0
height = defaults.height_box_count
else if height < defaults.height_box_count
height = defaults.height_box_count
params = merge_parameters(
href: url
layout: layout
show_faces: (if show_faces then "true" else "false")
width: width
action: action
locale: locale
font: font
colorscheme: colorscheme
height: height
)
tag = """
<iframe
src="http://www.facebook.com/plugins/like.php?#{ params }"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:#{ width }px; height:#{ height }px;"
allowTransparency="true">
</iframe>
"""
$(target).html tag
facebook_share: (target, options, defaults, index, max_index) ->
type = options.type ? options.button ? defaults.button
url = options.url ? defaults.url
text = options.text ? defaults.text
attr = merge_attributes(
type: type
share_url: htmlspecialchars(url)
)
tag = """
<a name="fb_share"#{ attr }>#{ text }</a>
"""
if index is 0
tag += """
<script
type="text/javascript"
src="#{ document.location.protocol }//static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
"""
$(target).html tag
twitter: (target, options, defaults, index, max_index) ->
count = options.count ? options.button ? defaults.button
url = options.url ? defaults.url
text = options.text ? defaults.text
lang = options.lang ? defaults.lang
via = options.via ? defaults.via
related = options.related ? defaults.related
attr = merge_attributes(
"data-count": count
"data-url": htmlspecialchars(url)
"data-text": text
"data-lang": lang
"data-via": via
"data-related": related
)
tag = """
<a href="http://twitter.com/share"
class="twitter-share-button"#{ attr }>
Tweet
</a>
"""
$(target).html tag
if index is max_index
$("body").append """
<script
type="text/javascript"
src="#{ document.location.protocol }//platform.twitter.com/widgets.js"></script>
"""
gree_sf: (target, options, defaults, index, max_index) ->
type = options.type ? options.button ? defaults.button
url = options.url ? defaults.url
width = options.width ? defaults.width
height = options.height ? defaults.height
url = decodeURIComponent(url) if options.url
url = url_encode_rfc3986(url)
switch type
when 0, 1, 2, 3
height = 20 if height isnt 16 and height isnt 20 and height isnt 23
when 4
height = 22 if height isnt 16 and height isnt 22 and height isnt 32
else
type = 0
width = 0
height = 20
width = defaults.widths["type#{ type }_" + height] if width is 0
params = merge_parameters(
url: url
type: String(type)
height: height
)
tag = """
<iframe
src="http://share.gree.jp/share?#{ params }"
scrolling="no"
frameborder="0"
marginwidth="0"
marginheight="0"
style="border:none; overflow:hidden; width:#{ width }px; height:#{ height }px;"
allowTransparency="true"></iframe>
"""
$(target).html tag
evernote: (target, options, defaults, index, max_index) ->
button = options.button ? defaults.button
url = options.url ? defaults.url
provider_name = options.provider_name ? defaults.provider_name
suggest_notebook = options.suggest_notebook ? defaults.suggest_notebook
content_id = options.content_id ? defaults.content_id
code = options.code ? defaults.code
title = options.title ? defaults.title
suggest_tags = options.suggest_tags ? defaults.suggest_tags
styling = options.styling ? defaults.styling
button_list =[
"article-clipper"
"article-clipper-remember"
"article-clipper-jp"
"article-clipper-rus"
"article-clipper-fr"
"article-clipper-es"
"article-clipper-de"
"article-clipper-vert"
"site-mem-32"
"site-mem-36"
"site-mem-22"
"site-mem-16"
]
if button in button_list
button_url = "#{ document.location.protocol }//static.evernote.com/#{ button }.png"
clipoptions =
url: url
providerName: provider_name
suggestNotebook: suggest_notebook
contentId: content_id
code: code
title: title
suggestTags: suggest_tags
styling: styling
if index is 0
$("body").append """
<script type="text/javascript"
src="#{ document.location.protocol }//static.evernote.com/noteit.js"></script>
"""
tag = $(document.createElement("a")).attr(href: "#").click(->
Evernote.doClip clipoptions if Evernote
false
).append """
<img src="#{ button_url }"
alt="Clip to Evernote"
style="border: none" />
"""
$(target).html tag
hatena: (target, options, defaults, index, max_index) ->
layout = options.layout ? options.button ? defaults.button
url = options.url ? defaults.url
title = options.title ? defaults.title
url = htmlspecialchars(url)
title = htmlspecialchars(title)
attr = merge_attributes(
href: "http://b.hatena.ne.jp/entry/#{ url }"
class: "hatena-bookmark-button"
"data-hatena-bookmark-title": title
"data-hatena-bookmark-layout": layout
title: "このエントリーをはてなブックマークに追加"
)
tag = """
<a#{ attr }>
<img
src="#{ document.location.protocol }//b.st-hatena.com/images/entry-button/button-only.gif"
alt="このエントリーをはてなブックマークに追加"
width="20" height="20" style="border: none;" /></a>
<script type="text/javascript"
src="#{ document.location.protocol }//b.st-hatena.com/js/bookmark_button.js"
charset="utf-8" async="async"></script>
"""
$(target).html tag
hatena_oldstyle: (target, options, defaults, index, max_index) ->
button = options.button ? defaults.button
url = options.url ? defaults.url
height = options.height ? defaults.height
padding = options.padding ? defaults.padding
url = htmlspecialchars(url)
tag = """
<span style="font-size: #{ height }px; line-height: 100%; ">
<span style="padding-right: #{ padding }px">
<a href="http://b.hatena.ne.jp/entry/add/#{ url }"
target="_blank">
<img src="#{ button }"
style="border: none; vertical-align: text-bottom" />
</a>
</span>
<a href="http://b.hatena.ne.jp/entry/#{ url }"
target="_blank">
<img src="#{ document.location.protocol }//b.hatena.ne.jp/entry/image/#{ url }"
style="border: none; vertical-align: text-bottom" />
</a>
</span>
"""
$(target).html tag
google_plusone: (target, options, defaults, index, max_index) ->
return if $.browser.msie and parseInt($.browser.version, 10) < 8
size = options.size ? options.button ? defaults.button
href = options.href ? options.url ? defaults.url
lang = options.lang ? defaults.lang
parsetags = options.parsetags ? defaults.parsetags
callback = options.callback ? defaults.callback
count = options.count ? defaults.count
switch size
when "small", "standard", "medium", "tall"
count = true
else
size = "standard"
count = true
tag = $("<div>").attr(
"data-callback": callback
"data-count": (if count then "true" else "false")
"data-href": href
"data-size": size
).addClass("g-plusone")
$(target).append tag
if index is max_index
script_params = ""
if lang?
script_params += "lang: \"#{ htmlspecialchars(lang) }\""
unless parsetags is ""
script_params += (if script_params isnt "" then "," else "")
script_params += "parsetags: \"#{ htmlspecialchars(parsetags) }\""
script_params = "{#{ script_params }}" unless script_params is ""
if not gapi?.plusone?
$("body").append """
<script type="text/javascript"
src="https://apis.google.com/js/plusone.js">
#{ script_params }
</script>
"""
else
gapi.plusone.go()
pinterest: (target, options, defaults, index, max_index) ->
url = options.url ? defaults.url
button = options.button ? defaults.button
media = options.media ? defaults.media
description = options.description ? defaults.description
url = url_encode_rfc3986(decodeURIComponent(url))
media = url_encode_rfc3986(decodeURIComponent(media))
description = decodeURIComponent(description)
params = merge_parameters(
url: url
media: media
description: description
)
tag = """
<a href="http://pinterest.com/pin/create/button/?#{ params }"
class="pin-it-button" count-layout="#{ button }">
<img border="0"
src="//assets.pinterest.com/images/PinExt.png"
title="Pin It" />
</a>
"""
$(target).html tag
if index is max_index
$("body").append """
<script type="text/javascript"
src="//assets.pinterest.com/js/pinit.js"></script>
"""
max_index = @size() - 1
@each (index) ->
actions[service]?(this, options, defaults[service], index, max_index)
true
) jQuery
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment