모 스쿨의 팀 개발에서 모 프리마 앱을 작성하고 있어 추가 기능을 구현해 나가는 단계가 되었습니다.
거기서, 전회는 「취치 기능」과 「Twitter API를 이용한 신규 등록과 로그인」을 오리지날로 추가해 보았습니다만, 이번은 한층 더 추가 기능으로서, 「Twitter에의 링크 쉐어 기능」을 만들어 보았습니다!

이 기사 해당 Github : htps : // 기주 b. 코 m / 타츠 88 - 토키 / f 레에 마 r t_ mp ぇ_60

*전회 추가 기능에 관한 기사 #1:[취치 기능]모 프리마 앱에 오리지날 기능을 구현해 보았다.
htps : // m / tsu 88 / ms / 2f690056f417cb6494

*전회 추가 기능에 관한 기사 #2:【HowTo】모 프리마 사이트에 Rails+Devise+Twitter API를 이용한 신규 등록과 로그인 기능을 실장해 보았다.
htps : // 이 m/타츠 88/이고 ms/아 846㎝ d62d7d9855fcf73

배경 : "트위터에 링크 게시 기능"을 추가 기능으로 선택한 이유

이번에도 추가 기능을 선택하는데 있어서, 넷에서 모 프리마 앱 유저의 코멘트를 넷으로 찾거나, 스스로 사이트를 괴롭히고 있을 때, 프리마 사이트라면 Twitter와의 제휴는 갖고 싶다고 생각해 구현을 결정했습니다.
＊당초, 메○카리는 Twitter 인증으로의 신규 등록이나 로그인이 없었으므로, 확실히 Twitter 링크 쉐어 기능이 없다고 생각했습니다만, 자주(잘) 보셨습니다. . . 웃음
라고 하는 것으로, 오리지날 추가 기능이 없어졌습니다만, 구현은 했으므로, 이하에 기재합니다.

구현 이미지

이번 구현 이미지는 다음과 같이 되어 있습니다.

게시 액션

게시 화면(트위터) 구현 방법 이번에는 구현이 매우 간단합니다. 거의 코딩하지 않고 할 수 있습니다. (너무 쉽고, 자신도 박자 빠졌습니다 웃음) 1. Twitter의 developers 사이트에서 사용하고 싶은 기능을 선택 2. 코드 작성 3. (번외편) 트윗 내용을 커스터마이즈 1. Twitter의 developers 사이트에서 사용하고 싶은 기능을 선택 그럼 트위터 개발자 사이트에 가자. htps : // 푸bぃsh. 라고 r. 이 m/#

사이트에 들어가면 다음 화면이 있으므로 사용하고 싶은 스타일을 선택합니다.
이번에는 가장 오른쪽 트위터 버튼을 선택했습니다.
그러면 다음 화면이 나오므로 여기에서도 자신이 사용하고 싶은 스타일을 선택합니다. 이번에는 공유 기능을 원하므로 가장 왼쪽 Share Button을 선택합니다. 그러면 아래와 같이 코드가 나오므로 여기의 Copy Code 버튼을 누르자! 이것으로 준비 완료입니다! 2. 코드 작성 자신의 사이트에서 버튼을 설치하고 싶은 부분에 복사해 온 코드를 붙여 봅시다! 이상입니다! 웃음 아주 간단하네요. 이대로도 문제없이 사용할 수 있지만, 절각이므로, 좀 더 커스터마이즈합시다. 3. (번외편) 트윗 내용을 커스터마이즈
data-url="방금전의 화면상, 청자로 set customization options라고 있습니다. 이 문자의 부분을 클릭합시다! "

화면 이름
내 계정 이름
data-via="applica"

해시태그
아이폰
data-hashtags="iPhone"

계정 추천
팔로우를 추천하는 사용자 이름
data-related="applica"

버튼 크기
크게 하고 싶을 때만 선택
data-size="large"

언어 표시
특정 언어로 표시하고 싶을 때
data-lang="ko"


자신의 경우는 상품명이나 가격을 함께 입력하고 싶었으므로, 여기에서 커스터마이즈 한 후,
조금 코드를 추가하여 다음과 같이 구현했습니다!

보기

%a.twitter-share-button{"data-hashtags": "テックエキスパート", "data-show-count": "false", "data-size": "large", "data-text": "Fmarketで商品を出品しました！商品名:#{@product.name},価格:#{@product.price}円", href:"https://twitter.com/share?ref_src=twsrc%5Etfw"} Tweet
%script{:async => "", :charset => "utf-8", :src => "https://platform.twitter.com/widgets.js"}

참조

Twitter developers 사이트
그러면 다음 화면이 나옵니다. 자신이 표시하고 싶은 내용을 여기에 기재해 Update를 누르자! 아까와 같이 코드가 나오므로, 그쪽을 복사하면, 트윗 때 디폴트로 입력되어 있는 내용을 기재할 수 있습니다!

Twitter의 트윗 버튼 설치 방법! 공유 버튼을 사용자 정의!


이상이 됩니다. 끝까지 봐 주셔서 감사합니다!
앞으로도 학습한 사항에 관하여 Qiita에 투고해 가므로, 잘 부탁드립니다!
기술에 뭔가 잘못 등 있으면, 수고스럽지만 연락하실 수 있으면 다행입니다.