Creating Custom share buttons: Facebook, Twitter, Google+
来源:互联网 发布:手机扫码软件 编辑:程序博客网 时间:2024/05/17 08:05
http://logicum.co/creating-custom-share-buttons-facebook-twitter-google/
Connection social media to any website is one of the important parts in building a website, and any website without those share buttons wouldn’t survive a lot. But sometimes the Default share/tweet buttons provided by the social medias are not good enough for our website or maybe doesn’t fit well in the design of the pages
We are going to help you build your custom share buttons from normal images with examples on each button to make it easier to understand. to do so a minimum of HTML knowledge is needed.
To learn how to get the number of shares or the count check this link
Facebook Share
first we would like to mention that the Facebook share button in deprecated in favor of the Like button but so far it’s working and no official date on when they are stopping it.
to create a Facebook Share button from an image you need to have the image tag inside a link tag and in the href attribute of the link you should have the below parameters. and if you don’t add them, you can have only the URL and facebook will read the rest from the meta tags on the page ( to have more info about the meta tags check the end of this article)
- link: http://www.facebook.com/sharer/sharer.php?s=100
- p[url]:link to your page
- p[images][0]:image to show ( you can have multiple images 1,2,3…)
- p[title]=Page title
- p[summary]= Page Description
Example:
Code: <a target=”_blank” href=”http://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://logicum.co/creating-custom-share-buttons-facebook-twitter-google&p[images][0]=http://logicum.co/wp-content/uploads/2013/01/sharetweetbuttons.jpg&p[title]=Creating Custom share buttons: Facebook, Twitter, Google+&p[summary]=Build your custom share buttons from normal images with examples on each button”><img src=”http://logicum.co/wp-content/uploads/2013/01/facebookshare.jpg”></a>
Twitter Tweet
To create a Tweet button from an image you need to have the image tag inside a link tag and in the href attribute of the link you should have the below parameters. You have to pay attention that a twitter tweet only accepts 140 characters including the link
- Link:https://twitter.com/intent/tweet?
- url: link to the Page
- text: Page Title (text to be added to twitter)
- via: to have @username at the end of the post (via @logicum_co)
Example:
Code:<a target=”_blank” href=”https://twitter.com/intent/tweet?url=http://logicum.co/creating-custom-share-buttons-facebook-twitter-google&text=Creating Custom share buttons: Facebook, Twitter, Google+&via=logicum_co”><img src=”http://logicum.co/wp-content/uploads/2013/01/TwitterTweet.jpg”></a>
Share on Google+
To create a Share on Google+ button from an image you need to have the image tag inside a link tag and in the href attribute of the link you should have the below parameters. Google+ only take a URL as parameter the rest are taken from the Meta Tags
- Link:https://plus.google.com/share?
- url: link to the Page
Example:
Code: <a target=”_blank” href=”https://plus.google.com/share?url=http://logicum.co/creating-custom-share-buttons-facebook-twitter-google”><img src=”http://logicum.co/wp-content/uploads/2013/01/googleshare.jpg”></a>
Meta Tags:
Those tags should be added to every website page the include the below tags but are not limited to them, those are just an example of what is read by some of the social media
- <meta name=”Title” content=”Creating Custom share buttons: Facebook, Twitter, Google+ ” />
- <meta name=”og:title” content=”Creating Custom share buttons: Facebook, Twitter, Google+” />
- <meta name=”description” content=”Build your custom share buttons from normal images with examples on each button ” />
- <meta name=”og:description” content=”Build your custom share buttons from normal images with examples on each button ” />
- <meta name=”og:image” content=”http://logicum.co/wp-content/uploads/2013/01/sharetweetbuttons.jpg” />
- <link rel=”image_src” href=”http://logicum.co/wp-content/uploads/2013/01/sharetweetbuttons.jpg” />
If you know of any share button for other social media and want to share the information with everyone please feel to drop us a comment.
Remember it’s logical to share
- Creating Custom share buttons: Facebook, Twitter, Google+
- share buttons(google+,facebook,twitter,pinterest,linkedin)
- Creating “Share This on Facebook/Twitter” Links
- ios share with facebook/twitter, addthis library
- Facebook, Google, Twitter, Linkedin推出了WebScaleSQL
- 登陆不了google facebook twitter,看这里
- 分享代码 Twitter,Facebook,Google,Yahoo,Linkedined
- combine facebook and google/Twitter together
- Share.js 一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点
- FaceBook Share
- Creating CSS Buttons
- Creating Round SysMenu Buttons
- 史上最简单登录google/youtube/facebook/twitter/方法
- 史上最简单登录google/youtube/facebook/twitter/方法
- Google+比Facebook和Twitter强的五大功能
- 社交战争:二战风格的Facebook/Twitter/Google+海报
- 分享到twitter,facebook,google,yahoo,linkedined,msn
- Twitter为什么不学Google+或Facebook采用实名制
- Unity4.0动画系统(Mecanim)
- [ffmpeg 扩展第三方库编译系列] 关于需要用到cmake 创建 mingw32编译环境问题
- S只是房价真的觉得这个看这个打开中国可真快
- hdu2073无限的路
- static_cast, dynamic_cast, const_cast,reinterpret_cast探讨
- Creating Custom share buttons: Facebook, Twitter, Google+
- Java中文与ASCII码的转换
- MySql数据库使用SQL语句设置编码
- Tomcat7 Maven插件
- 【矩阵算法】distance transform用以提取手掌中心区域
- 史上最容易理解Spring的IoC和DI
- IOS数据持久化层
- C#一元二次方程
- [ffmpeg 扩展第三方库编译系列] 关于libopenjpeg mingw32编译问题