How I added social network share buttons to my website. | An Author's Guide To Web Building



FB & Instagram buttons needed - where?

FB & Instagram buttons needed - where?

 #1387742  by Bouyer Dhéron from naturopratiq.com 
 05 Dec 2017 04:20

Hello I'm Brigitte from France, I would like to put the facebook button instagram but they are not in blockbuilder. Where to find them and how to put it on my page? Thank you ! 


FaceBook provides a code. 

FB Follow Button: https://developers.facebook.com/docs/pl ... low-button

FB Like Button: https://developers.facebook.com/docs/pl ... ke-button/

FB Share Button: https://developers.facebook.com/docs/pl ... are-button

To Embed your FB posts in a page: https://developers.facebook.com/docs/pl ... dded-posts

Originally, when I first built my site, I was using the direct codes provided by FaceBook, Twitter, etc. which meant adding 30 or 40 html codes on every single page of my site, which got annoying fast, and thus why many of the oldest pages have buttons while most of the pages a few months later did not have buttons.

I have since discovered a web app (free) called AddThis and have been able to boost my site's social network presence by 7,000% (which is an astounding number!) in the space of only a few weeks.

AddThis is definitely worth putting on your site.

You can get a bunch of icons from about 70+ social networks here: http://www.addthis.com/ (This is the one I use on my own site, as you can add all your social media accounts to it, and just drop one code into your site and it adds all of them at once.)

This one is for your readers sharing pages of your site to their friends on their networks: http://www.addthis.com/get/share

This one is for them following your accounts: http://www.addthis.com/get/follow

You can do quite a bit of customization with the AddThis code. 

For example you can change what the buttons look like. Make them square or round (I used round) or something in between.

You can use the default colours (I used default colours) or change the colours to white, black, or if you have a paid account (mine is free) you can add custom colours.

You can have the words or just the logos display. (I have words on the share buttons, but just the logos on the follow buttons).

For the share buttons, you only have to select which social networks you want to display (there are 200+ to choose from). You can set it to default (FaceBook, Twitter, Pinterest, Tumblr, Reddit, Google+, email, +more) or override the default and add all the ones you want. (As of writing this mine is displaying 95 buttons.) You can arrange the buttons alphabetically (default) or drag the buttons to put them in any order you want. For mine I put my most used networks on the top 2 rows, than arranged the rest in rainbow order.

My share button grid from here: http://www.addthis.com/get/share Looks like this:



If you are using SBI, like I am, drop the code into a site wide dot and it'll automatically display on every page on your site. Unlike the FaceBook code that requires you to make a new code for each page you want to share, the AddThis code automatically adds your current page to the link when a reader shares the page.

These buttons come in super handy for social network marketing. These are the buttons I use to ping my pages to my social networks. It's why I'm able to post new statue updates of my new pages on FaceBook, Twitter, Tumblr, Reddit, etc, without ever going directly to the social network itself.

Pinging your pages to HootSuite via these share buttons (there is a Hootsuite button) allows me to schedule my Twitter and FaceBook links days, weeks, o months in advance, allowing me to still post daily even when sick or gone from the computer that day.


The follow button option is a bit more complicated, but still super easy to set up, as you have to go to each of your social network accounts and get the link to your profile, and then past it into AddThis, to add your profiles. Once your profiles are added, you can customize and arrange the buttons same as you did for the share buttons.

My follow button grid from here: http://www.addthis.com/get/follow looks like this:



If you are using SBI, like I am, drop the code into a site wide dot and it'll automatically display on every page on your site.


To use the code you have to create an AddThis account (free) then select which tool you want to use (they have several others in additon to the Follow and Share buttons), edit the options as I stated above. Save your changes. Then it gives you 2 codes. 


The first code is a javascript code that you add to your global/site-wide header.

The second code you add to the html block on the page where you want the buttons to display. You can add this code on a page by page basis, or if you just want to add it once and forget it and have it display on every page of your site, then just add it to your sidebar, or footer, or a site-wide dot.

And then you're done.

It's that simple.











Ads by Amazon