WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

アイキャッチ画像も一緒にツイートできるTwitterとWordPressを連携するプラグイン「NextScripts: Social Networks Auto-Poster(SNAP)」

この記事は約7分46秒で読めます

WordPress SNS連携 プラグイン SNAP
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

WordPressで記事を投稿したら
自動でツイッターにつぶやいてくれるプラグインないかな~

って探すとけっこうたくさんあります。

WP to Twitter」とか有名なツイッター連携プラグインですよね。

ただ、アイキャッチ画像も一緒に添付してつぶやいてくれるプラグインとなると
なかなか見つからないです。

NextScripts: Social Networks Auto-Poster」を導入するまでは手動でやっていました
(画像も一緒に載せたかったので)

普通に投稿する分には手間はそうかからないんですが・・・

予約投稿したいときは同時にはつぶやけないですよね(笑)

自動投稿してくれると
フォロワーに最新記事の通知ができるますし、
ツイッターから新たにブログを見に来てくれる人がいるかもしれませんよね。

また、やっぱり大きいのがアイキャッチ画像が一緒に表示されている
ってことです。

かわいい女の子やおいしそうなスイーツなどが載せてあったら見たいと思いませんか?

アイキャッチ画像を設定していると
それだけであなたの記事を見てくれる人が増えます。

今回はツイッターとワードプレスを連携させるプラグインの導入方法を紹介します。

NextScripts: Social Networks Auto-Poster(SNAP)プラグインのインストール方法

WordPressの管理画面から検索してインストールします。もしくは、WordPress.org からダウンロードして、そのままアップロードしてインストールします。

WordPress管理画面 プラグイン 新規追加 NextScripts: Social Networks Auto-Poster(SNAP)」で検索

NextScripts: Social Networks Auto-Poster(SNAP)の設定

設定 {SNAP} Social Networks Auto Poster

「Settings」タブの設定

NextScripts: Social Networks Auto-Poster Settings

How to make auto-posts?[投稿方法]

NextScripts: Social Networks Auto-Poster How to make auto-posts?
  • Publish Immediately
  • Use WP Cron to SChedule autoposts

「Use WP Cron to Schedule autoposts」

1日に投稿する記事が多いサイトは
「Limit autoposting speed」にチェックを入れてください。

→ デフォルトのままでOK

User Privileges/Security[ユーザー権限/セキュリティ]

NextScripts: Social Networks Auto-Poster User Privileges/Security

デフォルトでは管理人のみSNAPが使用できます。

複数人でブログを管理する場合はSNAPが使える権限を設定してください。

「Skip User Security Verification」にチェックを入れると
どのユーザーでもSNAPが使用できます。

→ デフォルトのままでOK

Include/Exclude WordPress Pages and Custom Post Types[固定ページ/カスタム投稿タイプ 含めるか]

NextScripts: Social Networks Auto-Poster Include/Exclude WordPress Pages and Custom Post Types

「Use for WordPress Pages」にチェックを入れると
固定ページを公開したときにも自動投稿されます。

カスタム投稿タイプでも
SNAPを使用する場合はチェックをいれてください。

→ デフォルトのままでOK

Categories to Include/Exclude:[カテゴリ 含めるか]

NextScripts: Social Networks Auto-Poster Categories to Include/Exclude:

含めるカテゴリと含めないカテゴリを決めます。
含めるものにはチェックを付けます。

デフォルトでは全てチェックされています。
カスタムタクソノミーは対象に出来ません。

→ デフォルトのままでOK

URL Shortener[短縮リンク]

NextScripts: Social Networks Auto-Poster URL Shortener

Twitterでは自動的に短縮リンクを作られるので
設定は不要です。

→ デフォルトのままでOK

Auto-Import comments from Social Networks[SNSコメント取得]

NextScripts: Social Networks Auto-Poster Auto-Import comments from Social Networks

SNSに投稿されたコメントを取得して投稿に含めるか

「Enable “Comments Import”」にチェックを入れると有効になります。
「How many posts should be tracked:」の値は10~20を推奨します。
あまりに多く設定するとウェブサイトが重くなるようです。

※この辺りの挙動はよくわかってないので試しに有効にしています。
※ツイッターにはコメント機能はないので、意味なし?

→ デフォルトのままでOK

Additional URL Parameters[バックリンク設定]

NextScripts: Social Networks Auto-Poster Additional URL Parameters

どのリンクからアクセスしたか解析するために
パラメータを追加します。

→ デフォルトのままでOK

Auto-HashTags Settings[ハッシュタグ設定]

NextScripts: Social Networks Auto-Poster Auto-HashTags Settings

ハイフン、アンダーバーをハッシュタグに切り替えるかの設定です。

→ デフォルトのままでOK

%ANNOUNCE% tag settings[アナウンスタグの設定]

NextScripts: Social Networks Auto-Poster %ANNOUNCE% tag settings

アナウンス用タグの設定です。

<!--more-->
moreタグが見つからないときは何文字表示しますか?
という設定になります。

アナウンスタグを使うときは文字数を指定してください。

ツイッターと連携する際は文字数制限ありますので、
アナウンスタグは使わないと思います。

→ デフォルトのままでOK

“Open Graph” Tags[OGPタグ設定]

NextScripts: Social Networks Auto-Poster "Open Graph" Tags

OGP用タグの設定です。

Open Graph Protocol(オープン・グラフ・プロトコル)は、
SNS(とは言っても主にFacebook)で、シェアしたときに画像や説明文を表示させる設定のことです。

詳しく紹介されているサイトがありました。
→ これだけは知っておきたいOGP (Open Graph Protocol)

→ デフォルトのままでOK

Advanced “Featured” Image Settings[画像ない場合の設定]

NextScripts: Social Networks Auto-Poster Advanced "Featured" Image Settings

画像表示で画像が無い場合の代替画像の設定です。

→ デフォルトのままでOK

Alternative “Featured Image” location[デフォルト画像設定]

NextScripts: Social Networks Auto-Poster Alternative "Featured Image" location

SNAPプラグインはデフォルトでアイキャッチ画像を表示しています。

アイキャッチではなく、
カスタム・フィールドを使って画像を表示している場合に設定します。

→ デフォルトのままでOK

Debug/Report Settings[デバッグレポート設定]

NextScripts: Social Networks Auto-Poster Debug/Report Settings

デバッグやレポートの結果表示の設定を行います。

デバッグレベルは
「Minimal」「Normal」「Extended/Debug」
から選べます。

「Send Email notification for errors」にチェックを入れてメールアドレスを入力すると
エラー発生時にメールが送信されます。

→ デフォルトのままでOK

Your Social Networks Accounts[自動投稿用のSNSアカウント設定]

ソーシャルネットワークのアカウントとWordPressを連携するために
自動投稿するTwitterのアカウントを追加します。

[Your Social Networks Accounts]タブの「Add new account」をクリックしてください。

NextScripts: Social Networks Auto-Poster Add new account

ソーシャルネットワークとWordPressを連携する設定を行います。

Your Social Networks Accounts Add new account

Add New Networkで「Twitter」を選択してください。

連携したいツイッターのURL, API Key, API Secret, Access Token, Access Token Secret
を入力します。

Your Social Networks Accounts Add new account

API Keyなどの取得方法はDetailed Twitter ~リンク先に書かれています。

API Key取得方法については
私の方でも下の方に記載したのでよければ参考にしてください。

Developersでアプリを作成する

Twitter Developers へ自動投稿したいツイッターアカウントでログインします。

Twitter Apps-Create New Apps.

NextScripts: Social Networks Auto-Poster

「Create New App」をクリックします。

Twitter Apps-Create an application

Twitter Developers Create an application

「Name」:アプリの名前
「Description」:アプリの説明
「Website」:ウェブサイトのURL
「Callback URL」ウェブサイトのURLでOK

Twitter Apps-Developer Rules of the Road

Twitter Developers Developer Rules of the Road

下の方に、規約と同意するかの確認になりますので
問題なければチェックを入れて「Create your Twitter application」をクリックすることで
新しいアプリが作成されます。

複数のブログと1つのツイッターアカウントを連携したい場合は
また新しくアプリを作ると複数のブログと連携できます。

Twitter Apps-Permissions(パーミッション設定)

Twitter Developers Developer Permissions

アプリの名前が本当に適当な名前になっていますが・・・
日本語も入力可能です。

「Permissions」タブを選択して
「Read and Write」を選択します。

アプリからツイッターに書き込みできる権限を付けています。

「Update settings」をクリックして設定を更新してください。

Twitter Apps-API Keys

Twitter Developers Developer API Keys

次に「API Keys」タブを開いて下さい

ここで表示されている
「API Key」と「API secret」を使用します。

「Access Token」と「Access Token Secret」は手動で作成する必要があります。
「Create my access token」からトークンが生成されます。

Twitter Apps-Refresh

Twitter Developers Refresh

トークンを生成したら「Refresh」をクリックするか
「F5」キーなどでブラウザを更新してください。

Your access token

SNAP_25_01

Your access tokenの「Access token」「Access token secret」をコピーしてください

Your Social Networks Accounts[自動投稿用のSNSアカウント設定]

Twitter Developers Twitter

こんな感じにAPI Keyなどをコピペします。

「Attach Image to Twitter Post」
「Message text Format」

の入力で自動ツイートのデフォルト設定を指定します。
(記事ごとに個別に変更可能です)

%TITLE% – 記事タイトル
%URL% – 記事URL
%SURL% – 記事URL(ショート)
%IMG% – アイキャッチ画像
%EXCERPT% – 記事の抜粋
%RAWEXCERPT% – 記事の抜粋(入力)
%ANNOUNCE% – <!–more> まで
%FULLTEXT% – 記事全文
%RAWTEXT% – 記事全文(入力)
%TAGS% – タグ
%CATS% – カテゴリ
%HTAGS% – ハッシュタグとしてタグを挿入
%HCATS% – ハッシュタグとしてカテゴリを挿入
%AUTHORNAME% – 著者名
%SITENAME% – サイト名

Submit Test Post to Twitter

Twitter Developers Twitter

きちんと設定されているかの確認でテスト投稿してみます。
「Submit Test Post to Twitter」ボタンからテスト投稿してみてください。

テスト投稿の確認

Twitter Developers Twitter starlod_sample

ツイッターにこのようなツイートがあれば設定完了です!

確認できたらテスト投稿は削除してください。

あとはアイキャッチを設定した記事を作成して
投稿・予約投稿を試してみてください。

備考・その他

長くなりましたが
非常に便利なプラグインなので、頑張って設定してくださいね

ツイッター以外にもFacebookなど連携できるサービスもたくさんあります。
機会があったら紹介したいと思います。

連携できるSNSサービス一覧

  • App.net
  • Blogger
  • deviantART
  • Diigo
  • Delicious
  • Facebook
  • FriendFeed
  • Flickr
  • Flipboard
  • Google+
  • instapaper
  • Kippt
  • Linkedin
  • Livejournai
  • Plurk
  • Pinterrest
  • Scoop.it
  • SETT
  • StumbleUpon
  • Tumbir
  • Twitter
  • vBulletin
  • vKontakte(VK)
  • WP Based Blog
  • YouTube

参考サイト

関連記事

  1. 記事タイトルで指定した文字を超えた場合「・・・」と表示する
  2. WordPress 下書き プレビュー 真っ白
  3. 管理者 ファビコン Favicon
  4. MacBookのキーボードを占拠してるオス猫(スコティッシュフォールド)
  5. Feedly_Eyecatch
  6. 木漏れ陽と光

PR

カテゴリー