ゲームズ

Steamウィジェットの埋込方法!うまくいかない時にチェックするポイントはココ☝

投稿日:2018-05-20 更新日:

どうも、田中です。

よくSteamで購入してゲームをしているんですが、おすすめのゲームなんかはクリアしたあとに紹介の記事を書いたりしています。
リンクや画像だけで紹介するのも良いんですが、YouTube動画のようにブログに埋め込んで紹介する方法もSteamには用意されています。

今回はその方法を解説します!

 

 

ブログ埋め込みのための準備

ブログに埋め込むにはYouTubeと同様に、埋め込むためのコードが必要になります。
コードを取得する方法は大きく2つです。

1つ目はブラウザのSteamからコードを作成する。

2つ目はデスクトップアプリのSteamからコードを作成する。

まぁ、ほとんど同じですね

 

埋め込みコードの作成方法

まずは以下のように紹介したいゲームのストアページに移動します。

ストアページを下の方にスクロールしていくと埋め込みボタンがあります。

このボタンをポチッとすると

このようにブログへの埋め込みコードを作成するためのポップアップが表示されます。

このポップアップのウィジェットの作成を押すと

このようにブログに埋め込んだ際の表示確認とブログに設定するコードが表示されます。
何が書いてあるかよくわからないコードをWordPressなり、自分が使っているブログに貼り付けるとコードの上のような表示なります。

ちなみに今回作ったコードだとこんな感じになります↓

 

埋め込みコードのカスタマイズ

埋め込みコードを作る時にカスタマイズできる箇所があります。たった一つですが
それはゲーム紹介のメッセージです。

埋め込みコード作成時に以下のような画面が出ることを説明しました。

上記の画像で適用にメッセージを書いていますが、ココがカスタマイズポイント!
このメッセージは作品ごとにデフォルトのものが準備されていますが、オリジナリティあふれる文章に編集することも可能なんです。

上記でメッセージを編集すると

上の赤枠とコードに反映されます。
編集後のメッセージが反映されてコードも出来るので、使う時は編集なしの場合と同じようにブログなどに埋め込むだけです。

 

Steamウィジェットを埋め込むときの注意

WordPressには編集モードがふたつあります。ウィジェットの埋め込みが上手く行かなかった場合はこの編集モードを確認しましょう。

上記の画像のようにWordPressの記事作成画面には以下の2つのモードがあります。

  • ビジュアル
  • テキスト 

ウィジェットのように文章ではなく、コードを入力する際にはテキストを選択して入力する必要があります。
ちょっとだけ煩わしく思うかも知れませんが覚えておきましょう。

 

Steamウィジェットが上手く表示されない時

最近のSteamなら大丈夫だと思いますが、埋め込み方法に問題がなくてもコードに問題がある場合があります。
ちゃんとウィジェットをテキストモードで入力したのに表示されない場合は以下をチェックしてみてください。

  • 自身のサイトがSSL(https)になっているか
  • コード内のストアページのリンクがhttpsになっているか

今回のコードだとこの様になっていますが

<iframe src="https://store.steampowered.com/widget/842810/?t=%E5%88%9D%E5%9B%9E%E3%81%99%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AE%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%81%AF%E3%82%B3%E3%82%B3%E3%81%AB%E6%9B%B8%E3%81%8F%E3%81%A8%E5%8F%8D%E6%98%A0%E3%81%95%E3%82%8C%E3%82%8B%E3%82%93%E3%81%A0%E3%82%88%EF%BC%81%0A%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%81%82%E3%81%B5%E3%82%8C%E3%82%8B%E7%B4%B9%E4%BB%8B%E3%82%82%E6%83%B3%E3%81%84%E3%81%AE%E3%81%BE%E3%81%BE" frameborder="0" width="646" height="190"></iframe>

注目すべき箇所は赤字のhttpsだけです。

src="https://store.steampowered.com

 

SSL対応済みのサイトの場合、利用されているサーバや環境にもよりますがリンクのURLがhttpsではない場合に正常に表示されないことがあります。
Steamウィジェットは少し前はhttpのリンクでウィジェットが作成されていたので表示されない事がありました。

今は大丈夫だと思いますが、念の為確認しておきましょう。

 

最後に

以上がSteamウィジェットをブログに設定する方法になります。
うまくいかない場合や表示されない場合なんかは参考にしてみてください。

あとSteamで買ったゲームをTwitchで配信してます!

よかった私のチャンネルまで見に来てくださm(_ _)m

 

-ゲームズ
-, , , ,

Copyright© おっどじょぶマン田中 , 2019 All Rights Reserved.