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
• For Facebook share on mobile there is 2 changes to be added
  • to force desktop version of Facebook add the parameter m2w like this http://www.facebook.com/sharer/sharer.php?m2w&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
  • to use the mobile share you have to make some changes to the link as the following http://m.facebook.com/sharer.php?u=http://logicum.co/creating-custom-share-buttons-Facebook-twitter-google, so instead of “p[url]=” you are usig “u=”

Example:

Code: <a target=”_blank” href=”http://www.facebook.com/sharer/sharer.php?s=100&amp;p[url]=http://logicum.co/creating-custom-share-buttons-facebook-twitter-google&amp;p[images][0]=http://logicum.co/wp-content/uploads/2013/01/sharetweetbuttons.jpg&amp;p[title]=Creating Custom share buttons: Facebook, Twitter, Google+&amp;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&amp;text=Creating Custom share buttons: Facebook, Twitter, Google+&amp;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