Facebook Like Box (Page plugin) not working

Tag: html,facebook,plugins,twitter-bootstrap-3,facebook-javascript-sdk

I've tried adding a facebook plugin to my page but it doesn't appear correctly. What i've done so far was going to the Facebook Developpers for the new Page Plugin, included correctly (i hope) the SDK, included the script and pasted the html code the generator gave me.

But my Page Plugin is not working correctly, what i get is a simple orange block with a simple hyperlink redirecting to my fb page. I couldn't find any help since they changed the possibility to switch between html5 xfbml and iframe. I thought it would be a css issue so i tried editing my div containing the Page plugin to disable some css proprieties but it didn't change a thing. If i try adding an iframe code from another site on mine, it works fine, for example.

I really don't know where my issue comes from, i hope someone could help me !

Best How To :

HI JACRAC I FOUND THE SOLUTION IT TAKE ME SOMETIMES TO TEST IT AND IT WORKS THIS IS THE CODE YOU MUST ADD IN YOUR BLOG :

<div id="fbpage">
    <div id="u_0_18"><div fb-iframe-plugin-query="app_id=114545895322903&amp;container_width=588&amp;height=350&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2Fisccef&amp;locale=fr_FR&amp;sdk=joey&amp;show_facepile=true&amp;show_posts=false&amp;width=280" fb-xfbml-state="rendered" class="fb-page fb_iframe_widget" data-show-posts="false" data-show-facepile="true" data-hide-cover="false" data-height="350" data-width="280" data-href="https://www.facebook.com/isccef"><span style="vertical-align: bottom; width: 280px; height: 191px;"><iframe class="" src="https://www.facebook.com/v2.3/plugins/page.php?app_id=114545895322903&amp;channel=https%3A%2F%2Fs-static.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FQrU_tEEWym9.js%3Fversion%3D41%23cb%3Df2b104c9e204ff8%26domain%3Ddevelopers.facebook.com%26origin%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Ffad5f0e18965b4%26relation%3Dparent.parent&amp;container_width=588&amp;height=350&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2Fisccef&amp;locale=fr_FR&amp;sdk=joey&amp;show_facepile=true&amp;show_posts=false&amp;width=280" style="border: medium none; visibility: visible; width: 280px; height: 191px;" title="fb:page Facebook Social Plugin" scrolling="no" allowfullscreen="true" allowtransparency="true" name="f3d121ac9c81b02" frameborder="0" height="350px" width="280px"></iframe></span></div></div>
</div>

name your div you wana add the code into it also add this css code just to take control of your div , i named the dev fbpage :

#fbpage{
width: 280px;
height: 350px;
background-color: #e5e5e5;
 }

if you need any other help send me msg , have fun

How to remove all the borders of a selectbox?

jquery,html,css,drop-down-menu

Firefox has some problems with select-background. You can try this code - it'll remove the arrow, and then you can add a background image with your arrow (I took an icon from google search, just put you icon instead) I get this on FireFox (You can use any arrow icon...

show div only when printing

javascript,html,css

You need some css for that #printOnly { display : none; } @media print { #printOnly { display : block; } } ...

Adding horizontal space between 2 buttons using javascript

javascript,jquery,html,css

Use CSS instead of Javascript. Anyway, you're adding a class to all buttons. Use following code: .submitButton { margin: 0 10px; } ...

Background-image style with JS not working in ie9

javascript,jquery,html,internet-explorer

Your call of setTimeout fails in any browser, but in IE9 with an exception(what stops the further script-execution). It's a matter of time. At the moment when you call var timer = setTimeout(slideshow, 8000); slideshow is undefined , and undefined is not a valid argument for setTimeout. Wrap the call...

bootstrap - dynamically changing jumbotron background image

javascript,jquery,html,css,bootstrap

You have some syntax errors otherwise everything is good!! keep url inside quotes as below: $('.jumbotron').css('background-image','url(/path/to/new/image)'); ...

Target next instance of an element/div

javascript,jquery,html

nextAll and first: $(this).nextAll('.hidden').first().slideToggle(...); This question has more about this: Efficient, concise way to find next matching sibling?...

tag in HAML

html,css,haml

HAML equivalent is %i{class:"fa fa-search"} You can look at http://codepen.io/anon/pen/BNwbEP and see the compiled view ...

Detect when the jQuery UI slider is being moved?

jquery,html,css,jquery-ui

You can use 3-Events: - Start (Start-Sliding) -> Stop Player - End (End-Sliding) -> Start Player - Slide (Sliding) -> Move Player-Position $("#range").slider({ range: "min", start: function(event, ui) { player.pauseVideo(); }, stop: function(event, ui) { player.playVideo(); }, slide: function(event, ui) { player.seekTo(ui.value,true); return false; } }); Demo: http://codepen.io/anon/pen/EjwMGV...

Dynamically select from a dynamically generated dropdown

php,html,select,drop-down-menu

It is because you aren't ending the value attribute, so your selected option becomes <option value="optionvalueselected" -- 'optionvalue' being the value of your selected option, and 'selected' being the attribute you want to set, but won't be set because you never ended value The following should work: <select name="course_id" id="course_id">...

Fancybox thumbnail is not working

javascript,jquery,html,css,fancybox

You need to add absolute URL paths in external resources option, not relative. See the Console errors in Firebug. Example: http://fancyapps.com/fancybox/source/jquery.fancybox.js instead of just jquery.fancybox.js Check this: JSFiddle, I forked your JSfiddle and edited the external sources. ...

Get info from dynamic/growing form

javascript,jquery,html

Something like this? But adding it into the addUser function as Super Hirnet says, will be more performant. var divs = document.querySelector('#utilizadores').childNodes, users = []; Array.slice.call(divs).forEach(function (node, index) { users.push({ "name" : divs[index].getElementById('nomeUtilizador' + (index + 1)).value }); }); ...

Text-decoration/CSS causing text to move

html,css,wordpress

This is normal behaviour: Bold text is wider, thus repositioning the centered text around it. You could go for a fixed width on all links to prevent this: .main-navigation a { text-decoration: none; min-width: 6em; display: inline-block; } ...

How to make background body overlay when use twitter-bootstrap popover?

html,css,twitter-bootstrap

Posting some more code would be nice. This should work. Use some jQuery or AngularJs or any other framework to make the .overlay initially hidden, then to make it visible when needed. If you need help, comment. If it helps, +1. EDIT $(function() { $('[data-toggle="popover"]').popover({ placement: 'bottom' }); $("#buttonright").click(function() {...

Agree to my privacy policy when sign up to my site via facebook

facebook,privacy,policy

Users don’t automatically agree to your site’s policy, when the use your FB app to login. But you can add your site’s policy URL as your app’s policy URL in your app settings, then it will show up as link on the bottom of the login dialog. I think that...

Click on link next link should be display on same page

javascript,php,jquery,html,css3

Ok, so i tried to decypher what you meant with your Question. To Clarify: He has this one page setup. inside the div Our Project, there are two Buttons or links Visit more. When clicked, he wants the About Section to be shown. All in all it is impossible for...

HTML elements in Angular bindings expression

html,angularjs

You could use ng-show, it will show the paragraph if employee.firstname is null. <tr ng-repeat="employee in employees"> <td>{{employee.firstname }}<p ng-show="!employee.firstname" style="color:red">No name</p></td> <td>{{employee.job}}</td> </tr> ...

Automatically calling server side class without

javascript,html,ajax

Trigger the click event like this: $('._repLikeMore').trigger('click'); ...

How to use template within Django template?

python,html,django,templates,django-1.4

You can use the include tag in order to supply the included template with a consistent variable name: For example: parent.html <div class="row"> <div class="col-md-12 col-lg-12 block block-color-1"> {% include 'templates/child.html' with list_item=mylist.0 t=50 only %} </div> </div> child.html {{ list_item.text|truncatewords:t }} UPDATE: As spectras recommended, you can use the...

HTML CSS Two 2-column tables side by side with same height and width

html,css

Okay so I have made a few assumptions to create this solution. Firstly, I'm guessing that as you are setting the headers of the tables as width:200px; that the width of the two columns are 100px. (This can be changed if need be). Secondly, these tables are not floated. This...

why i don't get return value javascript

javascript,jquery,html,json,html5

the first "A" in AJAX stands for "Asynchronous" that means, it is not executed right after it has been called. So you never get the value. Maybe you could first, get the os list and then output what you need, like this: function createCheckBoxPlatform(myDatas) { $.ajax({ url: "/QRCNew/GetOS", type: "post",...

change css dynamically by selecting dropdown list item

jquery,html,css,drop-down-menu

I have created a working example for you. You can find the jsfiddle in here This piece of code uses JQuery. (Remember, for these type of tasks, JQuery is your friend =] ). HTML <select id="dropDownMenu"> <option value="option1" selected="selected">yes</option> <option value="option2">no</option> </select> <br> <img id="picture" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/220px-House_Sparrow_mar08.jpg"> Javascript function changeStyle(){...

Div with the form of a pencil [duplicate]

html,css,css-shapes

.pencil{ width: 200px; height: 40px; border: 1px solid #000; position: relative; } .pencil:before{ content: ''; display: block; margin: 10px 0; width: 100%; height: 10px; border: 6px solid #000; border-width: 6px 0; } .pencil:after{ content: ''; display: block; height: 10px; border: 1px solid #000; border-width: 1px 1px 0 0; width:...

add value to existing class in jQuery

javascript,jquery,html,css

Use attr() like $(document).ready(function() { $('.project-open').hide(); $('.hackandfly, .scanergy, .connecting-food').click(function() { $slidah = $($(this).attr('class')+'-open'); $slidah.slideToggle(); $('div.project-open').not($slidah).slideUp(); }); }); However, the above will fail if you have multiple classes. A workaround would be to add data-* to the clicked elements like <div class="hackandfly other-class" data-class-target="hackandfly-open"></div> and then $(document).ready(function() { $('.project-open').hide();...

Centering navbar pills vertically within the navbar using flexbox

html,css,twitter-bootstrap,flexbox

Set display: flex for the <ul class="nav">, not for items. Also use align-items: center for vertical aligment: .nav { height: 70px; display: flex; justify-content: center; align-items: center; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li...

Facebook Android API asks for additional permission

android,facebook,facebook-graph-api

Use the loginManager to add more permission. you can add it on click button or on create view or fragment LoginManager.getInstance().logInWithReadPermissions( fragmentOrActivity, Arrays.asList("user_friends")); You can also get AccessToken via following if needed after getting new permission AccessToken.getCurrentAccessToken() ...

Top header 100% of screen, but body only 70%?

html,css

Put your header inside the body. And don't apply styles to the body but use a container. + You should have one single header in your page. <body> <header> <nav><ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Solutions & Services</a> <ul> <li><a href="#">Internet</a></li> <li><a href="#">Networking</a></li> <li><a href="#">Website</a></li> <li><a href="#">Home...

Iframe does not show scrollbar

html,css,angularjs,iframe,ionic

You have hidden scrollbars in ionic.app.css: ::-webkit-scrollbar { display: none; } I don't know if it is possible to override this style so probably you have to remove it. Similar question....

multiple slidershows on one site?

javascript,html

Try a class: var image1 = new Image(); image1.src = "bilder/tfb_g/slide1.jpg"; var image2 = new Image(); image2.src = "bilder/tfb_g/slide2.jpg"; var image3 = new Image(); image3.src = "bilder/tfb_g/slide3.jpg"; SlideShow = function (ele) { this.step = 1; this.element = ele; this.Move = function () { this.element.src = eval('image' + this.step + '.src');...

Select n elements from hover event

javascript,html,css

Use the immediate sibling selector (+) .item:hover + .item, .item:hover + .item + .item { background-color: green; } Example: http://codepen.io/anon/pen/jPGoYw...

submitting form then showing loading image by javascript

javascript,html

Let suppose on button click you are calling ajax method <button onclick="LoadData();"/> before ajax call show image and onComplete ajax method hide this image function LoadData(){ $("#loading-image").show(); $.ajax({ url: yourURL, cache: false, success: function(html){ $("Your div id").append(html); }, complete: function(){ $("#loading-image").hide(); } }); } ...

Get row index from row id and table id

javascript,html

This will give you the nearest row ID of a selected element. var row_id = $(this).closest('tr').index() In reply to your comment (again): http://jsfiddle.net/vcLvxycv/4/ This is independent of the row ID, will return the index as requested! OK! Final edit I think I know what you mean. In the input box...

How do I display my mysql table column headers in my php/html output?

php,html,mysql,table,data

Note: You can just make a single file out of it to achieve your wanted output Use mysql_real_escape_string() to sanitize the passed-on value to prevent SQL injections You should use mysqli_* instead of the deprecated mysql_* API Form them in a single file like this (display.php): <html> <form method="post" name="display"...

How to set DIV's width based on CSS indexes

html,css

If I understand this correctly,all you need to do is change your CSS to the following: .sintesi-offerta > .block:nth-child(3n+1) { width: 40%; } .sintesi-offerta > .block:nth-child(3n+2) { width: 20%; } .sintesi-offerta > .block:nth-child(3n+3) { width: 40%; } Side note: your br tags should be <br/> for jsfiddle to interpret them...

CSS :hover that shows more than one image

html,css,css3

Okay so I have got a probable solution, the catch is, you won't be able to use img tags. You can use images as background-image and animate background on :hover NOTE: Fade in effect can be removed by playing with animation. HTML <div class="image-box"></div> CSS .image-box { height: 200px; width:...

show/hide an overflow div on anchor

javascript,jquery,html,scroll

I've just updated your jsfiddle: http://jsfiddle.net/0sq2rfcx/8/ This should work on all browsers included IE7 $('#b1').click(function () { $('#result').show(); $("#result").animate({ scrollTop:$('#a1').parent().scrollTop() + $('#a1').offset().top - $('#a1').parent().offset().top}, "slow"); }); $('#b2').click(function () { $('#result').show(); $("#result").animate({ scrollTop:$('#a2').parent().scrollTop() + $('#a2').offset().top - $('#a2').parent().offset().top}, "slow"); }); $('#b3').click(function () { $('#result').show();...

Setting radio button checked true on button click

javascript,jquery,html

Here is an example : http://jsfiddle.net/xhhLja7m/ $(".choice-option").click(function() { $(this).find('input[type=radio]').prop("checked", "true"); }) ...

Binding Checkbox to td element

javascript,jquery,html

Since you are adding checkbox dynamically to the table you can attach clickevent to it as below: While you prepend add one more property called class to checkbox $(".sth:nth-child(5)").prepend('<input type="checkbox" class="chkadd" name="mailcheck" id="cbe">'); Adding change event to dynamically added checkbox $(document).on('change','.chkadd',function(){ //do required stuffs here }); instead of $(document) you...

If checkbox checked, instantly alert

javascript,html,event-handling

Call the validate function on change of the checkbox state. <input type="checkbox" name="LetterNeed" id="LetterNeed" onchange="return validate()">Not important</span> // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ OR document.getElementById('LetterNeed').addEventListener('change', validate); DEMO...

Dynamically resize side-by-side images with different dimensions to the same height

javascript,html,css,image

If it's responsive, use percentage heights and widths: html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0; padding: 0; } div.container { width: 100%; height: 100%; white-space: nowrap; } div.container img { max-height: 100%; } <div class="container"> <img src="http://i.imgur.com/g0XwGQp.jpg" /> <img src="http://i.imgur.com/sFNj4bs.jpg" /> </div>...

How to remove unmatched row in html table using jquery

jquery,html

Try this solution: var notrem = []; $('#Table1 tr').each(function(){ var currentRowHTML = $(this).find("td:first").html(); $('#Table2 tr').each(function(i){ var c= $(this).find("td:first").html(); if(c == currentRowHTML ){ notrem.push(i); } }); }); $('#Table2 tr').each(function(i){ if(notrem.indexOf(i) < 0){ $(this).remove(); } }); Explanation: First gather all indexes of Table2 that are equal and are not to be removed....

Pure Css transition slide down panel not working

html,css,css3

Height of #StayOpen is 0px. Also you have to check CSS rule priorities. Your code might look like this: #StayOpen { height: 100%; } #StayOpen:hover #AccomodationPanel { height:300px !important; } Look at this fiddle. Transition In your question you've mentioned about transition. You can add it in #AccomodationPanel (updated example):...

Button not center align in Safari

html,css,safari,center-align

if you don't set a width for btn: parent - text-align: center use for button - display-inline: block; instead display: block .wrap { text-align: center; } .center-block { display: inline-block; } <div class="wrap"> <input value="Button" class="center-block" type="submit" /> </div> ...

Unable to display SQLite data as listview using phonegap

javascript,html,sqlite,cordova

You made a mistake: you used result instead of res: tx.executeSql("SELECT (date) FROM time", [], function (tx, res) { var len = result.rows.length; // <- should be res if (len > 0) { for (var i = 0; i < len; i++) { var a = results.rows.item(i)['date']; // <- should...

Get elements containing text from array

javascript,jquery,html,arrays,contains

You can use :contains selector. I think you meant either one of those values, in that case var arr = ['bat', 'ball']; var selectors = arr.map(function(val) { return ':contains(' + val + ')' }); var $lis = $('ul li').filter(selectors.join()); $lis.css('color', 'red') <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li>...

Using Graph API Explorer gets friends list but my own app doesn't . (Graph API Explorer token v.s App Token)

facebook,api,facebook-graph-api

The friends you see in the response have used the Graph API Explorer as well. In order for a person to show up in one person's friend list, both people must have decided to share their list of friends with your app and not disabled that permission during login. Also...

Website showing differently in windows xp and mobile

html,css

The background colour changes when the browser width is less than 1200px wide. You have specified the background-color for the selector .td-grid-wrap within a media query: What you need to do is move the background-color property to the non-media-queried selector .td-grid-wrap or perhaps .td-page-wrap. ...

copy last column of one table to another table based on some condition

jquery,html

I modified your code based on your requirement.please check it once. rowCount = $('#table3 tr:last').index() + 1; table4rowCount = $('#table3 tr:last').index() + 1; row = rowCount + 1; var pivot_1 = 1001; var loop = 0 $("#table4 tr:eq(0)").find("th:last").after("<th>Total_col</th>"); for(i=1;i<row; i++) { var d = $('#table3 tr:eq(' + i + ')').find("td:eq(1)").text();...

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds

html,css,css3

table{border-collapse:collapse;width:100%} table tr td{padding:5px;border:1px solid #000; background:#FFF } table tr:hover td{padding:5px;border:1px solid #000; background:transparent } table{ background:...

jQuery click open one dropdown

javascript,jquery,html

You need to keep the plus before the menu: <a href="#" class="menu-trigger">+</a> <ul class="menu">  </ul> <a href="#" class="menu-trigger">+</a> <ul class="menu">  </ul> And in the jQuery, you need to give only for the plus, you can also make the plus as minus: $(".menu-trigger").click(function () {...

How do I retain search engine accessibility when loading external file into html

javascript,jquery,html,seo,cross-platform

Well the problem is that at first, the section you're about to insert data in is blank, which means that sharing this page on Facebook for example will result in just a blank box. So, what you want to achieve is a way to run that javascript before crawling the...