WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

SNS関連

Twitterの高度な検索/検索オプション

Twitterウィジェットの検索結果タイムラインを サイトに埋め込みたい時に使用したのでメモ 高度な検索 twitter.comsupport.twitter.com OR演算子 阪神 OR タイガース阪神かタイガースを含むツイートを表示 -演算子 阪神 -タイガース阪神の検索結果からタイガ…

Twitter ウィジェットのカスタマイズ

ウィジェットの作り方 Twitterにログインした状態で、自分のアイコンをクリック→設定→ウィジェット→新規作成 パラメータ パラメータ 値 data-chrome noheader(ヘッダー非表示)、nofooter(フッター非表示)、noborders(境界線を非表示)、noscrollbar(タイ…

TwitterCard

TwitterCardとは Twitterにリンクを貼ると通常そのままURLが表示してしまうが、 Twitter Cardを設定しておくと 設定したmetaに応じてタイトルや画像、デスクリプションが表示され、 クリックすると飛ぶようにできる。OGPタグとの併用ができるので OGPタグに…

SNSシェアボタン-LINE

LINE LINEの場合、画像でリンクさせたい場合は画像を用意する必要がある。media.line.me 公式からダウンロードしたり、オリジナルの画像を用意する。 <a href="http://line.me/R/msg/【textもしくはimage】/?【デフォルトで入力されているメッセージ】"><img src="" alt="LINEで送る"></a> 【textもしくはimage】 テキスト情報を送るか画像を送るか選択する 【デフォルトで入力されているメッセ…

SNSシェアボタン-Facebook

Facebook(いいねまたはシェア) developers.facebook.com Facebookで用意されているボタンを使う場合 HTML <div class="fb_btn" data-href="対象のURL" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div> HTML,JS bodyの中に記述しておく <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = …

SNSシェアボタン-Twitter

Twitter Twitterボタン | AboutTwitterで用意されているボタンを使用する場合 HTML <a class="twitter-share-button" href="https://twitter.com/share" data-dnt="true">Tweet</a> 「Tweet」という文字がJavaScriptによってシェアボタンに変わる JS body内に記入する <script> window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=w…

Facebook OGP設定

「Open Graph protocol」の略headにプレフィックスをつける <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta property="og:title" content=""> ページのタイトル <meta property="og:type" content=""> サイトのタイプ。websiteなど <meta property="og:url" content=""> ページのURL </meta></meta></meta></head>