ホーム 技術ログ

Railsでsnsのシェアボタンを作る最短の方法

皆さんこんにちわ!ブロガーのRyosukeです!本日は、Railsでsnsのシェアボタンを作る方法について解説をしていきたいと思います。今回の前提条件は以下の通りになっています。

  • snsのボタンは画像を使う
  • 画像は/app/assets/imagesへ保存しておく
  • 画像の大きさはcssで調整する
  • railsのタグを使う

最終的には下記のような感じになります。こちらは私が運営しているサービスhttps://www.language-exchange.fun/ です!ツイッターのボタンを押すと画面遷移します。では、張り切って行きましょう!

sns画像を用意する

今回はググって適当にツイッターの画像をパクってきたのでそれを使います

link_to と image_tagを使う

<%= link_to image_tag('twitter.jpg', :class => "add_style"), "URL&text=タイトル", title: 'タイトル', target: '_blank', class: 'add_style' %>
こんな感じですねー!。 urlを入力して、 titileを入力する感じです、ここは動的にお願いします。

CSSで画像を小さくする

ここまで来たら後は簡単ですね。CSSで画像を調節しましょう。事前にclassに`add_style` というクラス名を付与してますのでこちらに対してcssを書いていけばいいということになります。今回は簡単に以下のようにしました。

.add_style{
  width: 25px;
  height: 25px;
}

これで全部完了です。そのほかのsnsのシェアのurl構造については下記の記事を参考にしてみてください!

https://techdeeper.jp/articles/10

Pocket
LinkedIn にシェア

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

ご提供 sponsor
 

Meee!(ミー)は、ビジネスからプライベート利用まで、個人のスキルを気軽に売り買いできるスキルマーケットです。カテゴリや居住地から、検索することが可能です。

 

ランゲージエクスチェンジは、ネイティブスピーカーと気軽にマッチングできる言語交換プラットフォームです。あなたの地元に住む外国人を探したり、留学や海外移住の前に、現地のネイティブスピーカーと繋がることもできます!

宣伝
 

りょすけトークchは、仕事や私生活をより豊にするYouTubeチャンネルです。文献(本、映画、論文)から役に立つ情報をまとめ、生涯にわたり役に立つ哲学をお届けしています。是非、チャンネル登録してみてね

-ホーム, 技術ログ

Copyright© offブログ! , 2021 All Rights Reserved Powered by AFFINGER5.