Today's Question:  What weekend projects have you created?        GIVE A SHOUT

Technical Article => Other =>  Other

Social media sharing codes

  sonic0002      2013-07-18 23:12:45      23,139    3

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="<?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="<?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="<?php echo urldecode($current_url); ?>" onclick=", '_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="<?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="<?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="<?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="<?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="" onclick="''+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="<?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="<?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="<?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="<?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 on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious



Ani [Reply]@ 2014-03-25 03:56:48

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 [Reply]@ 2014-11-04 02:22:34

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

NightCat [Reply]@ 2014-11-04 05:38:39

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."


Hotfix on production environment

By sonic0002