Skip to content

Instantly share code, notes, and snippets.

@tomoyamkung

tomoyamkung/embed.html

Created July 12, 2013 07:28
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomoyamkung/5982579 to your computer and use it in GitHub Desktop.
Save tomoyamkung/5982579 to your computer and use it in GitHub Desktop.
Download ZIP
[JavaScript]jQuery.socialbutton プラグインを自分のブログに組み込むときに作成したスクリプト。
Raw
embed.html
<!-- ボタンを設置したい場所に次を埋め込む -->
<ul id="social_buttons">
<li class="tweet"></li> <!-- twitter -->
<li class="evernote"></li> <!-- Evernote -->
<li class="facebook_like"></li> <!-- Facebook -->
<li class="hatena"></li> <!-- はてなブックマーク -->
<li > <!-- Pocket -->
<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
</li>
</ul>
<div class="clear_left" />
Raw
script.js
/* jQuery.socialbutton プラグインとのインタフェース */
<script>
$(function() {
$('.evernote').socialbutton('evernote', {
button: "http://static.evernote.com/article-clipper-jp.png",
styling: 'full'
});
$('.hatena').socialbutton('hatena');
$('.tweet').socialbutton('twitter', {
button: 'horizontal',
});
$('.google_plusone').socialbutton('google_plusone',{
size: 'medium'
});
$('.facebook_like').socialbutton('facebook_like', {
button: 'button_count',
width: '100'
});
});
</script>
Raw
socialbutton.css
/* jQuery.socialbutton 用の CSS */
ul#social_buttons {
margin: 0;
padding: 0;
list-style-type: none;
}
ul#social_buttons li {
float: left;
margin-right: 5px;
padding: 2px;
width: 100px;
text-align: center;
}
.clear_left {
clear: left
}
@tomoyamkung
Copy link
Author

jQuery と jquery.socialbuttonプラグイン本体のダウンロードは以下から。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment