How to embed Social Medias to your website?

Share me :)

The last step of my coding process was to include social medias, here are some tips.
The difficulty depends on the media and how personnalized you want it.

play_arrow Metadata

To help social medias describing your website, you need to add some code in the head part. This code will be inside the meta tag. You should check the Open Graph Protocol that works especially for Facebook. It will enable you to give a title, type, image, URL, description... that medias will use when you share a page. Schemas is another system to implement, this time inside the tags: it will help Google but also Pinterest... You can use it to show the different element of a recipe (name, ingredients, time, quantity...) and Goggle will display all these information on the results page, as well as Pinterest will show these data on the pinned card (they call it Rich Pin). You should use it for recipes, book, restaurant...
You will also need a tool to encode your URL and text, which will be faster when you want to use customized buttons.

play_arrow Facebook

As I said you should add the OpenGraph metadata to help Facebook. Then you need to consult their developper page where you can easily find the code for like/share/send buttons or even include a Facebook comment box to your page. This way gives you the "official" buttons, with a small possibility to personalize them.
You can obviously also make your own buttons. For example on this page I'm using a flat icon to share. To do so, the button is a link (take away the "[ ]"):

<a href="https://www.facebook.com/
sharer/sharer.php?u=[encoded URL of the page to share]&t=[encoded title you want facebook to display]"><img src="[your own icon]"></a>

play_arrow Twitter

Things are working more or less the same way with Twitter, but you need to use special meta that you can find on their developers page. These tags can actually be combined with the OGP ones. You can also find the tweet/follow buttons ready to use or again create you own icon and use the following code:

<a href="https://twitter.com/intent/
tweet?source=[encoded URL of the page to share]&text=[encoded tweet you want to display, less than 140 characters]"><img src="[your own icon]"></a>

After that step, you'll need to go through the validator to get your "tweet" card running and see a preview of it.

play_arrow Pinterest

Pinterest also provide a widget builder where you can choose to display a pin/follow button or a board or even your profile. Like I said, Pinterest works with the Schema meta tags (and actually also with the OPG ones). So if you want a recipe to show on the most user friendly way when pinning it, don't forget those tags.
You might be used to see the "pinit" button that appears when hovering a picture. But few things have to be highlighted: if your image is actually a background-image, the button won't appear, same for iframes and pictures smaller than 100*200 px. And the problem will be the same for people using the Pin extension.
If you have a board or profile on the page, there is a little trick, because you'll need to have a JS script that "transforms" every pinning buttons into the official ones, which becomes a problem when you want a customized button:

<a href="http://pinterest.com/pin/create/
button/?url=[encoded URL of the page to share]&media=[encoded URL of the image to share]&description=[encoded description you want to show]" data-pin-custom="true" data-pin-do="buttonPin"><img src="[your own icon]"></a>

You also should validate you "rich pins" using their validator.

I will keep adding more social media as I start using them on my website.