Integration of social media with card packages
Data structures, components, runtime viewers and methods are described for integrating wrapped packages of cards into various social media feeds and for integrating social media feeds into wraps. In some embodiments, a wrap identifier or cover is provided within a social media feed. In response to selection of the wrap identifier a runtime viewer is initiated and a descriptor that defines the selected wrap is obtained. The runtime viewer creates a wrap instance based on the descriptor. The instance may be displayed in-line within the social media feed, in an overlay frame, a new browser tab or using other suitable mechanisms. Preferably, each card in the wrap is rendered at the same portrait aspect ratio. Within each card, the relative positioning of the card content is immutable. In a separate aspect, a wrap package may include a social media card arranged to display a social media feed.
1. A method of delivering a wrap package of cards for display on a display screen associated with a computing device, the method comprising:
receiving an indication of a selection of a wrap identifier in a social media feed displayed on the display screen associated with the computing device;
delivering a JavaScript Object Notation (JSON) wrap descriptor that corresponds to the wrap identifier to the computing device in response to the selection, the JSON wrap descriptor defining the wrap package of cards and including a plurality of JSON card descriptors for the plurality of cards of the wrap package respectively, each JSON card descriptor defining for an associated card:
a JSON card container; and
one or more JSON content containers, each of the JSON content containers including inline or referencing content respectively,
wherein the JSON card container and the one or more JSON content containers define the content and layout for the associated card; and
providing a runtime viewer to the computing device, the runtime viewer configured to create a runtime instance of the wrap package at the computing device by processing the JSON wrap descriptor,
wherein the runtime instance is arranged to be rendered on the display screen by the computing device by displaying the cards of the wrap package sequentially in response to navigational inputs.
2. A method as recited in claim 1 , wherein the runtime viewer is configured to render the runtime instance in the context of the social media feed by either:
(i) rendering the cards of the runtime instance within a frame appearing within the social media feed; or
(ii) rendering the cards of the runtime instance in an overlay frame appearing at least partially over the social media feed.
3. A method as recited claim 1 , wherein the runtime viewer is configured to render the runtime instance by overlaying the rendering of the cards of the wrap package over where the social media feed would otherwise be visible on the display screen.
4. A method as recited in claim 1 , wherein the runtime viewer is further configured to sequentially display the cards of the runtime instance, in response to swipe navigational inputs provided to the computing device, the computing device a mobile computing device have a touch-sensitive screen.
5. A method as recited in claim 1 , wherein the selection of the wrap identifier is accomplished by selecting a wrap cover that is displayed in the social media feed, the wrap cover including an image representative of the wrap package and having the wrap identifier embedded or referenced therein.
6. A method as recited in claim 1 , wherein the selection of the wrap identifier is accomplished by selecting a link that is displayed in the social media feed, the link including the wrap identifier embedded or referenced therein.
7. A method as recited in claim 1 , wherein the social media feed is selected from the group consisting of a Twitter feed, a Facebook feed, an Instagram feed, or a Pinterest feed.
8. A method as recited in claim 1 , wherein the social media feed is displayed by an app residing on the computing device, the runtime instance is displayed by a browser separate from the app and the runtime viewer is executed by the browser.
9. A method as recited in claim 1 , wherein providing the runtime viewer in response to the selection of the wrap identifier occurs in cooperation with the delivery of the JSON wrap descriptor.
10. A method as recited in claim 1 , wherein providing the runtime viewer further comprises providing a native application that includes the runtime viewer for execution on the computing device prior to the selection of the wrap identifier.
11. A method as recited in claim 1 , wherein the JSON wrap descriptor is a BSON wrap descriptor.
12. A method as recited in claim 1 , wherein the runtime instance is generated at the computing device by:
(a) creating an object graph from the JSON wrap descriptor;
(b) generating a document object model from the object graph; and
(c) generating the runtime instance from the document object model.
13. A method as recited in claim 1 , wherein:
(a) each of the cards in the wrap package is rendered in either a portrait or landscape aspect ratio at runtime; and
(b) within each card, the relative positioning of the content of the card is immutable.
14. A method of rendering a wrap package of cards on a display screen associated with a mobile computing device, the method comprising:
receiving an indication of a selection of a wrap identifier in a social media feed displayed on the display screen, the wrap identifier identifying the wrap package of cards;
in response to the selection of the wrap identifier, initiating a runtime viewer and obtaining a JavaScript Object Notation (JSON) descriptor that defines the wrap package, the JSON wrap descriptor including a plurality of JSON card descriptors for the cards of the wrap package respectively, each JSON card descriptor defining for an associated card:
a JSON card container; and
one or more JSON content containers, each of the JSON content containers including inline or referencing content respectively,
wherein the JSON card container and the one or more JSON content containers defining the content and layout for the associated card;
creating a runtime instance of the wrap package using the runtime viewer, the runtime instance created based on the JSON wrap descriptor; and
rendering the runtime instance on the display screen by sequentially displaying the plurality of cards of the wrap package in response to navigational inputs.
15. A method as recited in claim 14 wherein the runtime instance is displayed in-line within the social media feed.
16. A method as recited in claim 14 , further comprising opening a new frame on the display screen and displaying the runtime instance in the new frame.
17. A method as recited in claim 16 , wherein either the new frame or the runtime instance includes a close interface and selection of the close interface by a user closes the new frame such that the social media feed is no longer displayed on the display screen.
18. A method as recited in claim 14 , wherein the social media feed is displayed in a browser window and the runtime viewer is executed by the browser.
19. A method as recited in claim 18 , wherein the runtime viewer is not an integral part of the browser.
20. A method as recited in claim 14 , wherein the social media feed is displayed by an app residing on the computing device and the runtime viewer is executed by the app.
21. A wrap package of cards, embedded in a non-transitory tangible computer readable medium, the wrap package including a plurality of cards arranged to be rendered in one or more linear sequence(s), the wrap package including a social media card arranged to display a social media feed,
wherein the wrap package is represented by a JavaScript Object Notation (JSON) wrap descriptor that includes a plurality of JSON card descriptors for the plurality of cards respectively, each of the JSON card descriptors defining for an associated card:
a JSON card container;
one or more JSON content containers, each of the JSON content containers including inline or referencing content respectively,
wherein the JSON card container and the one or more JSON content containers define the content and layout for the associated card,
wherein the JSON card descriptor defining the social media card further defines the social media feed within the social media card,
the JSON wrap descriptor used by a consuming computing device to generate a runtime instance of the wrap package, the plurality of cards of the runtime instance of the wrap package sequentially rendered in the one or more linear sequence(s) on a display screen associated with the consuming computing device in response to navigable inputs.
22. A wrap package as recited in claim 21 , wherein the JSON wrap descriptor is a BSON data object.
23. A wrap package as recited in claim 21 , wherein a runtime instance of the wrap package is generated by:
(a) creating an object graph from the JSON wrap descriptor;
(b) generating a document object model from the object graph; and
(c) generating the runtime instance of the wrap package from the document object model.
24. A wrap package as recited in claim 21 , wherein the social media feed is either a Facebook feed or a Twitter feed.
25. A wrap package as recited in claim 21 , wherein the social media feed is displayed within an iframe contained within the social media card.
26. A wrap package as recited in claim 25 , wherein the JSON card descriptor defining the social media card includes a feed descriptor that:
defines a position within the social media card for the iframe,
identifies a feed server from which the content of the social media feed may be obtained; and
provides parameters to be passed to the feed server at runtime to identify the social media feed to be displayed.
27. A wrap package as recited in claim 21 , wherein the JSON card descriptor defining the social media card includes a feed descriptor that is used by a runtime viewer to establish the social media feed.
28. A wrap package as recited in claim 21 , wherein the runtime instance of the wrap package is generated by a native application running on the consuming computing device.
29. A wrap package as recited in claim 21 , wherein the JSON wrap descriptor is a portable data object that is deliverable to the consuming computing device over a data network.