i've created a web platform where you can insert 'facebook embedded posts'.
Facebook Embedded Posts Docs
As you can see, i can show a post on my pages simply with
<div class="fb-post" data-href="{your-post-url}"></div>
With this tag, you can show a post in Desktop version: from 350px to 750px width.
The mobile view will be used automatically only on mobile devices. Docs says: "On mobile web, Embedded Posts automatically scale to the width of the container."
The problem is that i'd like to show these posts in their mobile version also on desktop view.
I've tried changing the browser's user agent, but probably i'm doing something wrong. Any idea?
Thanks!
Related
I've got a problem by using the Blogger API in PHP. When I publish an article with a picture on Blogger by using API, the picture appeared correctly on desktop version of my blog but no on mobile.
For example:
I send the following article on Blogger
<p><img src="https://cdn.pixabay.com/photo/2018/10/03/21/13/mushroom-3722395_960_720.jpg" /></p><p>Test</p>
On the index of my Blogger on Desktop, the pictures are correctly displayed:
Index Blogger on Desktop
I open the same page on mobile, and all pictures have disappeared:
Index Blogger on Mobile
I noticed that URL generated by Blogger are differents on mobile and desktop.
By inspecting element, the URL on mobile is exactly the same that I've sent thanks to the API (ie: https://cdn.pixabay.com/photo/2018/10/03/21/13/mushroom-3722395_960_720.jpg).
On desktop, the URL is totally different:
https://lh4.googleusercontent.com/proxy/...
If I edit the post directly on Blogger and if I replace the original URL (https://cdn.pixabay.com/photo/2018/10/03/21/13/mushroom-3722395_960_720.jpg) by the URL generated (https://lh4.googleusercontent.com/proxy/...), the picture appeared correctly on mobile!
Have you got an explanation? How I can display pictures on mobile by using this API?
Your blog uses two templates now one for desktop and other for mobile. The mobile template is one of old default blogger mobile templates which allow showing images that hosted on blogger only. Images hosted on blogger can be easily resized by change some values in image URL, that cannot be done with images hosted away off blogger.
Now you have to change mobile template and aplly the desktop template to cover both desktop and mobile.
If you share a definition page on Facebook from UrbanDictionary.com, the preview image is a screenshot of the definition itself. The same image appears on Google Images. The URL of the image is http://urbandictionary.com/render_definition.php?defid=[the same id as the post]
My question is, how do I make my website do that? I have a website with quotes and would like each quote to be indexed in Google Images as well as display as preview image when shared on social media. I use Wordpress, if that is relevant.
You should be able to use OpenGraph og:image to set an image URL for your page. You need to have a page that will render the image for you.
<meta content="<page_image_url>" property="og:image">
AFAIK, WordPress has a service called mShots that can take snapshots of your page for you. I couldn't find terms of service for it; but if you want to take that route, the following URL will generate a snapshot of http://example.com:
http://s.wordpress.com/mshots/v1/http://example.com/
I am working on http://www.ididthisfilm.com/lex_tmp2/thelist/ webpage. There are some videos , images and text on this page. I want to share these contect from this page to facebook , twitter and google plus. Right now I am using plugin add to any to share this. But with plugin i am only able to share title of the page and url of the page. I want to share Images and video and text individually. Please Help.
as per my knowledge I'm never come across any kind of plugin which will allow you to share specifically the page contents and not the full page itself. Whatever social share plugin present in WordPress free plugin repository, it will only allow you to share the page or post itself, not any element within it.
Beside the only content sharing plugin I've seen is this jQuery Pin It Button For Images (Link: https://wordpress.org/plugins/jquery-pin-it-button-for-images/) which will show you a pin button whenever you hover on any images present on your site.
If you want to share specific contents of your page/post, I will suggest you to copy the link and then use HootSuite to one click share to every social media.
Hope this helps.
As I know Facebook, twitter, Sprybirds and google+ uses the meta tags to share the content of a webpage. Facebook uses Open Graph. An example of meta tag uses by facebook for image is <meta property="og:image" content="your-image-path.jpg"> and by twitter <meta name="twitter:image:src" content="your-image-path.jpg">. You only can share contents on these sites which are available in meta tags.You can not share all the page. If you are using wordpress for website or blog then you can use available plugins like all-sociable and otherwise you have to create your own plugin.
If you want to create own buttons to share contents on These sites then you can do these things.
For Sprybirds
For Facebook
For Google Plus
For twitter
Where "PUT-PAGE-URL" is the url of that page from which you want to share the content on these sites. The content of this page will share on these sites.
Request If you are planning to put these buttons and my answer is helpfull for you please don't forget to also create our social networking website Sprybirds.com button on you website.
List item
I am using the following code to share images on facebook but when the dialog box is shown it does not show the image and once it is uploaded facebook just shows a link to image.
<a name="share" type="button" href="https://www.facebook.com/sharer.php?u=www.example.com/myimage" target="_blank">share</a>
This should work like this
<a href="http://www.facebook.com/sharer.php?s=100&p[title]=Our Site Title&p[url]=http://us.oursite.com/default.aspx&p[images][0]=http://www.history.malc.eu/globe.jpg&p[summary]=Our facebook description that is used on the FB share page." target="_blank">
Share this
</a>
EXAMPLE
Use the Facebook debug tool to see how Facebook processes the URL you're sharing.
The Facebook scraper will look for OpenGraph meta tags. You can reference the image you want as a thumbnail with the og:image and og:image:secure_url
Alternatively, if you wanted to upload the image to Facebook so that it goes into the user's album, you should check out How-To: Use the Graph API to Upload Photos to a User's Profile
To be more clear, you should not be sharing a link directly to the image, but rather to a page which has OpenGraph meta tags, one of which should link to the image.
Facebook doesn't support sharing of plain images, only hyperlinks can be shared. Try posting the same image's link on your profile as status. Facebook won't show you any thumbnail for it but just the link. To share a image on facebook, you have to somehow upload it -_-
From the social plugins docs the share initiates a callback from Facebook to the page you want to share. To affect what that shows you would have a page with meta tags (og:image, og:title and og:description) to affect what Facebook puts in the comment on the users timeline.
To show the image, you'd probably need a hosting 'page' that uses a thumbnail of your image in its meta data so that it appears in the users timeline correctly.
Facebook then polls this periodically. This is very similar to the like mechanism.
Make sure you use dont click on share more than once, after that you cant see additional changed you made for next 24 hours
Is there a widget to get all albums and photos from a facebook page and display them in a simple grid on my website?
Preferably, the widget would use PHP, JavaScript, or a combination.
I have a client who wants to display all the pictures found on their facebook business page on their website. I could manually download and upload each picture from facebook to his website, but I figured this would be a good place to use Facebook's api.
Here is a simple widget. Created it in about 3 hours so its not perfect but it works.
There is no CSS styling either so you can easily style it up.
https://github.com/zechdc/Facebook-Photo-Gallery-Widget
I'm assuming that you want the page to display images that are currently on the page, so when the photos are updated on the business page the website is also updated?
If so see this below tutorial:
http://www.codeofaninja.com/2011/06/display-facebook-photos-to-your-website.html
Looking at the reference to their Graph API it doesn't look to hard, all you need is a photo album id and you can get the photo album as a JSON object:
https://graph.facebook.com/99394368305 (Coca-Cola's wall photos)
You can try SlideshowFx plugin (http://www.oopstouch.com) proposed for Joomla and WordPress.
Initially based on Picasa, they port the plugin to Flickr and Facebook.
A lot of option available.
Check demo here: http://www.oopstouch.com
Regards,
Joël
I use this super duper quick solution. Just replace "{FACEBOOK-PAGE-ID-HERE}" with your facebook page id.
<iframe src="http://facebookgalleria.com/gallery.php?id={FACEBOOK-PAGE-ID-HERE}" scrolling="no" marginheight="0" frameborder="0" width="551" style="height: 769px;"></iframe>