CODEWITHSUNDEEP
htmlfacebooktwittergoogle-plus
Miguel Moura
Miguel Moura

Reputation: 39364

Pure Html Share Buttons for Facebook, Google and Twitter

I need to create custom share buttons for Facebook, Twitter and Google +.

At the moment I have the following:

Facebook

<a href="http://www.facebook.com/sharer/sharer.php?url=http://www.google.com" target="_blank">facebook</a>

Google

<a href="https://plusone.google.com/_/+1/confirm?hl=en&url=http://www.google.com" target="_blank">google</a>

Twitter

<a href="http://twitter.com/home?status=http://www.google.com" target="_blank">twitter</a></li>

This seems to be working. But I still have a few problems:

  1. How to specify the title of the page being sent in each service?

  2. In Google + I there is the following on the url: "confirm?hl=en" ... If the site is not in English should I change "en" to the site's language?

Thank You, Miguel

Upvotes: 1

Views: 3195

Answers (1)

Jerreck
Jerreck

Reputation: 3010

Social networking services look for Open Graph metadata when a page is shared. To specify what this data is, you have to include the meta tags in the head of your page. The following should be your bare minium tags to include. For the rest, google them and you will find them easily enough:

For the page title:

<meta property="og:title" content="Title Here" />

For the URL

<meta property="og:url" content="http://www.example.com/" />

For the image that is typically displayed when someone shares a page to their wall:

<meta property="og:image" content="http://example.com/image.jpg" />

Description text that is generally included when someone shares a page:

<meta property="og:description" content="Description Here" />

However, I'm not exactly sure what "confirm?hl=en" does, but if you want to tell a search engine to crawl a site in a different language, then you can do so with the locale property.

That's a bit more complicated, though. Check out this article for more info on internationalization.

https://developers.facebook.com/docs/opengraph/guides/internationalization/

Upvotes: 2

Related Questions