いろいろなソーシャルプラグインが出まわる中、Linkedin（リンクトイン）のシェアボタンがついてるアメブロってあまり見かけないなぁ・・・ってことで、つけちゃいました。
Linkedinは日本語サービスも開始され、日本のビジネス業界にじわじわと広まりつつあります。
当面はTwitter、Facebook、Google+を抑えておけば流行に乗り遅れることはないと思います(笑)
さて、やり方についてですが・・・
新スキン対応バージョンと旧スキンバージョンと両方記載しますね。
お間違えのないように。
まずは、いつものようにjqueryの呼び出しです。
これがないと、記事の下にボタンを持っていくことが出来ないんですよね。
既に同じような記述があるなら必要ありません。
下記をフリープラグインに記載します。
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.3.2");</script>
ちなみに、type="text/javascript"というのは無くても動作するので削ってあります。
文字数を極力減らしたい方は試してみてください。
次に、Linkedinのシェアボタン配布サイトに行って、ソースをもらってくるわけですが、まぁ特にいらないので割愛します。欲しい方は下記でもらえます。
https://developer.linkedin.com/plugins/share-button
ボタンのタイプは３つ選択出来るわけですが、Vertical（カウンターが上に出るタイプ）、Horizontal（カウンターが横に出るタイプ）、No Count（カウンターは表示されない）というのがあります。
今回はHorizontalタイプを使用しました。
では、ソースの方ですが・・・
まずは新スキンの方から。
<script>
$(function(){
var c=location.href;
var a=$(".skinArticleHeader2 a");
for(i=0;i<a.length;i++){
var c=a[i];
var h='<sc'+'ript src="http://platform.linkedin.com/in.js" type="text/javascript"></sc'+'ript><sc'+'ript type="IN/Share" data-url="'+c+'" data-counter="right"></sc'+'ript>';
$(".articleLinkArea").eq(i).before(" <span>"+h+"</span>");
}
});
</script>
次に旧スキンの方です。
<script>
$(function(){
var c=location.href;
var a=$(".foot a:contains('記事URL')");
for(i=0;i<a.length;i++){
var c=a[i];
var k='<sc'+'ript src="http://platform.linkedin.com/in.js" type="text/javascript"></sc'+'ript><sc'+'ript type="IN/Share" data-url="'+c+'" data-counter="right"></sc'+'ript>';
$("div.foot").eq(i).before(" <span>"+k+"</span>");
}
});
</script>
とこんな感じになります。
カウンタータイプをVerticalにしたい場合は、data-counter="right"となっているところを、data-counter="top"に変更すればOKです。No Countにしたい場合は、ごっそりその部分を取っちゃってください。
無事表示されましたでしょうか？
このボタンを付けたい！などご要望がありましたら、コメント欄にてお寄せくださいね。
このブログの更新情報をFacebookで購読できます。
↓↓
ブログ読者登録はこちらです。
↓↓
