Google + 1 버튼에 맞춤 이미지를 사용 하시겠습니까?
페이지에 "google + 1"버튼을 포함하고 싶지만 Facebook 및 Twitter에서 할 수있는 것과 같이 사용자 정의 크기와 가급적 javascript없이 사용자 정의 이미지를 사용하고 싶습니다. 지금은 카운트 번호를 표시하지 않아도 상관 없습니다.
드디어! 이 문제에 대한 좋은 해결책을 찾았습니다. 너무 간단하고 작동합니다 :) 도움이되기를 바랍니다!
<a href="https://plus.google.com/share?url=ADD_YOUR_URL" >
<img src="path_to_your_image" alt="Google+" title="Google+"/>
</a>
출처 : http://notesofgenius.com/how-develop-custom-google-plus-button/
다음은 Google 개발자 페이지 의 공식 예입니다 .
또한 URL이 업데이트 된 것을 고려하십시오.
<a href="https://plus.google.com/share?url={URL}" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
<img src="https://www.gstatic.com/images/icons/gplus-64.png" alt="Share on Google+"/>
</a>
불투명도 0을 사용하여 보이지 않게합니다. 그런 다음 배경을 사용하여 원하는 모양으로 만듭니다.
<style>
.my_custom_googleplusone{
overflow: hidden;
background: url(blahblah.png);
}
.my_custom_googleplusone:hover{
background: url(blahblah2.png);
}
</style>
<div class="my_custom_googleplusone">
/// GOOGLE BUTTON WITH OPACITY OF 0 (and z-index 1 with absolute position);
</div>
이미지를 오버레이하고 기능을 유지할 수 있습니다.
http://tcg.ellininc.com/buttonTest/
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<style>
.my_custom_googleplusone{
overflow: hidden;
background-image: url(styled.png);
background-repeat: no-repeat;
height: 30px;
width: 161px;
position: absolute;
pointer-events: none;
}
.my_custom_googleplusone:hover{
visibility: hidden;
}
.hideMe {
height: 30px;
width: 161px;
overflow: hidden;
position: absolute;
z-index: -1; !Important
}
</style>
</head>
<body>
<div><g:plusone></g:plusone></div><br />
<div class="my_custom_googleplusone"></div>
<div class="hideMe"><g:plusone></g:plusone></div>
</body>
관련없는 CSS에 대해 사과드립니다.
JavaScript를 사용하려는 경우보다 공식적인 경험을 제공 할 것 입니다.
HTML
<a href="#" onclick="gPlus('http://example.com');" title="+1">
<img src="custom-image.png" alt="Google+ +1 Button">
</a>
자바 스크립트
function gPlus(url){
window.open(
'https://plus.google.com/share?url='+url,
'popupwindow',
'scrollbars=yes,width=800,height=400'
).focus();
return false;
}
해당 기능을 전역 적으로 포함하면 여러 개의 긴 인라인을 사용하지 않고도 모든 곳에 이러한 버튼을 사용할 수 있습니다 onClick.
Chrome의 요소 검사기를 사용하여 대상 요소를 파악했습니다 (Firebug를 사용할 수도 있음).
+1의 원래 스프라이트는 여기에 있습니다 : https://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/sprite.png
내 구현에서 렌더링 된 <a>클래스에는 a-sb-ig-eand 클래스가 a-sb-ig-ps-e있으며 그 부모는 <div>클래스가a-sb-ML
거기에서 자신의 CSS 내에서 버튼의 스타일을 지정할 수 있습니다. 마찬가지로 카운터 버블을 검사하고 해당 요소의 클래스를 파악하여 카운터 버블의 스타일을 지정할 수도 있습니다.
Edit: since the +1 button is called within an iframe, what I described above won't work. What you could do instead is target the +1 div and set its opacity to 0, then place it on top of your own image. The div ID to target is #___plusone_0
Considering the button resides in an iframe and due to cross-domain restrictions, altering this is unlikely.
This is my solution for using a custom icon for the official google +1 code
+1 Button - Google+ Platform - Google Developers
<style type="text/css">
.google-plus-container {
position: absolute; /* just to position the container where i wante the button, position absoliute or relative is required*/
right: 0;
top: 0; }
.google-plus-iframe {
z-index: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
.google-plus-icon {
z-index: -1;
width: 32px;
height: 20px;
background: transparent url(http://static.educations.com/masterpages/pics/icons/social/gplusbw.png) no-repeat;
position: absolute;
top: 0;
right: 0;
}
<div class="google-plus-container">
<div class="google-plus-icon"></div>
<div class="google-plus-iframe">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium" data-annotation="none"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
window.___gcfg = { lang: 'sv' };
(function () {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
Works like a charm
You should use this now: https://plus.google.com/share?url=URL_HERE
참고URL : https://stackoverflow.com/questions/6585722/use-custom-image-for-google1-button
'Program Tip' 카테고리의 다른 글
| PowerShell에서 추가 된 유형을 다시 제거 할 수 있습니까? (0) | 2020.12.11 |
|---|---|
| 축 제목에 그리스 문자 추가 (0) | 2020.12.11 |
| HTML 웹 페이지에서 CSS 및 Javascript 코드를 어디에 넣어야합니까? (0) | 2020.12.11 |
| Chrome 브라우저에서 deviceready 이벤트를 시작하는 방법 (phonegap 프로젝트 디버그 시도) (0) | 2020.12.11 |
| mongodb 메모리 사용을 제한하는 옵션이 있습니까? (0) | 2020.12.11 |