Is it possible to personalize the Facebook like box appearance?

Is there a way to modify the number of feeds and enable auto scroll feature in a Facebook likebox? I've been experimenting with the code snippet below but have hit a roadblock.

<div id="fb-root"></div><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src="//connect.facebook.net/en_IN/sdk.js#xfbml=1&appId=453991991316939&version=v2.0";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

I've attempted various methods to resize the canvas as suggested on different websites with no luck so far. Any suggestions on how to customize this further or any existing plugins available for this purpose?

javascriptjquerycsshtmlfacebook-likebox

Answer №1

Ensure to utilize the provided CSS code along with the Facebook Like Box code by copying and pasting it onto your webpage.
Remember to modify the URL within the iframe section *************** to match your specific Facebook URL.

    <style type="text/css">
     .f-bookMain {
        background-color:#E1E1E1; 
        width:320px; 
        border:1px solid #BCBCBC;
        padding:15px 0 15px 15px;
        height:280px;
      }
     .f-bookInnerBlock { 
        overflow:hidden;
         height:280px;
         border:1px solid #aaa;
      }
    </style>

    <div class="f-bookMain">
    <div class="f-bookInnerBlock">

    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F***************&amp;
    width=300&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;
    show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" 
    allowTransparency="true">
    </iframe>

    </div>
    </div>

    <div id="fb-root"></div>
    <script>
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>

Remember to change the URL in the iframe *************** to correspond with your own Facebook URL.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Mean stack application is throwing an error message: "user.comparePassword is not

This section contains my user models in the file named "user.js". var mongoose = require('mongoose'); var bcrypt = require('bcryptjs'); let emailLengthChecker = (email) => { if (!email) { return false; } else { if (emai ...

javascriptnode.jsmongodb

implement a dropdown feature for a vertical menu with the help of Jquery

Struggling to implement a dropdown feature on a vertical navigation using Jquery. The HTML includes a nav section with 1st level list items and nested li's for second level menu items. On clicking the 1st level li, the intention is to toggle SHOW/HID ...

javascriptjqueryhtmlcssdrop-down-menu

What is the best way to transfer data from one function to another file in React without directly calling the component or using props?

filename - Header.jsx import { useEffect, useState } from 'react' import { getValue } from './Input' import TextField from '@mui/material/TextField'; export const Header = () => { const [search, setSearch] = useState( ...

javascripthtmlreactjsreact-props

When using jQuery autocomplete, the selected option does not return a value

Here's a question for you ... I have a function for autocompleting text and upon selection, I want to return 2 values from the function. This is the code snippet: function autoComp(field, srt, file, act) { $( field ).autocomplete({ ...

jqueryfunctionreturn-valuejquery-autocomplete

What issue is arising from nesting jQuery for loops within another loop?

There seems to be an issue with wrapping the two "for loops" inside the first loop, although they work fine individually. Is there anyone who can point out what's wrong with them? jQuery('#rooms').change(function () { for (var a = 1; ...

jqueryloops

The mobile menu toggle functionality is malfunctioning on actual mobile devices, however, it is operational when tested on various mobile sim

Recently, I noticed that on , the menu collapses into a hamburger icon for mobile. However, when tapping on it on my phone and other devices, nothing happens. Surprisingly, it works perfectly fine when clicking on it in mobile simulators within Google Chro ...

csswordpressmobilemenuhamburger-menu

How can one transform a json object into a json string and leverage its functionalities?

I recently encountered an issue with a JSON object that contains a function: var thread = { title: "my title", delete: function() { alert("deleted"); } }; thread.delete(); // alerted "deleted" thread_json = JSON.encode(thread); // co ...

javascriptjsonmootools

Presenting a trio of distinct tables each accompanied by its own unique button option

I am attempting to create a functionality where there are 3 buttons and when a user clicks on one of them, it shows the corresponding table while hiding the other two. I have experimented with using getElementById to manipulate the display property of the ...

javascripthtml

Rails encountering issues with multiple simultaneous PUT calls using AJAX

Within my Rails application, I have implemented multiple forms on a single page that are all linked to the same controller and association. Using jQuery, I have created a submit button that allows me to send all of these forms simultaneously through AJAX. ...

jqueryruby-on-railsrubyajax

Connecting elements within an object using VueJs

Within my object "info_login," I gather account information: async created() { try { const res = await axios.get(inscriptionURL); this.comptes = res.data; this.comptes.forEach(element => { const data = {'pseudo': ...

javascriptapivue.jsauthenticationback

Achieving full page height with div, iframe, and footer components

Feeling a bit stuck with this problem and hoping for some help. I did some searching on SO but couldn't find a solution that fits my needs. Below is a snippet of the markup I'm working with: <div id="wrapper"> <div id="content"> ...

csshtmliframe

How can I utilize npm with the original source code instead of minified or bundled code?

I am looking to access npm and JavaScript (or TypeScript) 3rd party libraries directly from the source code. Similar to how I can make changes in Python libraries by going into their source code, I want to have the same capability with my JavaScript depen ...

javascriptnode.jstypescriptnpm

Runtime Error: Invalid source property detected - Firebase and Next.js collaboration issue

Currently, I am developing a Next.js application that retrieves data from a Firestore database. The database connection has been successfully established, and the data is populating the app. However, I am facing an issue with displaying the image {marketpl ...

javascriptfirebasegoogle-cloud-firestorenext.js

Issue encountered while appending new rows to the tbody of a table

I'm encountering an issue with the append function within a for loop in my code. The string being passed to the function isn't parsing correctly and results in an error. How can I go about resolving this problem? Thanks! function getDetailPopUp ...

javascriptjqueryhtml

What is the best way to separate one dropdown area from another dropdown area?

I have two dropdown menus where, when an option with the value "other" is clicked, it generates a text area just below the dropdown menu. Both sections are functioning correctly, but I had to create separate parent wrappers for each in order to do so. How ...

javascriptjqueryhtmldynamic

What could be the reason for the failure of my nested form?

After following this tutorial to create a nested form, I encountered an error when trying to view the edit form instead of creating a new object. The error message displayed was: undefined local variable or method `roles_form' for #<#:0x007f7c48 ...

jqueryruby-on-railsruby

I am looking to extract specific data from a webpage using Webscraping and page_soup.findAll, but I am unsure of the correct method to do

I'm currently working on a web scraping project and I'm trying to extract the keywords from a webpage. I attempted to use page_soup.findAll() for extraction, but I'm unsure of what to include between the parentheses to get the desired inform ...

pythonhtmlweb-scrapingbeautifulsoup

The Angular ViewportScroller feature appears to be malfunctioning in the latest release of Angular,

TestComponent.ts export class TestComponent implements OnInit, AfterViewInit { constructor( private scroller: ViewportScroller, ) {} scrollToAnchor() { this.scroller.scrollToAnchor('123456789'); } } HTM ...

javascriptangularangular14

Guide to choosing and unchoosing a div / button using angularJs

I am attempting to create a functionality where items are displayed in a div instead of a list. When an item is clicked, the background color of the div changes and the item is added to a column. Clicking on the item again will revert it back to its origin ...

javascriptjqueryhtmlcssangularjs

Minimization tools for compressing CSS and JavaScript documents

After deploying my application, I noticed that the loading time has significantly increased. Is there a way to compress CSS and JS files? I include only the necessary code in each page and occasionally use minified versions of JS. Thank you. ...

javascriptcsscompressionminifyjscompress