seesaaブログに投稿した記事をtwitterに自動投稿する方法

seesaaブログに投稿した記事をtwitterに自動投稿する方法ーその1

1.記事一覧から、twitterへ投稿したい記事を選ぶ。

seesaa1

2.中段の「ハッシュタグやコメント」の欄に表示させたい内容を入力する。公開設定が「公開」になっていることを確認し、記事を保存する。

seesaa2

3.twitterに自動投稿されます。

seesaa3

※黄色の矢印の欄には、本来画像が表示されるはずなのですが、何度やってもうまくいきません。OGP設定がうまく機能していないようです。

twitterに自動投稿するには、実は下準備が必要です。

Twitterの連携

まずはTwitterとの連携ね。事前に連携したいTwitterアカウントでログインしておきます。外部連携に「Twitterとの連携」と「Facebookとの連携」という項目があるので、まずは「Twitterの認証を行う」をクリック。

シーサーOGP-2

認証画面になるので「連携アプリを認証」をクリック。

シーサーOGP-3

するとシーサーブログに管理画面に戻るので、ブログの記事公開した時にTwitterでも公開するかどうかを選択します。

シーサーOGP-4

その下に「Twitterまとめ投稿」という項目がありますが、これは前日のTwitterでの投稿を自動で投稿する?という設定です。

シーサーOGP-5

「Twitterまとめ投稿」は私は利用した事がないので、「しない」を選択しています。

以上でTwitterの連携は完了。画面の一番下の「保存」をクリックして保存しておきます。

引用元:http://affiliate150.com/seesaa-ogp

twitterに自動投稿されるツイートに画像を表示させるには、下準備が必要です。

シーサーブログのOGP設定

さて、ようやく本題。シーサーブログの場合のOGPタグの設置とちょっと細かい部分を追加していく必要があるのでそれも設定していきます。

先ほどの連携と同様にシーサーブログの管理画面から「設定」⇒「外部連携」と進み、次の2つの設定をやっておきます。

  • 「OGPタグの追加」という項目で「追加する」にチェック
  • 「OGPの画像を設定」という部分の「ファイル選択」で画像を設定する

シーサーOGP-10

このOGPの画像というのは設定していない場合、FacebookやTwitterではシーサーブログのロゴ?が表示されます。こんな感じ。

シーサーブログOGP-4

この「OGPの画像を設定」で設定した画像というのは、トップページや画像のないページで表示される画像なのね。画像を設定してやるとこんな感じになります。

シーサーブログOGP-3

もちろんトップページ以外(個別記事)で画像を使っている場合にはそれが表示されるようになっています。とりあえず画像まで設定できたら一度画面下の「保存」をしておくと、先ほどの設定項目がこのように変化します。

シーサーOGP-11

一度画像をアップしてから「保存」するとこの項目に「常にこの画像を使用する」と「記事内に投稿した画像があればそれを使用する」という選択ができるようになっているので、ここはお好みで変更して再度「保存」。

一応これだけ設定しておくと基本的な部分はOKですが、念のためもうちょっと追加していきます。

htmlタグの書き換え

これは無くても機能はするのですが、念のために追加しておいた方が良さそうです。

Seesaaブログの場合は「旧システム」と「新デザインシステム」でやり方がちょっと違うのでそれぞれ説明します。旧と新で管理画面の画像も違うのでそれを見たらどちらかは判断できます。

旧デザインシステム(従来のシステム)の場合

旧デザインの場合は「デザイン」⇒「HTML」と進み、適応中のHTMLを選択。

シーサーOGP-17

旧デザインの方で初めてHTMLを編集する方はHTMLのを追加して名前を付けておいて下さい。

見出しタグ-3

「旧デザイン」の場合はHTMLの最初の方にこのような記述があります。

<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="ja"lang="ja">

これを次のように書き換え。

<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="ja"lang="ja"xmlns:og="http://ogp.me/ns#"xmlns:fb="http://www.facebook.com/2008/fbml">

こんな感じになります。

シーサーOGP-19

ここまでできたら一度「保存」しておきましょう。

新デザインシステムの場合

新デザインシステムの場合はSeesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」⇒「HTMLの編集」と進みます。

編集-1

「新デザインシステム」の場合はHTMLの最初の方に「head」という記述があります。

<head>

こいつを下記のように書き換えます。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

変更して保存したらOK。こんな感じになります。

編集-2

TwitterCards(Twitterカード)の認証

上記のTwitterとの連携でTwitterとの連携をした場合にはTwitterCardsの認証をやっておくのがおすすめです。

「TwitterCards」というのはTwitterで自分のブログのURLを投稿した時に「概要を表示」という項目を追加してブログ情報をリッチに表示してくれるやつです。

シーサーOGP-12

この「概要を表示」をクリックするとこんな感じに表示されます。

シーサーOGP-14

TwitterCardを利用する場合に必要なタグは先ほどのOGPタグの追加で既に追加されているので、後はTwitterでの認証。こちらに移動。
Card validator

ページに移動して今設定したブログのURLを入力し、「Preview Card」をクリック。

シーサーOGP-15

以前は「Request Approval」という申請ボタンがあったような気がしましたが今は見当たりません。とりあえず「自分のURL is whitelisted for summary card」と表示が出てくればOKです。

シーサーOGP-16

これでTwitterに自分のブログのURLをTwitterで投稿すると「概要を表示」が表示されるはず(ちょっと時間かかる場合もあるかも)。

引用元:http://affiliate150.com/seesaa-ogp

※この記事を参考に、何回も画像の表示にトライしているのですが、現在のところ、うまくいきません。記事内に画像がない場合には、うまく画像が表示されるのですが、記事内に画像がある場合には、うまくいきません。

seesaaブログに投稿した記事をtwitterに自動投稿する方法ーその2

seesaa4

2.

seesaa5

『<% article.subject %>』<% blog.title | cshorten(20) %>|<% article.short_page_url %>

シェアする

  • このエントリーをはてなブックマークに追加

フォローする