付き合い等でSNS上の人間関係が複雑になってくると「言いたいことが言えない！」という場面に遭遇した方も多いかと思います。
そんな時に、別のSNSアカウントをつくろう！と思っても、「メールアドレスが足りない...」という時に使えるテクニックです。今回はTwitter（ツイッター）でアカウントを複数取ってみます。
linkラベル Twitter の投稿を表示しています。 すべての投稿を表示
BloggerをTwitterカードに対応させる際のtwitter:imageを正しく設定する
以前、BloggerをOGPに対応させる時に問題になる「og:image」をなんとかするという記事を書きました。
BloggerをOGPに対応させるときのog:imageをなんとかする
この問題を解決するには、Blogger側で使用できるデータタグの中に「og:image」に適切なものが存在しないので、外部サービスを立ち上げて対応しました。
BloggerSpice
このサービスを現在でも使っている方がたくさん居るみたいなので、嬉しいです。
動作内容としては、記事に使用されている一番最初の画像にリダイレクトする、という単純なものなのですが、これがないとBloggerでは、Twitterカードの「twitter:image」や、Facebookの「og:image」などに対応することが難しくなっているのが現状です。
しかし、このサービスにも少し問題がありました。
linkBloggerにTwitterでの反応を表示する Part.2
前回の記事「BloggerにTwitterでの反応を表示する」で、ブログの各記事に対するTwitter上でのつぶやきを表示する方法を書きました。しかし、前回の方法だとソースコードに直接記述しなければならないことと、カスタマイズし辛いという2点の問題がありました。
なので前回の記事で紹介したコードを、jQueryプラグイン方式にして、ソースを一部改良しました。
設置方法
まずjQueryのCoreファイルをロードするためのコードをテンプレートに追加します。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>次に、筆者が作成したjQueryプラグイン"Backtweet"をロードするためのコードを追加します。以下のファイルをダウンロードして保存し、WEBから参照可能な場所にアップロードしてください。
<script src="backtweet.js"></script>さらに、以下のプラグインの動作設定と、ツイートを表示するDL要素をテンプレートに追加します。
<script type='text/javascript'>$(function(){$.backtweet('#backtweet').load(document.URL);});</script>
<dl id='backtweet'/>最後に、CSSを追加します。以下のコードは最低限必要なコードですので、詳細な装飾は各自で施して下さい。
#backtweet dt{float:left;}注意点として、CSSのFloatを制御するコードである"clearfix"を利用しているので、必ずCSSに追加しておいてください。これを忘れるとレイアウトが著しく崩れる可能性があります。
生成されるコードの形式
<dl id="backtweet">
...
<dt>
<a href="TwitterAccountURL" target="_blank">
<img src="TwitterAccountIcon" alt="TwitterAccountScreenName" width="48" height="48"/>
</a>
</dt>
<dd class="clearfix">
<p class="backtweet-header">
<span class="backtweet-author">
<a href="TwitterAccountURL" target="_blank">TwitterAccountScreenName</a>
</span>
<span class="backtweet-info">TwitterAccountName, YY/mm/dd</span>
</p>
<p class="backtweet-content">Tweet</p>
</dd>
...
...
...
</dl>