Skip to main content

How to Customize the Facebook Page Plugin for Websites

By Anonymous
The old Like box for Facebook Pages has been deprecated and replaced with a new Page Plugin. If you have not manually upgraded the embed code for Like box on your website yet, no worries as Facebook has automatically migrated all the Like boxes using the old embed code to the new Page Plugin.
Unlike the previous Like box that carried too much Facebook branding, the new Facebook Page plugin is cleaner without any branding. You can now display the cover photo of your Facebook Page inside the Like box. You can also add a “Call to Action” button that will redirect people to your email newsletter or prompt them to install your mobile app and so on.
The other difference that you can now only display a single row of fan pictures inside the Page Plugin. Why does this matter? The pile shows profile pictures of mutual friends who have liked your Facebook Page and thus, when a casual visitor sees a familiar face inside that pile, it is likely to increase their interest in your website.
What you see here are a list of customization options now available inside the Facebook Page plugin. You can choose to have a simple Like box with just your logo and like button or you can have a complete box with cover photos as well.


Customizing this Facebook Page plugin is simple as detailed in the official documentation. For instance, if you would not like to show a cover photo, set the HTML5 data attribute data-hide-cover to false in the DIV tag. Setting data-show-facepile to false will hide the row of pictures.
Similarly, you can attach styles to the .fb-page class to customize the outer of the Facebook Plugin. For instance, if you like the steps style I use here with the Facebook box at didigitalidea.blogspot.in, this is the underlying CSS code.
  1. <div class="fb-page"
  2. data-href="https://www.facebook.com/pages/Digital-Idea/490795004417098"
  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

Post a Comment

Popular posts from this blog

The Best Google Font Combinations That Look Good Together

By
Whether you are creating a website, writing your resume or designing a presentation, the fonts or typeface you choose can make a notable difference. The Google Fonts directory offers a myriad of choices but how do you pick the correct font for your digital projects? Should you go for Serif fonts or Sans Serif or a combination of serifs and sans serifs? Typography is an art and, with thousands of fonts available, it is obviously difficult for non-designers to find that perfect font combination. Need help? Here are some useful font pairing websites where type masters have already done the hard work and all you can do is follow their recommendations to pick the most elegant and gorgeous Google fonts combination for your web and print projects. 1.  Beautiful Web Type  ( hellohappy.org ) – Chad Mazzola has created a beautiful showcase of high-quality typefaces from the Google Fonts website. You’ll discover some creative usage of fonts here though they haven’t updated ...
1 comment
Read more

A Wireless USB Stick that Expands your Phone’s Storage (And a Giveaway)

By
W hat do you do when your mobile phone has limited storage and there’s no option to add an external SD card? How do you carry all your videos and documents where there’s not an iota of space left on the device? Yes, you do have cloud-based services like Dropbox or Google Drive that add virtually unlimited storage to your phone but you’ve to be connected to the Internet to access your files. This week I’ve been testing a wireless USB stick from Sandisk that adds storage to your phones and tablets much like a regular USB drive. To get started, you plug the USB device into your laptop or desktop computer and let it charge for about an hour or two. You can also transfer the files to the stick from the computer through Windows Explorer or Finder on Mac. Once the device is charged, you tap the little power button on the stick to turn it on. Now install the Sandisk Connect app on your mobile phone, go to WiFi settings on your phone and connect to the Wi-Fi hotspot created by the...
Post a Comment
Read more

How to Secure Your Wireless (Wi-Fi) Home Network

By
Wireless Networking (Wi-Fi) has made it so easy for anyone to use Internet on your computer, mobile phones, tablets and other wireless devices anywhere in the house without the clutter of cables. With traditional wired networks, it is extremely difficult for someone to steal your bandwidth but the big problem with wireless signals is that others can access the Internet using your broadband connection even while they are in a neighboring building or sitting in a car that’s parked outside your apartment. This practice, also known as piggybacking, is bad for three reasons: It will increase your monthly Internet bill especially when you have to pay per byte of data transfer. It will decrease your Internet access speed since you are now sharing the same internet connection with other users. It can create a security hazard* as others may hack your computers and access your personal files through your own wireless network. [*] What do the bad guys use  – There ha...
Post a Comment
Read more