RSS Twitter Facebook

2012/08/08 (2012年08月 のアーカイブ)

ブログの各記事に重くないソーシャルボタンを設置する方法

シェア

元々各記事にTwitterとgoogle+とFacebookの公式のボタンを配置してたんですが、個別ページはいいとしてもインデックスページだとずらっと並んだ記事全部にボタンが付く事になり、それぞれJavascriptでごにょごにょやったりしているのでページを開くのがなんだか重くなるわけです。

て事ではずしてみたり付けてみたり、試行錯誤の結果、単純なリンクだけにすれば負荷がかからないかと思ってインデックスページの各記事に付いているソーシャルボタンを公式ボタンじゃないただのリンクにしてみたのでこれで少し様子を見ます。それぞれのソーシャルボタンのリンクは次のようになっています。

Twitter

TwitterにはWeb IntentsというAPIがあって、 

<a title="Post to Twitter" href="https://twitter.com/intent/tweet?text=記事のタイトル&url=記事のURL">
<img src="ボタンのイメージ"/>
</a>
というリンクで投稿画面を開けます。またこれは、 
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
というのを一度インクルードしておくと勝手にサブウインドウを開いてくれます。Twitterの他の機能を使うのなら、どうせインクルードする事になりますが、これをインクルードすると多少裏で何かが動く事になると思うので、それも不要なら他のソーシャルボタンと同様に onclick=".."を追加して、ボタンを押した時だけ自力でウインドウをポップアップさせても良いかも知れません。 MovableTypeのインデックステンプレートに入れるなら 

<a
 title="Post to Twitter"
 href="https://twitter.com/intent/tweet?text=<$MTEntryTitle encode_url="1"$>&url=<$MTEntryPermalink$>"
>
<img src="ボタンのイメージ"/>
</a>
という感じになります。

Facebook

Facebookの「シェアボタン」をリンクからポップアップさせる方法です。これは「いいね！」とは違ってコメント付きで投稿するボタンです。「いいね！」ボタンだと、どうしても自分が既に押しているかどうかのフィードバックが欲しくなるし、そうするためには公式ボタンを使わざるを得ないので、シェアボタンにしたのですが、実はこのボタンは公式には既にサポートされなくなっていて、今の所まだ動いているという状況です。その内動かなくなるかも知れません。 


<a
 title="Post to Facebook"
 href="http://www.facebook.com/sharer.php?u=記事のURL"
 onclick="window.open(this.href,'fbwin','width=650,height=400');return false"
>
<img src="ボタンのイメージ"/>
</a>

Google+

Google+のシェアボタンを単なるリンクにする場合です。Facebookのシェアボタンとほぼ同じ感じです。 

<a
 title="Post to Google+"
 href="https://plus.google.com/share?url=記事のURL" 
 onclick="window.open(this.href,'gpwin','width=650,height=400');return false"
>
<img src="ボタンのイメージ"/>
</a>

Posted by g200kg : 2012/08/08 14:40:23