Social media sharing codes

Summary

To achieve custom social media sharing buttons that align with a website's design, developers can bypass default platform widgets and instead leverage direct sharing URLs. These URLs, provided by various social media services like Facebook, Twitter, and LinkedIn, allow for programmatic insertion of the current page's URL and title. By constructing these links, developers gain full control over the button's appearance and behavior, enabling seamless integration. The article demonstrates specific URL structures for numerous international and Chinese social media platforms, emphasizing the need to dynamically populate URL and title parameters.

Social media is becoming a very important traffic source to one website. We can see social media share buttons or links in most websites ranging from news website to personal blogs. It is also a very important optimization area where many SEO experts recommend. There are many social medias we can share our links to such as Facebook and Twitter. Most of these website provide share button for us to easily integrate them into our websites, but these buttons usually have default styles(fixed size, fixed images). If we want to customize these buttons so that they conform to our website design gracefully, we need to know the links these website use to share links on them. We summarize some of them here.

<!-- Facebook--> 
<a href="http://www.facebook.com/share.php?u=<?php echo $current_url; ?>" target="_blank"><img src="/images/icons/share/32/facebook.png" alt="Share on Facebook" title="Share on facebook"/></a> <!--Twitter share--> <a href="http://twitter.com/home?status=<?php echo urlencode($title).' '.$current_url; ?>" title="Click to share this post on Twitter" target="_blank"><img src="/images/icons/share/32/twitter.png" alt="Share on Twitter" title="Share on twitter"></a> <!--Google +1 Button --> <a href="https://plus.google.com/share?url=<?php echo urldecode($current_url); ?>" onclick="javascript:window.open(this.href, '_blank','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="/images/icons/share/32/google_plus.png" title="Share on Google+" alt="Share on Google+"/></a> <!-- Reddit --> <a href="http://reddit.com/submit?url=<?php echo $current_url; ?>&title=<?php echo urlencode($article_title); ?>" title="Share on Reddit" target="_blank"><img src="/images/icons/share/32/reddit.png" alt="Share on Reddit"/></a> <!--Digg --> <a href="http://www.digg.com/submit?phase=2&url=<?php echo $current_url; ?>" target="_blank"><img src="/images/icons/share/32/digg.png" alt="Share on Digg" title="Share on Digg"/></a> <!--Tumblr--> <a href="http://www.tumblr.com/share?v=3&u=<?php echo $current_url; ?>&t=<?php echo urlencode($title); ?>" target="_blank"><img src="/images/icons/share/32/tumblr.png" alt="Share on Tumblr" title="Share on Tumblr" /></a> <!--Linkedln share--> <a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php echo $current_url; ?>&title=<?php echo $title; ?>&source=<?php echo $current_url; ?>" target="_blank"><img src="/images/icons/share/32/linkedin.png" title="Share on linkedln" /></a> <!--Delicious share--> <a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('<?php echo $current_url; ?>')+'&title='+encodeURIComponent('<?php echo $title; ?>'),'delicious', 'toolbar=no,width=550,height=550'); return false;"><img src="/images/icons/share/32/delicious.png" alt="Delicious" title="Share on delicious" /></a>

If your have readers from China, you can also add below links:

<!--Sina Weibo -->
<a href="http://v.t.sina.com.cn/share/share.php?url=<?php echo $current_url; ?>&title=<?php echo urlencode($title); ?>" target="_blank"><img src="/images/icons/share/sina-weibo.png" title="Share on Weiboo" alt="Share on Weibo" /></a>

Above code is to share the link to the most famous Twitter like platform in China. This website provides more functions than Twitter. Learn from Twitter, better than Twitter.

<!-- QZone -->
<a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<?php echo $current_url; ?>&title=<?php echo urlencode($title); ?>" target="_blank"><img src="/images/icons/share/qzone.png" title="Share on QZone" alt="Share on QZone"/></a>

Above code is to share the link to the most widely used social platform in China.

<!-- Renren -->
<a href="http://share.renren.com/share/buttonshare?link=<?php echo $current_url; ?>&title=<?php echo urlencode($title); ?>" target="_blank"><img src="/images/icons/share/renren.png" title="Share on Renren" alt="Share on Renren"/></a>

Above code is to share the link to the most notorious Facebook like platform in China. It steals almost every idea from Facebook. You may know how to use this website even you don't know Chinese.

<!--Tencent Weibo -->
<a href="http://v.t.qq.com/share/share.php?url=<?php echo $current_url; ?>&title=<?php echo urlencode($title); ?>" target="_blank"><img src="/images/icons/share/tencent_weibo.png" title="Share on Tencent Weibo" alt="Share on Tencent Weibo"/></a>

Above code is to share the link to another Twitter like platform in China. Don't know why people need so many Twitters in China.

For all the above links, you need to modify the url and title accordingly. Also the images should be replaced with your own customized images, if you don't want to use images, you can use text instead. But then why do you want to customize them if you don't want to use images.

SHARE BUTTON SOCIAL MEDIA CUTOMIZE

  RELATED

  COMMENTS

3
Ani
Mar 25, 2014 at 3:56 am

Thanks for the information about the social media sharing codes. 
Anyway, I have a further question. For finishing the implementation of the sharing buttons I need icons for the buttons.  I´m looking for the qzone icon especially. Can you tell me where I can find the icon?
Thanks ani :-)

don
Nov 4, 2014 at 2:22 am

Great post - is there the same sort of code for WeChat?

NightCat
Nov 4, 2014 at 5:38 am

Yes. But it's hard to implement as the WeChat platform uses a build-in browser and it created a private JS objec to enable other websites to share contents on WeChat.

Here is the method which can be called to share on WeChat:

function WeiXinShareBtn() {
     if (typeof WeixinJSBridge == "undefined") {
          alert("Browser doesn't support WeChat share will show this");
     } else {
          WeixinJSBridge.invoke('shareTimeline', {
               "title": "content_title",
               "link": "content_link",
               "desc": "content_description",
               "img_url": "content_image."
          });
     }
}