I have my ".com" web page and a "facebook page". When sharing a link from my "facebook page" and someone opens the link in the mobile it opens chrome bwoser and shows the content.
However, I notice that some links from other facebooks pages when open only slides from right to left and shows content.
I have tried to look it but on how to achieve this same effect for my page but I have found nothing.
Can someone point me to the right direction on how to do this? Tutorials, documentation or any information about it. Image description
The following example illustrates the high-level structure of an Instant Article. For more detail on each element, refer to the specific details in the Elements section of this document.
<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
<head>
<meta charset="utf-8">
<link rel="canonical" href="http://example.com/article.html">
<meta property="op:markup_version" content="v1.0">
</head>
<body>
<article>
<header>
<!-- The title and subtitle shown in your Instant Article -->
<h1>Article Title</h1>
<h2>Article Subtitle</h2>
<!-- The date and time when your article was originally published -->
<time class="op-published" datetime="2014-11-11T04:44:16Z">November 11th, 4:44 PM</time>
<!-- The date and time when your article was last updated -->
<time class="op-modified" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>
<!-- The authors of your article -->
<address>
<a rel="facebook" href="http://facebook.com/brandon.diamond">Brandon Diamond</a>
Brandon is an avid zombie hunter.
</address>
<address>
<a>TR Vishwanath</a>
Vish is a scholar and a gentleman.
</address>
<!-- The cover image shown inside your article -->
<figure>
<img src="http://example.com/path/to/img.jpg" />
<figcaption>This image is amazing</figcaption>
</figure>
<!-- A kicker for your article -->
<h3 class="op-kicker">
This is a kicker
</h3>
</header>
<!-- Article body goes here -->
<!-- Body text for your article -->
<p> Article content </p>
<!-- A video within your article -->
<figure>
<video>
<source src="http://example.com/path/to/video.mp4" type="video/mp4" />
</video>
</figure>
<!-- An ad within your article -->
<figure class="op-ad">
<iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="60" width="320"></iframe>
</figure>
<!-- Analytics code for your article -->
<figure class="op-tracker">
<iframe src="" hidden></iframe>
</figure>
<footer>
<!-- Credits for your article -->
<aside>Acknowledgements</aside>
<!-- Copyright details for your article -->
<small>Legal notes</small>
</footer>
</article>
Also, you can have a look at this tutorial - https://developers.facebook.com/docs/instant-articles/faq/
Related
I am creating Facebook instant article under Development Articles with its sample code. I have configured the canonical url properly and my code is as below
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="http://fb.clinate.com">
<meta property="op:markup_version" content="v1.0">
</head>
<body>
<article>
<header>
<!-- The title and subtitle shown in your Instant Article -->
<h1>Article Title</h1>
<h2>Article Subtitle</h2>
<!-- The date and time when your article was originally published -->
<time class="op-published" datetime="2014-11-11T04:44:16Z">November 11th, 4:44 PM</time>
<!-- The date and time when your article was last updated -->
<time class="op-modified" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>
<!-- The authors of your article -->
<address>
<a>Author Name</a>
Author description.
</address>
<address>
<a>TR Vishwanath</a>
Vish is a scholar and a gentleman.
</address>
<!-- A kicker for your article -->
<h3 class="op-kicker">
This is a kicker
</h3>
</header>
<!-- Article body goes here -->
<!-- Body text for your article -->
<p> Article content </p>
<footer>
<!-- Credits for your article -->
<aside>Acknowledgements</aside>
<!-- Copyright details for your article -->
<small>Legal notes</small>
</footer>
</article>
</body>
</html>
I tried to add it in Production Article and also deleted and tried on new page, but it still giving same error. The detail error message is as below
General Errors: Article Updated From Different Page: The article cannot be updated from this page. Please use the page that originally created the article to update it.
What does it mean Updated From Different Page. I have created only one page in my account.
its a bug for instant artical.its not your post problem.At a time if you give 3 or 4 post.then show 1 post is not live.so take your time when you post something
wait a while brother. if you have linked it to other page, keep that unpublished.
I am implementing Facebook Instant Articles for my website and have come across the following problem.
Facebook says you can implement any ad code you wish, even Google Double Click for Publishers which uses Adsense as it's default backup when no ads from your current inventory are being served, but the code is inside an iframe as such:
<figure class="op-ad">
<!-- Use this for your ads -->
<iframe src="" height="50" width="320"></iframe>
</figure>
The thing is, I use Google Adsense for my ads and there is a problem with iframes:
http://adsense.blogspot.ro/2011/06/clarifying-our-ad-implementation.html
Anybody know how it's possible to solve this dilemma?
"""Facebook says you can implement any ad code you wish, even Google Double Click for Publishers which uses Adsense as it's default backup."""
You are not allowed to use adsense as the default backup. It is a violation of rule.
AdPlugg can do this. Your tag above would become:
<figure class="op-ad">
<!-- Use this for your ads -->
<iframe src="http://www.adplugg.com/serve/<your_adplugg_access_code>/html/1.1/index.html?zn=fb_zone_1" height="50" width="320"></iframe>
</figure>
You would then drop your AdSense tag into a "Custom" AdPlugg ad and configure it to serve into your "fb_zone_1" AdPlugg Zone (as specified in the example url above).
With this solution, you could rotate other ads (affiliate network, direct buy, etc) into the zone if you wanted. It would also allow you to update your ads without having to update your entire Instant Articles feed.
I posted a blog with more info about how to do it here: Facebook Instant Article Ads
A similar question (which might be of help) was asked/answered here: Add DFP DoubleClick inside a Facebook Instant article
Disclaimer: I work for AdPlugg.
Update: It seems that the current Facebook Instant Articles Policies only allow serving Direct Sold ads or Facebook Audience Network ads. No other ad networks are allowed. Under these policies, you could still use AdPlugg but only to serve ad inventory that you directly sold to Advertisers and not AdSense ads.
you can use your Adsensse tag. It worked fine for me, using a iframe.
Don't forget to use this in the article header:
<meta property="fb:use_automatic_ad_placement" content="true">
Here is a example of the tag:
<figure class="op-ad">
<iframe height="250" style="border:0;margin:0;padding:0;" width="300">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-XXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</iframe>
</figure>
Putting a context, your code would be like this:
<!doctype html>
<html lang="pt-br" prefix="op: http://media.facebook.com/op#">
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://yoursite/your-article/">
<meta property="fb:use_automatic_ad_placement" content="true">
<meta property="fb:article_style" content="default">
<meta property="op:markup_version" content="v1.0">
</head>
<body>
<article>
<header>
<!-- cover -->
<figure class="op-ad">
<iframe height="250" style="border:0;margin:0;padding:0;" width="300">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 300x250 - Rodapé Texto -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-XXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</iframe>
</figure>
<figure>
<img src="https://yoursite/your-article/image.jpg" />
</figure>
<!-- The title and subtitle shown in your Instant Article -->
<h1>Title;</h1>
<!-- author(s) -->
<address>
Writen by <a>Author</a>
</address>
<!-- publication date/time -->
<time class="op-published" datetime="2016-08-16T17:47:42+00:00">16 ago 2016</time>
<!-- modification date/time -->
<time class="op-modified" datetime="2016-08-16T17:47:42+00:00">16 ago 2016</time>
</header>
<!-- Article body goes here (CONTINUE LIKE A NORMAL INSTANT ARTICLE) -->
No matter how I mark up the image, Google complains that the image is either missing or has an invalid itemtype.
<html itemscope itemtype="http://schema.org/Article">
<head>
...
<link itemprop="image" href="https://www.example.com/image.jpg" />
</head>
<body>
<img itemprop="image" src="https://www.example.com/image.jpg" />
</body>
</html>
How do I add an image to an article?
Schema.org’s image property can have a URL (this is what you do) or an ImageObject as value.
For Google’s Articles Rich Snippet, Google seems (according to their documentation and their testing tool) to support only the variant with ImageObject.
So if you want to get that Rich Snippet, you might have to use something like this instead:
<body itemscope itemtype="http://schema.org/Article">
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<img itemprop="url" src="https://www.example.com/image.jpg" />
<meta itemprop="height" content="20" />
<meta itemprop="width" content="20" />
</div>
</body>
I am trying to implement Google Plus share on my page but instead of picking title from meta tags it is picking page title from url in share dialog title. Do I need to include anything else?
<meta property="og:title" content="Title"/>
<meta property="og:description" content="Description"/>
<a href="https://plus.google.com/share?url={google.com}"/>Link</a>
According to the Google Developer Site, the example code snippet for Google Plus shared links is:
<body itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="{image-url}" />
<p itemprop="description">Shiny trinkets are shiny.</p>
</body>
I am building a forum in PHP and I want users to be able to share the title and description of each post to facebook, twitter, ...etc using the Addthis social plugin. Here is the code Addthis has given me:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style "
addthis:url="www.example.com"
addthis:title="Example Title"
addthis:description="Example Description">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s6.addthis.com/js/154/addthis_widget.js#pubid=rd-39e8r89e9er8er989"></script>
<!-- AddThis Button END -->
I was able to change the url to another I have specified, but changing the title and description has no effect. In fact, they do not even show up when I click the share button and post it to my facebook wall. What is the proper way to get this to work?
AddThis doesn't officially support all these parameters as far as I can tell (I can't find them all in once place in their documentation), so ideally you should just use OpenGraph tags on the page you are on. But in any case...
You need to specify it on the custom buttons themselves, not on the toolbox. You can even specify the image. If your buttons have to come from AddThis instead of specifying them yourself, I'm not sure.
<div class="addthis_sharing_toolbox">
<a class="addthis_button_facebook"
addthis:url="http://google.com/"
addthis:title="Here's a title"
addthis:media="http://images.google.com/example.png"
addthis:description="Here's a cool description">
<i class="ico ico-facebook"></i>
</a>
<a class="addthis_button_twitter"
addthis:url="http://google.com/"
addthis:title="Here's a title"
addthis:media="http://images.google.com/example.png"
addthis:description="Here's a cool description">
<i class="ico ico-twitter"></i>
</a>
<a class="addthis_button_linkedin"
addthis:url="http://google.com/"
addthis:title="Here's a title"
addthis:media="http://images.google.com/example.png"
addthis:description="Here's a cool description">
<i class="ico ico-facebook"></i>
</a>
</div>
AddThis's documentation sucks so I just happened to run into the right things and figure this out. Enjoy!
AddThis specific recommend that you use meta tags from the Open Graph Protocol to specify what to show
We strongly recommend the page-tagging approach over passing your widget parameters to our APIs
So in your case you should have the code lie it's original:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s6.addthis.com/js/154/addthis_widget.js#pubid=rd-39e8r89e9er8er989"></script>
<!-- AddThis Button END -->
and change your header to include the addThis meta tags, in your example, like:
<meta property="og:url" content="http://www.example.com" />
<meta property="og:title" content="Example Title" />
<meta property="og:description" content="Example Title Description" />
<meta property="og:image" content="http://www.example.com/logo.gif" />
This avoids any problem you can encounter in the Client API.
I went around and around before finding this on the AddThis website:
Setting the URL & Title to Share
...for our newest tools, use the data-url and data-title parameters...
I am using their latest code (addthis_sharing_toolbox instead of addthis_toolbox) and all I could find were people using addthis:url="" which was not working.
to avoid any error due to image,try to set image width to minimuim
<meta property="og:image" content="#TempData["image"]" />
<meta property="og:title" content="#TempData["title"]" />
<meta property="og:url" content="#TempData["url"]" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
<meta property="og:description" content="#TempData["description"]" />
<meta name="twitter:title" content="#TempData["title"]">
<meta name="twitter:description" content="#TempData["description"]">
<meta name="twitter:image" content="#TempData["image"]">
<meta name="twitter:card" content="summary_large_image">
<meta charset="utf-8" />
added in page where inline toolbox is needed
<div class="addthis_inline_share_toolbox"></div>
added widget.js in layout/master page before closing body tag
<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=yourpubID"></script>
</body>
***** if any error below checking on information will be helpful ****
check if any redirect happen , then meta tag information should be presented on that page as well,
e.g if "Facebook Sharing Debugger" redirect page to any login page then meta tag required on login page as well
check how your source code look like (https://developers.facebook.com/tools/debug/ ---> Scraped URL)
check on below url, if any error in meta tag
https://developers.facebook.com/tools/debug/ (click on scrape again to see updated changes)
https://cards-dev.twitter.com/validator
https://www.linkedin.com/post-inspector/inspect/