How to Customize the Facebook Like Page to Website

Good news for website owners or bloggers from Facebook.  You can now upgrade the new Page Plugin, the substitute to the old Like box.  If you haven’t manually replaced yet the code on your site, you do not need to worry as Facebook already did the work for you.

What is different about this new Like box? For one, it lacks the branding located need the footer.  You can also show off your FB cover photo inside the box.  Additionally, you can add the Call to Action button which can offer them your subscription or mobile app perks.

The new Like box also helps you modify details within it.  For instance, you can have your cover photo as the background of the said box.  It can look more sophisticated or more like “you” in the process.  You can also display a single pile of pictures for a cleaner look.  Or you can display the pictures of your mutual friends who have already liked your page.  Chances are, you magnetise more FB likes by having curious ‘friend of friends’ check out what their pals had liked.

To be able to customize the settings, you may need a little knowledge about CSS.  For example, you want to display your cover photo, just set the HTML5 data attribute data-hide-covertofalse within the DIV tag.  You then get to display the cover image of your FB account. Attributing false to data-show-facepilehides the row of pictures within the box; thus, you have a very simple, neat-looking like box.

Feel free to explore changes and customization to acquire something much of your taste than the boring default.

1. <div class=“fb-page”
2. data-href=“https://www.facebook.com/Allinallnews”
3. data-small-header=“false”
4. data-hide-cover=“false”
5. data-show-facepile=“true”
6. data-show-posts=“false”>
7. </div>
8.  
9. <div id=“fb-root”></div>
10.  
11. <style>
12.  
13. .fb–page, .fb–page:before, .fb–page:after {
14. border: 1px solid #ccc;
15. }
16.  
17. .fb–page:before, .fb–page:after {
18. content: “”;
19. position: absolute;
20. bottom: –3px;
21. left: 2px;
22. right: 2px;
23. height: 1px;
24. border–top: none
25. }
27. .fb–page:after {
28. left: 4px;
29. right: 4px;
30. bottom: –5px;
31. box–shadow: 0 0 2px #ccc
32. }
33. </style>
34.  
35. <script>
36. (function(d, s, id) {
37. var js, fjs = d.getElementsByTagName(s)[0];
38. if (d.getElementById(id)) return;
39. js = d.createElement(s); js.id = id;
40. js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4”;
41. fjs.parentNode.insertBefore(js, fjs);
42. }(document, ‘script’, ‘facebook-jssdk’));
43. </script>

Comments

comments