Just like Facebook and Twitter have special social sharing buttons you can add to your blog or website to share the page to those services, Naver has a simple sharing button for one-click sharing to either a Naver Cafe or Pholar (Naver's sort of G+/Instagram type photo sharing service).
All you need to do is add a short piece of code, and you'll get a little green Naver "N" box (looks great next to a blue Facebook "F") that opens a share dialog when clicked. The button looks like this:
Here's the official code to add:
Pretty easy. You can customize the size by changing that "type" value from "a" to anything from a~f. The sizes look like this:
Clicking the button will open this Naver share dialog, letting you choose whether to share the page to a Cafe or Pholar. You'll be asked to log-in after choosing if you're logged out.
If you want to use this official Naver method, be my guest. But you'll notice that the sharer, like with Facebook or Twitter, is really just a glorified link. You don't need to call a Javascript just for that (unless you're interested in the SEO or tracking aspects).
So you could also just put the cute little green "N" image on your site and have it link to this:
Same basic functionality. Heck, if you're obsessed with sharing things to your Naver Cafe then you could drag that code to your browser's bookmarks bar and use it as a bookmarklet. No Chrome extension required. Since it's a bookmarklet though, the URL is potentially subject to change, but I doubt it ever will so just go ahead.
For now, here's an example using the official Naver code, not my alternative. You can add the N button anywhere in your blog/site, including as a sidebar widget (HTML widget). But on Blogger you can also integrate it right into the into the other sharing buttons that appear in your post footers, so that it will look like this:
To do this, add the code from above into your blog's template (Theme → Edit HTML). Find the following line:
In this section, paste the code. You can arrange it by placing it between the correct button codes. For example, I placed it between the Blogger "Blog This" button and the Twitter button in the image above. So my template section looked like:
You'll then want to style it a bit, so I suggest adding some CSS (Theme → Customize → Add CSS) such as:
You can do the same for mobile views, however you can't integrate it directly into the Blogger share menu here (not on mobile, and not in the four newest Blogger responsive themes. We don't have access to edit those). However you can still manually add it to the template besides that share menu if you really want to.
But in my experience this only shows on certain mobile browsers, and importantly, not Chrome for Android as of now. So just use my "alternative" method. Just do it.
Below are real examples to demonstrate. First the actual Naver code. You should see the green N and it should open share dialog. If you don't see anything, the your browser is probably blocking this javascript call.
Now here's just the image, linked to my alternative share URL. This should appear/work, no matter what:
For more on using Naver's share code, and their various APIs, see:
→ NAVER Developers - 네이버 공유하기 개발가이드
Finally, some articles you might like:
All you need to do is add a short piece of code, and you'll get a little green Naver "N" box (looks great next to a blue Facebook "F") that opens a share dialog when clicked. The button looks like this:
|
| Naver share button image |
Code for the Naver sharing button
Here's the official code to add:
<span>
<script type="text/javascript" src="http://share.naver.net/js/naver_sharebutton.js"></script>
<script type="text/javascript">
new ShareNaver.makeButton({"type": "a"});
</script>
</span>Pretty easy. You can customize the size by changing that "type" value from "a" to anything from a~f. The sizes look like this:
 |
| Naver share button sizes |
What it does
Clicking the button will open this Naver share dialog, letting you choose whether to share the page to a Cafe or Pholar. You'll be asked to log-in after choosing if you're logged out.
 |
| Naver sharing dialog. Really meant for Naver blogs, but you can use it technically anywhere. |
A good alternative: Naver sharer bookmarklet/link
If you want to use this official Naver method, be my guest. But you'll notice that the sharer, like with Facebook or Twitter, is really just a glorified link. You don't need to call a Javascript just for that (unless you're interested in the SEO or tracking aspects).
So you could also just put the cute little green "N" image on your site and have it link to this:
javascript:(function()%7Blocation.href='http://share.naver.com/web/shareView.nhn?url='+location.href+'&title='+encodeURIComponent(document.title)%7D)()Same basic functionality. Heck, if you're obsessed with sharing things to your Naver Cafe then you could drag that code to your browser's bookmarks bar and use it as a bookmarklet. No Chrome extension required. Since it's a bookmarklet though, the URL is potentially subject to change, but I doubt it ever will so just go ahead.
Example: Adding the button to Blogger's default share buttons
For now, here's an example using the official Naver code, not my alternative. You can add the N button anywhere in your blog/site, including as a sidebar widget (HTML widget). But on Blogger you can also integrate it right into the into the other sharing buttons that appear in your post footers, so that it will look like this:
 |
| Naver share button in Blogger default sharing buttons |
To do this, add the code from above into your blog's template (Theme → Edit HTML). Find the following line:
<b:includable id='shareButtons' var='post'>In this section, paste the code. You can arrange it by placing it between the correct button codes. For example, I placed it between the Blogger "Blog This" button and the Twitter button in the image above. So my template section looked like:
<b:includable id='shareButtons' var='post'><b:if cond='data:top.showEmailButton'>
<a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'>
<data:top.emailThisMsg/>
</span></a></b:if>
<b:if cond='data:top.showBlogThisButton'>
<a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'>
<data:top.blogThisMsg/></span></a></b:if>
<span><script src='http://share.naver.net/js/naver_sharebutton.js' type='text/javascript'/><script type='text/javascript'>new ShareNaver.makeButton({"type": "a"});</script></span><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if>
You'll then want to style it a bit, so I suggest adding some CSS (Theme → Customize → Add CSS) such as:
img#naver { width: 20px; height: 20px; }Limitations in Blogger
You can do the same for mobile views, however you can't integrate it directly into the Blogger share menu here (not on mobile, and not in the four newest Blogger responsive themes. We don't have access to edit those). However you can still manually add it to the template besides that share menu if you really want to.
 |
| Naver share box on Blogger mobile templates |
But in my experience this only shows on certain mobile browsers, and importantly, not Chrome for Android as of now. So just use my "alternative" method. Just do it.
Actual Examples
Below are real examples to demonstrate. First the actual Naver code. You should see the green N and it should open share dialog. If you don't see anything, the your browser is probably blocking this javascript call.
Now here's just the image, linked to my alternative share URL. This should appear/work, no matter what:
For more on using Naver's share code, and their various APIs, see:
→ NAVER Developers - 네이버 공유하기 개발가이드
Finally, some articles you might like:
- Joining Cafe's in Naver - So You Wanna Naver
- Korea Herald - Could Pholar be the next Instagram?
- How to Add LINE Share Button in Blogger - Meralesson - Blogger, Wordpress, SEO, Programming, PHP, Html, CSS Tutorials Blog
Comments