Integration of web applications with social networks or “affixing likes”
What was required: add facebook and twitter buttons to most
sections of the application.
What was: a one-page application without static addresses.
So, we will need to do 3 actions:
We need to bind the address of the page and preferably the title to the sections of the application.
I use jquery.address and my
crutches with regular expressions. Everything is simple and depends on
applications, so it makes no sense to tell in detail.
')
Since all the social network buttons do not like the address with the "hash", we
have to make special pages without "#!". When entering the robot
facebook will take information from them, and the person will be redirected to the page with "#!".
For this we need a template of the form:
All fields are required.
In fb: app_id - application id in facebook.
In fb: admins - application users / administrators id separated by commas.
In og: image , image_src and img we write the absolute address of the image,
including domain.
After several tests it became clear that the image for
The preview should be duplicated. Otherwise the situation is possible.
when posting without thumbnails.
The contents of the remaining fields are clear from their titles.
In this part, the first problems will come out: you can not add to the page
several facebook buttons. But it is very easily solved on js:
In try / catch it is wrapped, as ie starts to swear at cross-domain
requests. With try / catch - ignores.
You can put any button code, the main thing is to pull FB.XFBML.parse () later.
Twitter is not far from facebook. It has a dynamic add
buttons does not work. This is also easily solved:
try / catch is used for a similar reason with facebook.
It now remains to set an address on these functions without a “#!” And it will work.
sections of the application.
What was: a one-page application without static addresses.
So, we will need to do 3 actions:
- add support for hashbang addresses;
- make static pages for facebook "robot";
- Actually, arrange the buttons.
#! addresses
We need to bind the address of the page and preferably the title to the sections of the application.
I use jquery.address and my
crutches with regular expressions. Everything is simple and depends on
applications, so it makes no sense to tell in detail.
')
Static pages
Since all the social network buttons do not like the address with the "hash", we
have to make special pages without "#!". When entering the robot
facebook will take information from them, and the person will be redirected to the page with "#!".
For this we need a template of the form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <title></title> <meta property="og:title" content="" /> <meta property="og:description" content="" /> <meta property="og:image" content="" /> <meta property="og:type" content="" /> <meta property="og:site_name" content="" /> <meta property="fb:app_id" content="" /> <meta property="fb:admins" content="" /> <link rel="image_src" href="" /> </head> <body onload="document.location = 'http://' + document.location.host + '/#!' + document.location.pathname"> <img src='' /> </body> </html> All fields are required.
In fb: app_id - application id in facebook.
In fb: admins - application users / administrators id separated by commas.
In og: image , image_src and img we write the absolute address of the image,
including domain.
After several tests it became clear that the image for
The preview should be duplicated. Otherwise the situation is possible.
when posting without thumbnails.
The contents of the remaining fields are clear from their titles.
We arrange the buttons
In this part, the first problems will come out: you can not add to the page
several facebook buttons. But it is very easily solved on js:
function addLike(holder, url) { try { $(holder).html('<fb:like href="'+ url + '" ></fb:like>'); FB.XFBML.parse(); } catch(err) {} } In try / catch it is wrapped, as ie starts to swear at cross-domain
requests. With try / catch - ignores.
You can put any button code, the main thing is to pull FB.XFBML.parse () later.
Twitter is not far from facebook. It has a dynamic add
buttons does not work. This is also easily solved:
function addTwitter(holder, url, title) { try { $(holder).html('<a href="https://twitter.com/share" class="twitter-share-button" data-url="' + url + '" data-text="' + title + '">Tweet</a>'); $.getScript("http://platform.twitter.com/widgets.js"); } catch(err) {} } try / catch is used for a similar reason with facebook.
It now remains to set an address on these functions without a “#!” And it will work.
Source: https://habr.com/ru/post/142039/
All Articles