Has anyone been able to format a Facebook feed in a Twitter Bootstrap site? I have a site that uses the Facebook feed that currently does not use Bootstrap. Curious to know what issues and advice anyone has about it. The feed is but so flexible; I've had issues with fitting it in the current site.
Thanks in advance.
Got some bad news for you. Most Facebook embeddable items are <iframe>'s. That means Facebook is in complete control of the look, feel and behavior of the content. Because of the same origin policy you can't even use Javascript to attempt to force styles upon the <iframe>.
Facebook does give you some basic options like width, height and color scheme when you embed it. If you're looking for 100% control and customization you probably want to look into the Graph API instead.
Related
I make a website and I try to share it via Line chat. It seems that Line chat has a feature to display web preview like Facebook does. My question is, how to control which image and description that will be shown in Line chat? I know for Facebook but I never know in Line. I have tried googling around but I don't know the keyword for it. The google result is not what I expected.
Thank you for your help.
I think what you are searching is using HTML Meta Tags on sites. Social Media such as facebook, twitter, etc. usually reads index.html's <meta> tags to provide a preview about the sites. You may learn more about meta tags here.
I'm writing an app which involves letting users to share comments on a website, which has a comment form with Google's reCAPTCHA embeded. I would like to load this page via HTTP and display CAPTCHA within my app, so that user can post comments from my app. Is it easy to implement or should I rather try other solution?
EDIT:
I've red reCAPTCHA developer guide. If I would like to embed captcha inside my form, I'd need to insert div element with a proper class, and make a ajax request in order to render captcha. This call would insert an iframe into a given div. What I need is to know how to access that iframe's content without using AJAX.
Turns out we are not supposed to do that kind of tricks with reCAPTCHA.
There is no support for that in API. It seems that it was part of Google's design to prevent that kind of usage.
The only walkaround I could come up with is to implement a WebView widget with JavaScript support, get website via http, and load it into this webview, centering this view around the form we want to post.
It seems like a lot of work though, thus I'm going to simply skip this, if someone successfuly manages to figure it out I'd appreciate a hint :)
(newbie=me) On my wordpress website I have video1 and I want to put it in two places on the website because it makes sense from a users perspective.
Video1 is embeded using html5; its and seo embed from Wistia. I want to put copy_video1 on a different page with text that is also different and useful. The thumbnail/frame-of-video used for copy_video1 is different than video1 making it more relevant to its page.
I thought I would use an iframe for copy_video1 since I had read google doesn't index iframes?. I thought to go the extra mile and use best practices that I should use canonical in the iframe to point to video1. Is this correct? What does the syntax look like for an iframe and video with canonical in it?
Is this the same method I would use for the video if an external site wanted to embed my video?
I guess this is also and seo question, but mostly to code it correctly for indexing.
THis is for a small non-profit site...
Thanks for you help!
I cannot think of many instances where you would have to duplicate a video on the same website, so my recommendation is to just have one and use HTML5's poster attribute. You would just set it to a different image on the other page. This should work, should replace your first line of the :
<video controls poster="/images/othervideo1.jpg">
I'm trying to add css styling to Facebook Like Box XFBML file but it doesn't take the stylesheet the regular way – its own stylesheet comes after yours. So I did some search and found posts that said to add css="youstylesheetlink.css" to the fb:like-box like this:
<fb:like-box href="https://www.facebook.com/example" width="496" height="120" show_faces="true" border_color="" stream="false" header="false" css="http://example.com/css/style.css?2"></fb:like-box>
But no matter what I try it doesn't take the stylesheet. Can anybody guide me how I can achieve this?
Thank you.
Facebook used to allow you to pass custom css to their like box, and that is why you see examples of it happening. But they stopped allowing you to do this for now.
If you could do it, it would be documented here.
IMHO, you cannot tinker with Facebook's corporate branding... they want a consistent user experience everywhere on the Internet, otherwise, you'll have people not trusting things that look like homemade "like" boxes.
Also see this...
Embedded Facebook Like-Box won't let me style it. Why?
Unless your website happens to have the same matching protocol, domain and port as the Facebook iframe, you can not modify it because of Same Origin Policy.
I'm developing a website and I decided to use Facebook comments to provide commentable behaviour. But, unfortunately, I met some problems.
While trying to customize look of news page, ex. http://buchman.pcspace.pl/aktualnosci/ept-snowfest-podsumowanie-czwartego-dnia.html, I am not able to apply CSS to view: everything appears correctly in HTML source, but doesn't change view.
What's wrong?
According to this blog post the new fb:comments no longer supports custom CSS.
After log research I noticed that while loading fb frame, it doesn't use css given as param.
It causes all parts don't work..